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

all ia

all ia, el primer buscador de herramientas de inteligencia artificial

Ha llegado el punto en que uno ya se pierde con las herramientas de inteligencia artificial. A lo largo de este último año han surgido infinidad de soluciones que se distribuyen en todos los rincones de internet. Se podría decir que hay una para cada inquietud, sea a nivel personal en el terreno profesional. Pero

login-y-contraseña

El método definitivo para tener una contraseña segura: 9 pasos

Tener una contraseña segura es el primer paso para tener cierta seguridad en nuestra vida digital. Correo electrónico, claves del banco, Amazon, por poner unos ejemplos… son plataformas que estamos acostumbrados a usar casi a diario. Para todos ellos y el resto de plataformas a las que estemos suscritos, la contraseña segura es fundamental para

meta-quest-3

Meta Quest 3: características del nuevo adalid de la realidad virtual

La realidad virtual (VR) ha experimentado un crecimiento exponencial en los últimos años, y Meta Quest 3 se presenta como el pináculo de esta evolución. Como la tercera generación de dispositivos de realidad virtual autónomos desarrollados por Meta, anteriormente conocida como Facebook, el Meta Quest 3 representa una amalgama de tecnología de vanguardia y diseño

Wacom-Movink

Wacom Movink, el panel interactivo OLED más fino y ligero del mercado

Parecía estar ya todo escrito sobre monitores y panales y en éstas, llega el Wacom Movink para sorprendernos a todos. Dirigido especialmente para diseñadores y creadores de contenido, esta pantalla representa un avance significativo por su combinación única de rendimiento, portabilidad y calidad visual excepcional. El dispositivo llega acompañado de un nuevo lápiz digital, su