¿Para qué sirve la coma en los selectores CSS?

Por qué una coma simple simplifica la codificación CSS, u hojas de estilo en cascada, son la forma aceptada por la industria del diseño web de agregar estilos visuales a un sitio.

Por qué una coma simple simplifica la codificación

CSS, u hojas de estilo en cascada, son la forma aceptada por la industria del diseño web de agregar estilos visuales a un sitio. Con CSS, puede controlar el diseño de la página, los colores, la tipografía, la imagen de fondo y mucho más. Básicamente, si se trata de un estilo visual, entonces CSS es la forma de llevar esos estilos a su sitio web.

A medida que agrega estilos CSS a un documento, puede notar que el documento comienza a alargarse cada vez más. Incluso un sitio pequeño con solo un puñado de páginas puede terminar con un archivo CSS considerable, y un sitio muy grande con muchas páginas de contenido único puede tener archivos CSS muy grandes. Esto se ve agravado por los sitios receptivos que tienen muchas consultas de medios incluidas en las hojas de estilo para cambiar el aspecto visual y la página presenta diferentes pantallas.

Sí, los archivos CSS pueden ser largos. Este no es un problema importante cuando se trata del rendimiento del sitio y la velocidad de descarga, ya que incluso un archivo CSS largo puede ser bastante pequeño (ya que en realidad es solo un documento de texto). Aún así, cada poquito cuenta cuando se trata de la velocidad de la página, por lo que si puede hacer que su hoja de estilo sea más ágil, es una buena idea. ¡Aquí es donde la «coma» puede ser muy útil en su hoja de estilo!

Comas y CSS

Tal vez se haya preguntado qué papel juega la coma en la sintaxis del selector CSS. Como en las oraciones, la coma aporta claridad, no código, a los separadores. La coma en un selector CSS separa múltiples selectores dentro de los mismos estilos.

Por ejemplo, veamos algunos CSS a continuación.

  th {color: rojo; } 
td {color: rojo; }
p.red {color: rojo; }
div # firstred {color: rojo; }

Con esta sintaxis, estás diciendo que quieres que las etiquetas th , td , las etiquetas de párrafo con la clase roja y la etiqueta div con la ID primero tengan el estilo color rojo.

Este es un CSS perfectamente aceptable, pero hay dos inconvenientes importantes para escribirlo de esta manera:

  • En el futuro, si decide cambiar el color de fuente de estas propiedades a azul, debe hacer ese cambio cuatro veces en su hoja de estilo.
  • Agrega muchos caracteres adicionales a su hoja de estilo que no necesita. Es posible que estos 4 estilos no parezcan excesivos, pero si continúa haciendo esto en toda su hoja de estilos, las líneas se sumarán y esa hoja será mucho, mucho más grande de lo necesario.

Para evitar estos inconvenientes y optimizar su archivo CSS, intentaremos usar comas.

Usar comas para separar selectores

En lugar de escribir 4 selectores CSS separados y 4 reglas, puede combinar todos estos estilos en una propiedad de regla separando los selectores individuales con una coma. Así es como se haría eso:

  th, td, p.red, div # firstred {color: rojo; }  

El carácter de coma básicamente actúa como la palabra «y» dentro del selector. Por lo tanto, esto se aplica a las etiquetas t h Y td Y etiquetas de párrafo con la clase roja Y la etiqueta div con la ID en primer lugar. Eso es exactamente lo que teníamos antes, pero en lugar de necesitar 4 reglas CSS, tenemos una sola regla con múltiples selectores. Esto es lo que hace la coma en el selector, nos permite tener múltiples selectores en una regla.

Este enfoque no solo crea archivos CSS más ágiles y limpios, sino que también hace que las futuras actualizaciones sean mucho más fáciles. Ahora, si desea cambiar el color de rojo a azul, ¡solo tiene que hacer el cambio en una ubicación en lugar de en las 4 reglas de estilo originales que teníamos! ¡Piense en estos ahorros de tiempo en un archivo CSS completo y puede ver cómo esto le ahorrará tiempo y espacio a largo plazo!

Variación de sintaxis

Algunas personas optan por hacer que el CSS sea más legible separando cada selector en su propia línea, en lugar de escribirlo todo en una línea como se indicó anteriormente. Así es como se haría:

  th, 
td,
p.red,
div # firstred
{
color: rojo;
}

Observe que coloca una coma después de cada selector y luego usa «enter» para dividir el siguiente selector en su propia línea. NO agrega una coma después del selector final.

Al usar comas entre sus selectores, crea una hoja de estilo más compacta que es más fácil de actualizar en el futuro y que es más fácil de leer hoy.

Artículo original de Jennifer Krynin.

Rate article
labsfabs.com
Add a comment