Cómo agregar y usar comentarios CSS

Cómo agregar y usar comentarios CSS

Cómo agregar y usar comentarios CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Cada sitio web está compuesto de elementos estructurales (que son dictados por HTML), funcionales y estilísticos. Las Hojas de Estilo en Cascada (CSS) se utilizan para dictar la apariencia (el «look and feel») de un sitio web. Estos estilos se mantienen separados de la estructura HTML para facilitar la actualización y la adhesión a los estándares web.

Índice de contenidos

El problema con las hojas de estilo

Con el tamaño y la complejidad de muchos sitios web hoy en día, las hojas de estilo pueden llegar a ser bastante largas y engorrosas. Esto es especialmente cierto ahora que las consultas de los medios de comunicación sobre estilos de sitios web con capacidad de respuesta son una parte esencial del diseño, lo que garantiza que un sitio web tenga el aspecto que debería tener, independientemente del dispositivo. Estas consultas de medios por sí solas pueden añadir un número significativo de nuevos estilos a un documento CSS, lo que dificulta aún más el trabajo. Aquí es donde los comentarios CSS pueden convertirse en una ayuda inestimable para los diseñadores y desarrolladores de sitios web.

Comentarios Añadir estructura y claridad

Agregar comentarios a los archivos CSS de un sitio web es una excelente manera de organizar secciones de ese código para un lector humano que esté revisando el documento. También garantiza la consistencia cuando un profesional de la web retoma el trabajo donde otro lo deja, o cuando equipos de personas trabajan en un sitio.

Los comentarios bien formateados pueden comunicar aspectos importantes de la hoja de estilo a los miembros de un equipo que no estén familiarizados con el código. Estos comentarios también son muy útiles para las personas que han trabajado en el sitio antes pero no recientemente; los diseñadores web suelen trabajar en muchos sitios, y es difícil recordar las estrategias de diseño de uno a otro.

Para los ojos de los profesionales solamente

Los comentarios CSS no se muestran cuando la página se muestra en los navegadores web. Estos comentarios son sólo informativos, al igual que los comentarios HTML (aunque la sintaxis es diferente). Estos comentarios CSS no afectan a la visualización de un sitio de ninguna manera.

Adición de comentarios CSS

Añadir un comentario CSS es bastante fácil. Usted simplemente reserva su comentario con las etiquetas correctas de apertura y cierre de comentarios:

  • Comience su comentario añadiendo
     /* 
  • Cierre su comentario añadiendo
     */ 

Todo lo que aparece entre estas dos etiquetas es el contenido del comentario, visible sólo en el código y no en el navegador.

Un comentario CSS puede ocupar cualquier número de líneas. Aquí hay dos ejemplos:

/* ejemplo de borde rojo */
div#border_red {
borde: rojo sólido fino;
}
/***************************.**************************** Secciones que se rompen

Muchos diseñadores organizan las hojas de estilo en trozos pequeños y fáciles de digerir que son fáciles de escanear cuando se leen. Normalmente, verá los comentarios precedidos y seguidos por una serie de guiones que crean grandes y obvios saltos en la página que son fáciles de ver. Aquí hay un ejemplo:

Estos comentarios indican el comienzo de una nueva sección de codificación.

Código "Comentando Fuera"

Debido a que las etiquetas de comentario le dicen al navegador que ignore todo lo que hay entre ellas, puedes usarlas para desactivar temporalmente ciertas partes del código CSS. Esto puede ser útil al depurar o al ajustar el formato de la página web. De hecho, los diseñadores a menudo los usan para "comentar" o "desactivar" áreas de código para ver qué pasa si esa sección no forma parte de la página.

Para hacer esto, simplemente agregue la etiqueta de comentario de apertura antes del código que le gustaría comentar (deshabilitar); coloque la etiqueta de cierre donde desea que termine la parte deshabilitada. Nada entre esas etiquetas afectará la visualización de un sitio, permitiéndole depurar el CSS para ver dónde está ocurriendo un problema. A continuación, puede entrar y corregir ese problema y eliminar los comentarios del código.

Consejos para comentar CSS

Como resumen, aquí hay algunos consejos para recordar para usar comentarios en tu CSS:

  1. Los comentarios pueden abarcar varias líneas.
  2. Los comentarios pueden incluir elementos CSS que no desea que un navegador muestre pero que no desea eliminar por completo. Recuerde eliminar los estilos no utilizados (en lugar de dejarlos fuera de comentario) si decide que no los necesita en el sitio web.
  3. Utilice comentarios siempre que escriba CSS complicados para añadir estructura, aclarar decisiones de diseño e informar a futuros desarrolladores (o recordarse a sí mismo) sobre consideraciones importantes. Esto ahorra tiempo en el futuro para todos los involucrados.
  4. Los comentarios también pueden incluir meta información como:
    1. Autor
    2. Fecha de creación
    3. Derechos de autor

Rendimiento

Aunque añadir demasiados comentarios puede afectar a la velocidad de descarga y al rendimiento de un sitio, no debe dudar en utilizarlos. Se necesitarían muchas líneas de comentarios para tener un impacto negativo significativo. Como tantos aspectos del diseño web, todo se reduce al equilibrio.

TAMBIÉN TE INTERESA

foto-del-sol-creada-por-AI

Webs de inteligencia artificial para crear imágenes

Inteligencia artificial para crear imágenes, esa es una de las tendencias que ha popularizado la IA y el boom de ChatGPT y compañía. Hoy vamos a hablar de una serie de herramientas, páginas webs o soluciones que permiten crear imágenes de la nada para poder utilizar de forma libre. Hay muchas, pero nosotros recogemos en

dia-del-padre

Con estos 8 productos de LG seguro que aciertas en el Día del Padre

En lugar de rompernos la cabeza buscando productos de distintas marcas para regalar en el Día del Padre, nosotros hemos acudido a una firma como LG para recomendar artículos que podrían satisfacer a todos los que tienen hijos. Es su día y, siendo honestos, la tecnología es, posiblemente, el regalo que más aprecien. De modo

nuevo-diseño-de-Uber

Uber rediseña su app y añade interesantes funciones

La popular app de delivery y transporte, Uber, ha sido rediseñada con el objetivo de ser mucho más intuitiva y fácil de usar para los miles y miles de usuarios que tiene en España. Dado que son los mayores cambios que se han producido hasta la fecha en la historia de la aplicación, conviene detenerse

foto-Samsung-S23

Ya tenemos entre manos el nuevo Samsung S23…

Mientras cae el precio del Samgung S22 en plataformas como Amazon, la compañía surcoreana presenta la serie S23, su nuevo coloso. Como lo fue en su momento, la generación anterior y su variable Ultra, el nuevo buque insignia llega para competir en lo más alto en cuanto a prestaciones… y también precio. Sobra decir que

educación en ciencia

¿Se lo preguntamos a María?

Por Inés Bermejo – Directora general de HP Iberia — Un año más, la celebración del Día de la Mujer Trabajadora hace que muchas personas se pregunten ¿por qué no hay más mujeres en Ciencia? Permítanme que en este miércoles 8 de marzo de 2023 formule la pregunta de otra manera: “¿Cómo es posible que