Los comentarios en CSS son pequeñas anotaciones que puedes introducir dentro de tu código para explicar qué hace cada regla, organizar una hoja de estilos o dejar indicaciones para futuras modificaciones sin afectar al diseño de tu página web. 🎨
Si estás empezando a trabajar con CSS, aprender cómo comentar código CSS es una práctica sencilla que puede ahorrarte bastante tiempo cuando tus hojas de estilo empiezan a crecer.
Además, los comentarios resultan especialmente útiles si trabajas en WordPress, desarrollas una web junto a otras personas o simplemente quieres entender rápidamente por qué escribiste determinada regla varios meses después.
En este tutorial vas a aprender cómo añadir comentarios en CSS, para qué sirven, cómo utilizarlos correctamente y qué errores debes evitar.
💬 ¿Qué es un comentario en CSS?
Un comentario CSS es un fragmento de texto incluido dentro de una hoja de estilos que el navegador ignora por completo al interpretar el código.
Esto significa que puedes escribir explicaciones, recordatorios, encabezados o cualquier otra información dentro del CSS sin que ese contenido produzca ningún cambio visual en la página.
La sintaxis utilizada para crear un comentario es la siguiente:
/* Este es un comentario en CSS */
Todo lo que escribas entre /* y */ será considerado un comentario y, por tanto, será ignorado por el navegador.
Puedes consultar también la documentación sobre comentarios CSS de MDN Web Docs si quieres profundizar en la sintaxis utilizada por CSS.
✏️ Cómo añadir un comentario en CSS
Añadir comentarios dentro de tu código es extremadamente sencillo porque solamente necesitas utilizar los caracteres de apertura y cierre correspondientes.
Sigue estos pasos:
- Abre tu archivo CSS o accede al apartado donde estés introduciendo tu código personalizado.
- Coloca
/*justo antes del texto que quieres convertir en comentario. - Escribe la explicación o anotación que quieras incluir.
- Añade
*/al final para cerrar correctamente el comentario. - Guarda los cambios realizados en la hoja de estilos.
Por ejemplo, podrías utilizar este comentario antes de modificar el color de los enlaces:
/* Cambiar el color de los enlaces */
a {
color: #333333;
}
El navegador aplicará la propiedad correspondiente al elemento a, pero ignorará completamente el texto incluido en el comentario.
📌 Cómo añadir comentarios de varias líneas en CSS
Los comentarios CSS también pueden ocupar varias líneas, algo especialmente práctico cuando necesitas escribir explicaciones más largas.
Podrías utilizar una estructura como esta:
/*
Este código modifica
el color y el tamaño
de todos los títulos H2
*/
h2 {
color: #222222;
font-size: 32px;
}
No necesitas colocar los símbolos de comentario individualmente en cada línea porque todo el contenido situado entre /* y */ será tratado como un único comentario.
Esta característica puede resultar muy práctica cuando quieres documentar cambios importantes o reglas CSS complejas.
🗂️ Usar comentarios para organizar una hoja CSS
Una de las mejores aplicaciones de los comentarios consiste en utilizarlos como separadores entre diferentes bloques de estilos.
Cuando una hoja CSS contiene cientos o incluso miles de líneas, encontrar rápidamente una regla determinada puede convertirse en una tarea bastante tediosa.
Puedes solucionar este problema creando encabezados como estos:
/* =========================
HEADER
========================= */
header {
background: #ffffff;
}
/* =========================
MENÚ DE NAVEGACIÓN
========================= */
.menu {
display: flex;
}
/* =========================
FOOTER
========================= */
footer {
padding: 40px;
}
Este sistema hace que el código resulte mucho más fácil de explorar visualmente, especialmente cuando trabajas en proyectos relativamente grandes.
También puedes utilizar comentarios para crear una especie de índice interno dentro de tus archivos CSS.
🧪 Desactivar temporalmente código CSS con comentarios
Otra utilidad muy interesante consiste en utilizar comentarios para desactivar temporalmente una regla CSS sin eliminarla.
Imagina que tienes este código:
.boton {
background-color: blue;
border-radius: 5px;
}
Si quieres comprobar cómo queda el botón sin el borde redondeado, puedes comentar únicamente esa propiedad:
.boton {
background-color: blue;
/* border-radius: 5px; */
}
El navegador ignorará border-radius, pero la propiedad permanecerá dentro del archivo para que puedas reactivarla rápidamente cuando quieras.
Esta técnica es especialmente útil cuando estás realizando pruebas CSS y quieres comparar diferentes configuraciones.
⚠️ Cuidado al comentar varias propiedades
También puedes desactivar un bloque completo colocando el comentario alrededor de varias propiedades.
Por ejemplo:
.boton {
/*
background-color: blue;
color: white;
padding: 15px;
*/
}
Debes asegurarte siempre de abrir y cerrar correctamente el comentario, ya que olvidar */ podría provocar que el navegador ignore una parte mucho mayor del código de la que pretendías.
Si después de añadir un comentario observas que algunas reglas CSS han dejado de funcionar repentinamente, comprobar el cierre del comentario debería ser una de las primeras cosas que revises.
❌ ¿Se pueden utilizar // para comentar CSS?
Un error bastante habitual entre personas que trabajan también con JavaScript, PHP u otros lenguajes consiste en intentar utilizar // para crear comentarios CSS.
Por ejemplo, esto no es un comentario CSS válido:
// Cambiar el tamaño del título
h1 {
font-size: 40px;
}
La sintaxis oficial de CSS utiliza exclusivamente /* comentario */, por lo que conviene acostumbrarte a ella desde el principio.
Puedes encontrar información adicional sobre la sintaxis del lenguaje en la documentación de CSS del W3C.
📝 Añadir comentarios CSS en WordPress
Si utilizas WordPress, puedes utilizar exactamente la misma sintaxis cuando añadas CSS personalizado a tu página.
Por ejemplo:
/* Ocultar el título de determinadas páginas */
.page-id-25 .entry-title {
display: none;
}
Los comentarios pueden ayudarte especialmente en WordPress porque es habitual acumular pequeños fragmentos de código destinados a plugins, páginas concretas, WooCommerce o modificaciones del tema.
Una buena práctica consiste en indicar encima de cada fragmento exactamente qué modifica:
/* WooCommerce - Cambiar color del botón comprar */
.single-product .single_add_to_cart_button {
background-color: #222222;
}
De esta forma podrás localizar rápidamente cada personalización cuando necesites modificarla o eliminarla posteriormente.
✅ Buenas prácticas para escribir comentarios CSS
Los comentarios deberían ayudarte a comprender el código y no convertir la hoja de estilos en un documento innecesariamente complicado.
Puedes seguir estas recomendaciones:
- Utiliza comentarios para identificar secciones importantes como cabecera, menú, contenido, formularios o pie de página.
- Explica aquellas reglas cuyo funcionamiento no resulte evidente simplemente leyendo el código.
- Evita comentar absolutamente cada propiedad porque terminarás creando demasiado ruido visual.
- Mantén los comentarios breves y descriptivos siempre que sea posible.
- Utiliza un formato coherente para todos los separadores y encabezados de tu hoja de estilos.
- Elimina los comentarios antiguos cuando hagan referencia a código que ya no existe.
- Añade una pequeña explicación cuando utilices una solución extraña para corregir un problema específico de compatibilidad.
El objetivo debería ser conseguir que cualquier persona pueda abrir tu archivo CSS y comprender rápidamente su estructura.
📊 Tabla resumen sobre los comentarios en CSS
| Acción | Sintaxis o ejemplo | Utilidad |
|---|---|---|
| Crear un comentario | /* Comentario */ | Añadir anotaciones |
| Comentario multilínea | /* Texto en varias líneas */ | Añadir explicaciones largas |
| Desactivar una propiedad | /* color: red; */ | Realizar pruebas |
| Desactivar varias reglas | /* ... */ | Ocultar temporalmente código |
| Separar secciones | /* HEADER */ | Organizar el CSS |
| Cerrar un comentario | */ | Evitar errores |
Usar // | No recomendado | No es sintaxis válida de comentarios CSS |
🔍 Comentarios CSS para encontrar código rápidamente
Cuando trabajes con archivos grandes, puedes crear comentarios utilizando palabras fáciles de localizar mediante el buscador de tu editor de código.
Por ejemplo:
/* FORMULARIO CONTACTO */
Después solamente tendrás que buscar FORMULARIO CONTACTO para saltar directamente hasta esa parte del archivo.
Este pequeño sistema puede aumentar considerablemente tu productividad al modificar páginas web complejas.
🚀 Ejemplo de una hoja CSS bien comentada
Una hoja de estilos sencilla podría organizarse de esta manera:
/* =========================
ESTILOS GENERALES
========================= */
body {
font-family: Arial, sans-serif;
}
/* =========================
TÍTULOS
========================= */
h1,
h2,
h3 {
line-height: 1.2;
}
/* =========================
BOTONES
========================= */
.boton {
padding: 10px 20px;
border-radius: 5px;
}
/* =========================
FOOTER
========================= */
footer {
margin-top: 50px;
}
Gracias a los comentarios puedes saber inmediatamente dónde comienza cada sección sin tener que analizar una por una todas las reglas.
🎯 Conclusión
Aprender cómo añadir comentarios en CSS puede parecer algo secundario cuando estás empezando, pero terminará siendo una herramienta fundamental a medida que tus proyectos sean más grandes.
Solo necesitas recordar que un comentario comienza con /* y termina con */, y que cualquier contenido situado entre ambos símbolos será ignorado por el navegador.
Utiliza los comentarios para documentar cambios, organizar tus estilos, realizar pruebas y recordar el propósito de determinadas reglas, pero evita llenar tu código de anotaciones que no aporten información útil.
Si mantienes tus hojas de estilo correctamente comentadas y ordenadas, te resultará mucho más sencillo modificar, depurar y mantener el CSS de tu web con el paso del tiempo. 🚀
