Cómo agregar y usar comentarios CSS

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
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.

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.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio