¿Cómo se insertan comentarios en el código CSS y para qué sirven?

Los comentarios en CSS te permiten añadir notas, explicaciones o desactivar temporalmente partes de tu código sin que el navegador los interprete como reglas de estilo. Son invisibles para el usuario final pero muy valiosos para los desarrolladores.

Cómo se insertan:

En CSS, los comentarios se escriben comenzando con una barra inclinada seguida de un asterisco (/*) y terminando con un asterisco seguido de una barra inclinada (*/). Todo el texto que se encuentre entre estos dos delimitadores será ignorado por el navegador.

Los comentarios pueden ocupar una sola línea o extenderse a múltiples líneas:

/* Este es un comentario de una sola línea en CSS. */

h1 {
  color: #333; /* Comentario al final de una declaración, explicando esta propiedad. */
  font-size: 2em;
}

/*
  Este es un comentario
  que ocupa varias líneas.
  Puede ser útil para explicaciones más detalladas
  o para documentar una sección completa de estilos.
*/

/*
.clase-experimental {
  background-color: yellow;
  border: 1px dashed red;
}
*/ /* ^^^ Este bloque de código está comentado, por lo que no se aplicará. */Lenguaje del código: PHP (php)

¿Para qué sirven los comentarios en CSS?

1. Explicar el código: Aclarar el propósito de ciertas reglas de estilo, especialmente si son complejas, utilizan técnicas no obvias, o si se tomó una decisión de diseño particular. Esto ayuda a otros desarrolladores (y a tu yo futuro) a entender el código más fácilmente.
2. Organizar la hoja de estilos: Se pueden usar para dividir visualmente el archivo CSS en secciones lógicas, como por ejemplo: /* --- Estilos de la Cabecera --- */, /* --- Estilos de los Productos --- */, etc., lo que facilita la navegación y la localización de reglas específicas.
3. Depurar (Debugging): Permiten desactivar temporalmente bloques de código CSS sin tener que borrarlos. Si sospechas que una regla está causando un problema, puedes comentarla para ver si eso lo soluciona.
4. Dejar notas o tareas pendientes (TODOs): Puedes anotar recordatorios para futuras modificaciones, optimizaciones o correcciones directamente en el código.
5. Información de autoría o licencia: A veces se utilizan al inicio de los archivos para incluir información sobre el autor, la versión o la licencia del código.

Usar comentarios de forma efectiva es una buena práctica que contribuye a un código CSS más legible, mantenible y colaborativo.