En CSS, los comentarios se utilizan para agregar anotaciones o aclaraciones sobre partes del código, tal y como se hace en cualquier otro lenguaje. Los navegadores web ignoran estas porciones de texto, por lo tanto no las interpretan. Se pueden introducir en cualquier parte del código CSS.
Se puede dar muchos usos a los comentarios. Por ejemplo, para marcar el principio y final de una sección, o para puntualizar que algo debe ser revisado cuando se disponga de más tiempo. Realizar los comentarios oportunos y necesarios hará que el código sea más comprensible para otros diseñadores web.
En resumen, los comentarios son útiles para documentar el código CSS y facilitar que otros desarrolladores web puedan entender los motivos por los que un código se ha escrito de una determinada manera y no de otra.
En CSS, los comentarios se introducen entre las etiquetas /* (de apertura) y */ (de cierre). Por lo tanto, todo el texto que esté entre estas dos etiquetas será ignorado por parte de los navegadores web.
Ejemplo de un comentario en CSS:
/* Comentario de CSS */
Es habitual dejar un espacio [opcional] entre el asterisco y el contenido, ya que mejora la legibilidad del comentario.
Comentarios de una línea
Los comentarios que ocupan una sola línea tienen las etiquetas de apertura y de cierre (/* y */) en la misma línea, y se utilizan para introducir notas breves sobre una regla de estilo en concreto. Pueden ocupar una porción de línea.
En el siguiente ejemplo, se utiliza un comentario de una sola línea para indicar la sección del documento sobre la que se aplican estilos:
/* Contenido principal */
.main {
background: white;
color: black;
}
Comentarios de múltiples líneas
Con los comentarios de múltiples líneas es posible crear anotaciones más extensas sobre una parte del código. En estos casos, la etiqueta de apertura (/*) se encuentra en una línea y la de cierre (*/) se encuentra en otra.
/* Este comentario
tiene tiene
múltiples líneas. */
Los comentarios de múltiples líneas son muy útiles cuando se desea ignorar bloques enteros en tareas de depuración, mientras se está en fase de desarrollo.
/*
p {
background: lightyellow;
color: red;
}
*/
p {
background: lightcyan;
color: blue;
}
Comentarios dentro de <style>
Cuando se crean estilos CSS en el documento HTML mediante el elemento <style>, lo más recomendable es usar las etiquetas /* y */ ya descritas. De forma alternativa se podría usar las etiquetas que se emplea en el lenguaje HTML, es decir, la etiqueta <!-- (de apertura) y --> (de cierre).
<style>
/* Comentario de CSS */
.texto {
color: blue;
}
</style>
Validación de comentarios
Hay que tener especial cuidado en cerrar bien los comentarios. Es importante tener claro que a toda etiqueta de apertura (/*) debe seguirle una etiqueta de cierre (*/), por lo que el comentario no se cerrará hasta encontrarla.
Dejar comentarios mal cerrados y mal iniciados puede provocar que partes de código sean interpretadas de forma parcial, dando resultados indeseados.
Buenas prácticas
Para que los comentarios CSS sean realmente útiles hay que usarlos de forma efectiva. Usar demasiados comentarios obvios añadirá muchas líneas sin utilidad, y usar comentarios ambiguos añadirá más confusión que claridad.
En resumen, es importante que los comentarios sean claros y concisos, y usarlos cuando sea necesario. Por ejemplo, un comentario útil sería el que describe el propósito de un bloque de código; o cuando se divide el código en secciones, como si se tratara de los apartados del índice de un libro.
