En CSS, puede agregar comentarios para aclarar u organizar diferentes secciones de la hoja de estilo. Esto puede parecer un paso insignificante en el proceso de codificación, pero los comentarios pueden ser extremadamente útiles al depurar o rediseñar su sitio.
¿Por qué? Porque le dicen al lector para qué sirve cada línea de código. Estas notas son especialmente útiles si su sitio tiene muchos desarrolladores o se heredó de un propietario diferente.
Si ha navegado por la hoja de estilo antes o ha leído suficientes publicaciones de blog con fragmentos de código, es posible que ya haya visto los comentarios. Son reconocibles por / * * / los signos que los rodean.
En esta publicación, cubriremos los comentarios en CSS. A continuación, cubriremos lo que significa «comentar» en CSS y cómo hacerlo. Finalmente, discutiremos otro método de comentarios CSS que debe evitarse. Empecemos.
Cómo comentar en CSS
Para comentar en CSS, simplemente coloque su texto sin formato en / * * / caracteres. Esto le dice al navegador que se trata de notas y no deben representarse en la interfaz de usuario.
Puede agregar comentarios a una hoja de estilo de dos maneras. El formato más común es el comentario de una sola línea, que se muestra a continuación:
/* This is a comment in CSS */
p {
color: white;
background-color: #2594A4;
}
Un comentario de una sola línea puede tener su propia línea o puede colocarse en una línea de código activa como se muestra a continuación:
p {
color: white; /* set the text color to white */
}
También puede darles formato como comentarios de varias líneas:
/* These words…
…are inside…
…the same comment. */
Los comentarios en CSS son ignorados por el navegador y no tienen ningún efecto sobre cómo se representan los estilos en la interfaz de usuario. El siguiente ejemplo muestra cómo se pueden usar los comentarios para decirle al desarrollador que lee el código qué hace cada línea.
ver la pluma Comentarios CSS: ejemplo por HubSpot (@hubspot) en CódigoPen.
Los comentarios funcionan dentro de CSS interno y externo, así como dentro de CSS como Bootstrap CSS.
Además de explicar una sección de código, los comentarios se usan a menudo para «comentar» un fragmento de CSS.
Comentar en CSS
En CSS, comentar es la práctica de colocar marcas de comentario (/ * * /) alrededor de un segmento de código para desactivarlo. Comentar permite a los desarrolladores deshabilitar ciertos estilos al guardar el código para su uso posterior. También se puede usar para guardar bloques completos de CSS que puede usar más tarde sin eliminarlo.
Comentar es un truco conveniente para usar al probar y depurar su código CSS. Le permite probar diferentes combinaciones de estilo porque colocar la declaración dentro del comentario lo hace invisible para el navegador.
Antes de continuar, expliquemos qué es un conjunto de reglas. El conjunto de reglas es un selector de CSS y todas las declaraciones entre paréntesis. A continuación se muestra un conjunto de reglas para todos los elementos de párrafo en un sitio web (que usamos en los ejemplos anteriores).
p {
color: white;
background-color: #FF5C35;
padding: 10px;
}
Ahora veamos un ejemplo de comentar una declaración individual dentro de este conjunto de reglas.
ver la pluma Comentarios CSS: Comentando 1 por HubSpot (@hubspot) en CódigoPen.
Declaración el color blanco ya no es aplicable como se ha comentado.
Ahora veamos otro ejemplo en el que se comenta todo el conjunto de reglas:
ver la pluma Comentarios CSS: Comentando 2 por HubSpot (@hubspot) en CódigoPen.
Como puede ver, no se aplica ningún estilo al elemento de párrafo.
Comentario CSS de una sola línea
Técnicamente, hay otra forma de comentar líneas individuales en CSS en algunos navegadores, colocando una barra inclinada doble (//) delante del código que desea comentar en lugar de usar el estándar /*…*/ método.
/* This line is commented out. */
// This line is commented out, but you shouldn't use this method!
Sin embargo, se recomienda enfáticamente que evite este método en su código. El método de comentario de doble barra no está estandarizado en CSS (mientras que el /*…*/ es el método), lo que significa que no se garantiza que funcione con todos los navegadores.
Sí, puede funcionar con algunos navegadores modernos. Pero estos navegadores pueden deshabilitar esta función en cualquier momento, lo que significa que sus comentarios ya no serán comentarios, su CSS se romperá y sus visitantes se confundirán.
Para estar seguro, aguanta /*…*/ El método de comentarios que discutimos, ya que es estándar, funciona en todos los navegadores y sistemas operativos, y no se suspenderá en el corto plazo.
Comentarios CSS y HTML
También puede haber notado que los comentarios CSS funcionan de manera similar a los comentarios HTML. La diferencia entre ellos es que los comentarios CSS están marcados con símbolos. /*…*/mientras que los comentarios HTML se incluyen en el Etiquetas.
El siguiente ejemplo muestra la diferencia:
ver la pluma Comentarios CSS y HTML por HubSpot (@hubspot) en CódigoPen.
Comentando en CSS
Si desea agregar notas explicativas o evitar que el navegador represente ciertas partes de la hoja de estilo, puede usar los comentarios. Los comentarios no afectarán la interpretación de otras partes de la hoja de estilo o el diseño del sitio en la interfaz de usuario. También son fáciles de crear incluso si eres nuevo en el aprendizaje de HTML y CSS.
Nota del editor: esta publicación se publicó originalmente en julio de 2020 y se actualizó para que sea completa.
