Docs ejecutables de CSS: Comentarios CSS

Q: ¿Cómo se comenta en CSS?

Envuelve el texto entre / y /: / This is a comment /. La misma sintaxis sirve para una línea o para varias, en cualquier lugar de una hoja de estilo donde se permitan espacios en blanco.

Q: ¿Se puede usar // para comentar en CSS?

No. CSS no tiene comentario de una sola línea. // se lee como parte del siguiente selector o declaración, que queda inválido, así que el navegador descarta esa regla o declaración completa. Sass, Less y otros preprocesadores aceptan //, pero el CSS puro no.

Q: ¿Se pueden anidar los comentarios en CSS?

No. Un comentario termina en el primer /, así que / a / b / c / termina después de b, y el c / que sobra se vuelve basura que rompe la regla siguiente.

Q: ¿Cuál es el atajo para comentar en CSS?

En la mayoría de los editores de código, incluido VS Code, Ctrl + / en Windows y Linux o Cmd + / en macOS envuelve las líneas seleccionadas en / /, y al presionarlo otra vez se quita el comentario.

Comentarios en CSS: sintaxis y cómo comentar en CSS

CSS tiene una sola sintaxis de comentario, /* ... */, para una o varias líneas. Aprende dónde pueden ir los comentarios, cómo comentar una regla y por qué // y los comentarios anidados rompen en silencio la regla siguiente.

Esta página incluye editores ejecutables: edita, ejecuta y ve el resultado al instante.

Por Kevin Spektor, Co-founder & CTO

Publicado el Sep 24, 2026

Cómo escribir un comentario en CSS

Un comentario en CSS empieza con /* y termina con */. El navegador ignora todo lo que hay entre ellos, ocupe una línea o veinte.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

Solo existe esta sintaxis. CSS no tiene un comentario de una sola línea aparte.

Dónde pueden ir los comentarios

Un comentario puede ir en cualquier lugar donde se permitan espacios en blanco: entre reglas, entre declaraciones, después de un valor, dentro de una lista de selectores. Funciona igual en un archivo .css, en un elemento <style> y en un atributo style.

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

Los comentarios HTML, , son para el marcado, no para CSS. Las dos sintaxis se comparan en la página de comentarios en HTML.

Comentar código

El uso diario de los comentarios es desactivar una declaración para ver qué hace, sin borrarla. Envuélvela en /* */:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

Borra el /* y el */ alrededor de la línea del borde y aparece el borde ámbar. Comentar una regla completa funciona igual: pon /* antes del selector y */ después de la llave de cierre.

La mayoría de los editores lo hacen por ti: selecciona las líneas y presiona Ctrl + / (Cmd + / en macOS).

Por qué // rompe tu CSS

// parece un comentario porque lo es en JavaScript, Sass y Less. En CSS son solo dos caracteres, y pasan a formar parte de lo que venga después. El navegador ve entonces un selector inválido y descarta toda la regla siguiente, sin ningún mensaje de error.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

El navegador leyó // this is NOT a comment .one como un solo selector, que es inválido, así que descartó toda la regla .one. Cambia la línea a /* this is a comment */ y vuelve el fondo verde.

Los comentarios no se anidan

Un comentario termina en el primer */. Si envuelves código que ya contiene un comentario, tu comentario exterior termina antes de tiempo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

Para comentar un bloque que contiene comentarios, quita o acorta primero los interiores.

Organizar una hoja de estilo con comentarios

Las hojas de estilo largas se leen mejor con títulos de sección. Una convención habitual:

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

Los comentarios se envían a cada visitante como parte del archivo y aparecen en el código fuente, así que nunca pongas contraseñas, URLs internas ni notas que no publicarías.

Errores comunes

Usar //. Borra en silencio la regla siguiente. Usa /* */.
Anidar comentarios. El primer */ cierra el comentario; lo demás rompe la regla siguiente.
Olvidar el */ de cierre. Todo lo que sigue al /*, hasta el final de la hoja de estilo, se vuelve comentario.
Usar  dentro de CSS. Es la sintaxis de comentarios de HTML y no comenta CSS.
Dejar secretos en los comentarios. Viajan al navegador junto con la hoja de estilo.

Preguntas frecuentes

¿Cómo se comenta en CSS?

Envuelve el texto entre /* y */: /* This is a comment */. La misma sintaxis sirve para una línea o para varias, en cualquier lugar de una hoja de estilo donde se permitan espacios en blanco.

¿Se puede usar // para comentar en CSS?

No. CSS no tiene comentario de una sola línea. // se lee como parte del siguiente selector o declaración, que queda inválido, así que el navegador descarta esa regla o declaración completa. Sass, Less y otros preprocesadores aceptan //, pero el CSS puro no.

¿Se pueden anidar los comentarios en CSS?

No. Un comentario termina en el primer */, así que /* a /* b */ c */ termina después de b, y el c */ que sobra se vuelve basura que rompe la regla siguiente.

¿Cuál es el atajo para comentar en CSS?

En la mayoría de los editores de código, incluido VS Code, Ctrl + / en Windows y Linux o Cmd + / en macOS envuelve las líneas seleccionadas en /* */, y al presionarlo otra vez se quita el comentario.

¿Los comentarios en CSS afectan el rendimiento?

Solo porque agregan bytes al archivo. El navegador los descarta al analizarlo. Las herramientas de build minifican las hojas de estilo y quitan los comentarios; muchas conservan los que empiezan con /*!, que es la convención para los avisos de licencia.

Conceptos relacionados