Cómo agregar comentarios en CSS

En este tutorial vamos a ver cómo cómo puedes agregar comentarios tanto en archivos CSS como en el interior de las etiquetas style de HTML, que habitualmente se incluyen en la sección header de la página.

Contenidos

1 Qué es un comentario
2 Sintaxis de los comentarios CSS
3 Cómo excluir reglas en CSS
4 Comentarios en otros lenguajes

Qué es un comentario

Un comentario es una anotación en el código CSS que no es tenido en cuenta por el navegador a la hora de interpretar los estilos CSS.

Los comentarios no solo permiten realizar anotaciones, ya que también se suelen usar para excluir código CSS, algo habitual al realizar pruebas.

Sintaxis de los comentarios CSS

Para agregar comentarios en CSS tendrás que agregar los caracteres /* para iniciar el comentario y los caracteres */ para cerrarlo, tal y como puedes ver /* en este comentario */. Esta sintaxis es la misma que se utiliza en otros lenguajes como JavaScript, C o C++.

En CSS no existen los comentarios en línea, que habitualmente se agregan mediante los caracteres // o el carácter #. Todos los comentarios en CSS son multilínea, ocupando así todas las líneas que haya desde que se inicia el comentario con los caracteres /* hasta que se cierra con los caracteres */. Todo el texto o el código CSS que esté en medio será excluido de la hoja de estilos CSS o del bloque de estilos, aunque se mantendrá en el archivo.

En el siguiente ejemplo realizamos un comentario, excluyendo también el selector #apellido y la propiedad color de la clase .activo:

/* Esto es un comentario */
#nombre { display: block; }

/* #apellido { display: block; } */

.activo {
  display: block; /*
  color: blue;
  */
}

Cómo excluir reglas en CSS

Hemos dicho que mediante los caracteres // no podrás agregar comentarios en línea. Sin embargo, en CSS se utilizan para excluir la regla que esté definida en la siguiente línea. Es decir, que cuando uses los caracteres // antes de una regla, no será aplicada. Esto es debido a que CSS detecta un error de sintaxis y salta directamente a la siguiente regla.

En el siguiente ejemplo, la regla #nombre no será tenida en cuenta, quedando excluida de los estilos:i

// La siguiente regla se excluirá
#nombre { display: inline-block; }

Esto te permite, de algún modo, definir comentarios en línea, aunque no podrás agregar cualquier texto. Lo cierto es que no es del todo recomendable agregar comentarios de este modo. Para obtener más información acerca de este tipo de comentarios, puedes consultar este enlace.