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

enfermedades-oculares

begIA, una app que permite identificar enfermedades oculares que causan ceguera

En este post vamos a hablar de begIA, un app que ha sido desarrollada por estudiantes universitarios que permite identificar con un selfie enfermedades del ojo que podrían causar ceguera. Un proyecto más de salud digital en el que la inteligencia artificial resuelve en segundos un diagnóstico importante para las personas. La app begIA desarrollada por

Bitdefender-lanza-App-Anomaly-Detection-para-móviles-Android

Bitdefender lanza App Anomaly Detection para móviles Android

Bitdefender ha lanzado App Anomaly Detection para los usuarios que tengan una licencia de Bitdefender Mobile Security para Android. Se trata de una nueva función que no tiene coste adicional y solo hay que actualizar esta aplicación para que aparezca de forma automática esta herramienta. Es una app de Android, con lo cual basta con

El navegador Vivaldi: una alternativa para sibaritas

El navegador Vivaldi es una de las opciones menos conocidas para los internautas, pero no por ello poco atractiva. Este browser puede conquistar a mucha gente por estética y su capacidad de personalización. Está disponible para Linux, macOS y Windows. Déjate caer por sus tentáculos y aprovecha todas las funciones que te resumimos a continuación.