Cómo crear comentarios en CSS

Los comentarios en CSS son anotaciones dentro de una hoja de estilos que el navegador ignora al representar la página. Se escriben entre los símbolos /* y */ y pueden ocupar una o varias líneas. Sirven para explicar qué hace cada bloque de código, organizar archivos extensos y desactivar estilos de forma temporal sin borrarlos.

Qué son los comentarios en CSS y para qué sirven

En programación es habitual realizar anotaciones para indicar para qué sirve una línea o un conjunto de líneas de código. Esta práctica, muy útil para entender el código pasado un tiempo o para facilitar su comprensión a otra persona, es igual de importante al trabajar con CSS. Un comentario no afecta al resultado visual de la web: el navegador lo descarta por completo, de modo que solo lo ven quienes editan el archivo.

Los comentarios en CSS aceleran el trabajo con hojas de estilo porque evitan tener que detenerse a interpretar qué hace cada regla. En lugar de leer y deducir la función de un selector, el comentario ofrece información directa y precisa. En proyectos que crecen con el tiempo, donde una hoja de estilos puede tener cientos o miles de líneas, esta documentación interna marca la diferencia entre un archivo manejable y uno imposible de mantener.

Cómo crear un comentario en CSS

Crear un comentario en CSS es muy sencillo: basta con abrir con la secuencia /* y cerrar con */. Todo lo que quede entre ambos símbolos se considera comentario y no se aplica como estilo. A diferencia de otros lenguajes, CSS no dispone de un símbolo específico para comentarios de una sola línea: se utiliza siempre la misma sintaxis tanto para una palabra como para varios párrafos.

Un comentario de una línea puede colocarse encima de una regla para describirla, por ejemplo /* Estilos de la cabecera */. También se pueden escribir comentarios de varias líneas para explicaciones más largas, abriendo /* en la primera línea y cerrando */ en la última. Conviene recordar que los comentarios no se pueden anidar: si dentro de un comentario aparece otro cierre, el primero se cerrará antes de tiempo y el resto del texto se interpretará como código.

Cuándo crear comentarios en CSS

Puedes crear comentarios siempre que escribas o diseñes el aspecto visual de una web, pero hay momentos en los que resultan especialmente recomendables. El primero es al separar secciones de la hoja de estilos: cabecera, menú, contenido principal, barra lateral y pie de página. Un breve comentario antes de cada bloque permite localizar de un vistazo la parte que quieres modificar.

También son útiles para aclarar decisiones que no resultan evidentes, como por qué se ha fijado un margen concreto o por qué se ha usado un valor determinado para resolver un problema de compatibilidad entre navegadores. Otro uso frecuente es desactivar temporalmente un fragmento de código: en lugar de borrarlo, se encierra entre /* y */ para comprobar cómo queda la página sin esos estilos y poder recuperarlos después.

Cómo organizar el CSS con los comentarios

Más allá de explicar reglas sueltas, los comentarios sirven para dar estructura a toda la hoja de estilos. Una práctica habitual es crear encabezados de sección destacados, por ejemplo con una línea de guiones o asteriscos, para que cada parte del archivo se distinga con claridad al desplazarse por él. Algunos desarrolladores incluyen incluso un índice al principio del documento con la lista de secciones.

Mantener un criterio coherente —siempre el mismo formato de encabezado, el mismo idioma y un orden lógico de las secciones— convierte un archivo CSS largo en algo navegable. Cuando varias personas trabajan sobre el mismo proyecto, esta organización evita duplicar reglas y facilita que cualquiera encuentre y modifique los estilos sin romper el diseño existente.

Buenas prácticas con los comentarios en CSS

Comentar el código es recomendable, pero conviene hacerlo con criterio. Un exceso de comentarios obvios añade ruido sin aportar valor. Lo ideal es documentar lo que no se deduce a simple vista: la intención detrás de una regla, las dependencias con otras partes del diseño o las soluciones a problemas concretos. Así, el comentario aporta contexto en lugar de repetir lo que el propio código ya expresa.

Otra recomendación es revisar los comentarios cuando se cambia el código, para que no queden anotaciones obsoletas que describan algo que ya no existe. Por último, en entornos de producción es habitual «minificar» el CSS, un proceso que elimina espacios y comentarios para reducir el tamaño del archivo y acelerar la carga, conservando aparte una versión comentada para el desarrollo.

Ejemplo práctico de comentarios en una hoja de estilos

Imagina una hoja de estilos dividida en bloques. Al principio puedes incluir un comentario de cabecera con el nombre del proyecto, la fecha de la última revisión y el responsable, de modo que cualquiera que abra el archivo sepa de inmediato ante qué se encuentra. A continuación, antes de cada conjunto de reglas, un comentario corto como /* Navegación principal */ o /* Formularios de contacto */ identifica la sección y la hace fácil de localizar.

Este enfoque resulta especialmente valioso en plantillas de WordPress o en proyectos que se mantienen durante años. Si más adelante necesitas cambiar el color de los botones o el espaciado del menú, los comentarios te llevan directamente a la zona correcta sin tener que leer todo el archivo. La inversión de unos segundos en documentar se traduce en muchas horas ahorradas cada vez que vuelves al código.

Del diseño a la publicación: dónde alojar tu web

Cuando terminas de dar estilo a tu sitio con CSS, el siguiente paso es publicarlo para que cualquiera pueda verlo. Para ello necesitas un alojamiento que sirva tus archivos con rapidez y sin caídas. Un servicio de hosting con tecnología LiteSpeed y discos NVMe acelera la entrega de las hojas de estilo y del resto de recursos, e incluye SSL y migración para que tu web cargue de forma segura desde el primer día.

Preguntas frecuentes

¿Cómo se escribe un comentario en CSS?

Se abre con /* y se cierra con */. Todo el texto situado entre ambos símbolos se considera un comentario y el navegador lo ignora. La misma sintaxis sirve tanto para comentarios de una línea como de varias.

¿Los comentarios en CSS afectan al rendimiento de la web?

En el archivo de desarrollo su impacto es insignificante. Aun así, en producción se suele minificar el CSS para eliminar comentarios y espacios, lo que reduce el tamaño del archivo y mejora ligeramente la velocidad de carga de la página.

¿Se pueden anidar comentarios en CSS?

No. CSS no permite anidar comentarios: el primer cierre que encuentra termina el comentario abierto. Si necesitas desactivar un bloque que ya contiene comentarios, tendrás que eliminar o adaptar los internos para evitar errores.