Cargando...

Comentarios en CSS

Ya sabes escribir reglas y enlazar una hoja de estilos. A veces, sin embargo, necesitas dejarte una nota en el código, o apagar un estilo mientras haces pruebas sin tener que borrarlo. Para eso sirven los comentarios en CSS.

¿Qué son los comentarios en CSS?

Un comentario en CSS es una nota escrita entre /* y */. El navegador la ignora por completo al aplicar los estilos. Úsalo para recordatorios breves, para titular secciones de la hoja de estilos o para desactivar una regla de forma temporal mientras experimentas.

Cómo se escribe un comentario

Un comentario se escribe así: /* tu nota aquí */. Todo lo que quede entre el /* de apertura y el */ de cierre lo pasa por alto el motor de CSS. Los visitantes no ven los comentarios como texto de la página: viven en el código fuente de la hoja de estilos (y en las DevTools si abres el archivo).

Comentario de una sola línea

css
CSS Code 
/* Brand teal for the hero heading */
.hero {
color: #0f766e;
}

Por qué bastan las notas cortas

Un comentario de una línea sobre una regla puede explicar por qué existe un valor: es el color de la marca, un arreglo provisional o una decisión de accesibilidad. Mejor breve que largo; dentro de unas semanas solo necesitarás una pista para acordarte.

Comentarios de varias líneas

Un comentario puede ocupar varias líneas. Una costumbre habitual es poner un pequeño «rótulo de sección» antes de un grupo de reglas relacionadas, para que una hoja de estilos larga se pueda recorrer con facilidad.

Comentario de sección de varias líneas

css
CSS Code 
/*
Header styles
Keep logo and nav colors here
*/
.site-header {
background: #0f172a;
color: #f8fafc;
}

Mantén breves los comentarios de varias líneas. Si llenas el archivo de párrafos explicativos, costará más leerlo que si no tuviera ningún comentario.

Desactivar una regla temporalmente

Puedes envolver una declaración —o una regla entera— en un comentario para apagarla sin borrarla. Más tarde, quita las marcas y el estilo vuelve. Es muy útil cuando depuras y quieres averiguar qué propiedad rompe el diseño.

Comentar una declaración

css
CSS Code 
.hero {
color: #0f766e;
/* font-size: 2rem; */
font-family: Georgia, serif;
}

Un buen hábito al probar

Comenta siempre lo mínimo que te ayude a entender el problema; empieza por una sola declaración. Si la página vuelve a verse bien, has encontrado al culpable. Después, corrige el valor o elimina el código muerto. No dejes grandes bloques desactivados para siempre en una hoja de estilos terminada.

No es lo mismo que un comentario HTML

Los comentarios HTML usan <!-- y -->; los de CSS usan /* y */. No pegues las marcas de comentario de HTML dentro de un archivo .css (ni en un bloque <style> esperando que funcionen: ahí rige la sintaxis de CSS). Cada lenguaje tiene su propia forma de comentar. Si ya conoces los comentarios HTML, piensa en esto como una habilidad paralela con marcas distintas.

Los comentarios no son un lugar seguro

Cualquiera que pueda abrir la hoja de estilos (o usar «Ver código fuente» o la pestaña Network) puede leer tus comentarios. Nunca escribas contraseñas, claves privadas ni tokens secretos en comentarios CSS. Los comentarios son para notas de desarrollo, no para esconder datos sensibles.

Pruébalo tú mismo

  1. Abre una hoja de estilos de práctica (o un bloque <style>) con una regla .hero que defina color y font-size.
  2. Escribe encima de la regla un comentario de una línea que explique por qué elegiste ese color.
  3. Envuelve la declaración de font-size en /* … */, guarda y recarga: el tamaño vuelve al valor por defecto y el color se sigue aplicando.
  4. Quita las marcas de comentario alrededor de font-size y recarga de nuevo para recuperar el estilo.
  5. Opcional: añade encima del grupo de reglas un comentario breve de varias líneas como rótulo de sección.

Errores comunes

  • Usar marcas de HTML (<!-- -->) dentro de CSS: el motor de CSS no las reconoce como comentario
  • Olvidar el */ de cierre, con lo que el resto de la hoja de estilos se ignora
  • Intentar anidar comentarios (/* outer /* inner */ still broken */): los comentarios CSS no se anidan correctamente
  • Dejar montones de reglas comentadas en archivos de producción durante meses
  • Poner secretos o URL privadas en los comentarios

Resumen

  • Los comentarios CSS se escriben entre /* y */
  • El navegador ignora el texto del comentario al aplicar los estilos
  • Úsalos para notas breves, rótulos de sección o para desactivar algo de forma temporal al probar
  • Los comentarios HTML usan <!-- -->; no mezcles esa sintaxis con CSS
  • Los comentarios se ven en el código fuente: nunca guardes secretos ahí

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
6
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial