Skip to main content

Cómo agregar comentarios a las hojas de estilo en cascada (CSS)

Macro para poner comentarios en celdas con condición (Abril 2025)

Macro para poner comentarios en celdas con condición (Abril 2025)
Anonim

Cada sitio web se compone de elementos estructurales (que están dictados por HTML), funcionales y estilísticos. Las hojas de estilo en cascada (CSS) se utilizan para dictar la apariencia (la "apariencia") de un sitio web. Estos estilos se mantienen separados de la estructura HTML para permitir la actualización y el cumplimiento de los estándares web.

El problema con las hojas de estilo

Con el tamaño y la complejidad de muchos sitios web de hoy, las hojas de estilo pueden llegar a ser bastante largas y engorrosas. Esto es especialmente cierto ahora que las consultas de medios para los estilos de sitios web sensibles son una parte esencial del diseño, asegurando que un sitio web se vea como debería, independientemente del dispositivo. Esas consultas de medios solo pueden agregar un número significativo de nuevos estilos a un documento CSS, lo que hace que sea aún más difícil trabajar con ellos. Aquí es donde los comentarios de CSS pueden convertirse en una valiosa ayuda para los diseñadores y desarrolladores de sitios web.

Comentarios Añadir estructura y claridad

Agregar comentarios a los archivos CSS de un sitio web es una excelente manera de organizar secciones de ese código para un lector humano que está revisando el documento. También garantiza la coherencia cuando un profesional de la web retoma el lugar donde otro termina o cuando los equipos de personas trabajan en un sitio.

Los comentarios bien formateados pueden comunicar aspectos importantes de la hoja de estilo a los miembros de un equipo que pueden no estar familiarizados con el código ya. Estos comentarios también son muy útiles para las personas que han trabajado en el sitio anteriormente pero que no lo han hecho recientemente; los diseñadores web suelen trabajar en muchos sitios, y recordar las estrategias de diseño de uno a otro es difícil.

Solo para ojos de profesionales

Los comentarios CSS no se muestran cuando la página se representa en los navegadores web. Esos comentarios son solo informativos, al igual que los comentarios HTML (aunque la sintaxis es diferente). Estos comentarios CSS no afectan de ninguna manera la visualización de un sitio.

Agregando Comentarios CSS

Agregar un comentario CSS es bastante fácil. Simplemente agreste su comentario con las etiquetas de comentario de apertura y cierre correctas:

  • Comience su comentario agregando

    /*

  • Cierra tu comentario agregando

    */

Todo lo que aparece entre estas dos etiquetas es el contenido del comentario, visible solo en el código y no generado por el navegador.

Un comentario de CSS puede ocupar cualquier número de líneas. Aquí hay dos ejemplos:

/ * Ejemplo de borde rojo * / div # border_red { borde: delgado rojo sólido; }/*******************************************************Estilo para el texto del código*******************************************************/

Rompiendo secciones

Muchos diseñadores organizan hojas de estilo en trozos pequeños y fácilmente digeribles que son fáciles de escanear al leer. Por lo general, verá comentarios precedidos y seguidos por una serie de guiones que crean saltos grandes y obvios en la página que son fáciles de ver. Aquí hay un ejemplo:

/ * ----------------------- Estilos de encabezado ----------------------- ------- * /

Estos comentarios indican el inicio de una nueva sección de codificación.

Código "Comentando"

Debido a que las etiquetas de comentarios le dicen al navegador que ignore todo lo que hay entre ellas, puedes usarlas para deshabilitar temporalmente ciertas partes del código CSS. Esto puede ser útil al depurar o al ajustar el formato de la página web. De hecho, los diseñadores a menudo los usan para "comentar" o "desactivar" las áreas de código para ver qué sucede si esa sección no es parte de la página.

Para hacer esto, simplemente agregue la etiqueta de comentario de apertura antes del código que desea comentar (deshabilitar); coloque la etiqueta de cierre donde desee que finalice la parte inhabilitada. Nada entre esas etiquetas afectará la visualización visual de un sitio, lo que le permitirá depurar el CSS para ver dónde está ocurriendo un problema. Luego puede ir y solucionar solo ese problema y eliminar los comentarios del código.

Consejos para comentar CSS

Como resumen, aquí hay algunos consejos que debe recordar para usar los comentarios en su CSS:

  1. Los comentarios pueden abarcar múltiples líneas.
  2. Los comentarios pueden incluir elementos CSS que no desea que se muestre un navegador pero que no desea eliminar por completo. Recuerde eliminar los estilos no utilizados (en lugar de dejarlos como comentarios) si decide que no los necesita en el sitio web.
  3. Use comentarios cuando escriba CSS complicado para agregar estructura, aclarar decisiones de diseño e informar a futuros desarrolladores (o recordarse) sobre consideraciones importantes. Esto ahorra tiempo en el futuro para todos los involucrados.
  4. Los comentarios también pueden incluir metainformación como:
    1. Autor
    2. Fecha de creacion
    3. Derechos de autor

Actuación

Si bien agregar demasiados comentarios puede afectar la velocidad de descarga y el rendimiento de un sitio, no debe dudar en usarlos. Se necesitarían muchas líneas de comentarios para tener un impacto negativo significativo. Al igual que muchos aspectos del diseño web, todo se reduce al equilibrio.