Cómo crear comentarios en CSS

En programación es habitual realizar anotaciones y comentarios para indicar para lo que sirve una línea a líneas de código. Esta práctica que es muy útil para comprender el código pasado un tiempo, o para facilitar la comprensión por parte de un tercero, también es muy parte en la codificación web cuando se utiliza CSS.

Los comentarios en CSS aceleran el trabajo con hojas de estilo porque no es necesario pararse a pensar qué es lo que realiza cada etiqueta, ya que el comentario da información directa y precisa de para qué sirve.

Cuándo crear comentarios en CSS

Puedo crear comentarios en mi web cuando estoy escribiendo código en HTML o diseñando el aspecto visual con CSS. Durante este proceso de desarrollo es necesario y recomendable utilizar comentarios para facilitar el trabajo, evitar pérdidas de tiempo y fomentar el trabajo colaborativo.

Una vez terminado el desarrollo se pueden eliminar aquellos comentarios que no aporten valor, y dejar solo aquellos que son necesarios para comprender lo que realiza una línea o bloque de código.

Un uso que también se le da a los comentarios es el de desactivar temporalmente algunos valores de la hoja de estilo. Para ello se añaden los símbolos /* que indican que se trata de un comentario, antes y después del código, consiguiendo así que no se ejecute. En cualquier momento se pueden borrar estos símbolos para activar nuevamente el código.

Cómo organizar el CSS con los comentarios

En el código CSS los comentarios se indican con el símbolo /*, tanto para la apertura o el cierre, por ejemplo: width: 250px; /* Ancho del menú /*.

Todo el texto que se encuentra dentro de estos símbolos es considerado por el CSS como comentarios y por lo tanto no se ejecutarán como si se tratasen de etiquetas o comandos.

Cabe destacar que todos estos comentarios siempre permanecen ocultos para los usuarios cuando acceden al sitio web a través de su navegador web. El usuario solo podrá ver los comentarios si accede al sitio utilizando el modo desarrollador (o similar) en las opciones de su navegador, lo que le permite ver el código de una página.

Los comentarios incluidos en CSS pueden ser principalmente de una sola línea, por lo que se añaden a continuación de una etiqueta CSS para indicar qué es lo que realizan, o de varias líneas, que suelen utilizarse para indicar información más detallada sobre el código, indicar que falta código por añadir, etc.

Durante el desarrollo web es habitual realizar distintos comentarios en el código o etiquetas CSS:

• Aclaratorios. Son comentarios para explicar de forma detallada un determinado valor o etiqueta CSS.
• Deshabilitar código. Para que una parte del código CSS concreto no se ejecute temporalmente.
• Separador de código. Son comentarios que se añaden entre secciones o bloques de código con el objetivo de aclarar para qué se utilizan. Por ejemplo, un comentario para indicar que el código que viene a continuación, corresponde al footer de la página.
• Información. Otro uso habitual de los comentarios en CSS es incluir información como la versión del código y fecha de modificación, el tipo de licencia, el autor del código, y otra información similar. Estos comentarios se suelen añadir agrupados, o bien al principio del código, o al final del mismo.

Los comentarios en CSS son un elemento muy interesante para organizar el código y conseguir una estructura mucho más definida y sencilla de comprender. Cuando se trabaja en programación es habitual que al principio los programas o código sean simples y no ocupen muchas líneas, pero con el paso del tiempo se van añadiendo mejoras y nuevas funciones y este código puede volverse ilegible o muy complicado de entender.

En CSS ocurre lo mismo pues una página web con estilos CSS al principio es básica y contiene pocas líneas de código, pero a la vez que se empieza a diseñar cada elemento de la web, cambiar sus propiedades y añadir funciones, el código CSS crece de manera considerable y puede llegar a ser muy difícil de mantener, llevando mucho tiempo y esfuerzo poder realizar cualquier pequeño cambio al no encontrar exactamente dónde se encuentra el código exacto que se quiere modificar.

Muchos programadores front-end utilizan un índice al principio de su código CSS utilizando los comentarios con el objetivo de facilitar la búsqueda de cualquier elemento o regla en el futuro, y así poder realizar las modificaciones o cambios necesarios de forma mucho más rápida y sencilla.

Crear comentarios en CSS es una práctica muy importante que todo programador web debe acostumbrarse a utilizar cuando trabaja con etiquetas de estilo CSS. Los comentarios son una herramienta ideal para estructurar correctamente el código, facilitar su comprensión y lectura, y acelerar el trabajo a la hora de realizar cambios o añadir nuevo código.

Los comentarios CSS también ayudan a que un tercero pueda entender y trabajar con el código CSS de forma más sencilla.