CSS o 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, tipografía, imagen de fondo y mucho más. Básicamente, si se trata de un estilo visual, 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 sitios receptivos que tienen un montón de preguntas de los medios incluido en las hojas de estilo para cambiar el aspecto de las imágenes y la disposición de la página para diferentes pantallas.
Sí, los archivos CSS pueden ser muy largos. Este no es un problema importante cuando se trata de rendimiento del sitio y velocidad de descarga
, porque es probable que incluso un archivo CSS extenso sea bastante pequeño (ya que en realidad es solo un documento de texto). Aún así, cada detalle 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 sencilla, es una buena idea. ¡Aquí es donde la "coma" puede resultar muy útil en su hoja de estilo!Comas y CSS
Es posible que se haya preguntado qué papel juega la coma en la sintaxis del selector de CSS. Al igual que en las oraciones, la coma aporta claridad, no código, a los separadores. La coma en un Selector de CSS coordinados selectores múltiples 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 th etiquetas, td etiquetas, etiquetas de párrafo con la clase roja y la etiqueta div con la ID firstred, todas para tener el color de estilo rojo.
Este es un CSS perfectamente aceptable, pero hay dos inconvenientes importantes al escribirlo de esta manera:
- En el futuro, si decide cambiar el color de fuente de estas propiedades a azul, debe realizar ese cambio cuatro veces en su hoja de estilo.
- Agrega muchos caracteres adicionales a su hoja de estilo que no necesita. Estos 4 estilos pueden no parecer una exageración, pero si continúa haciendo esto en toda su hoja de estilo, 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.
Uso de 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 actúa básicamente como la palabra "o" dentro del selector. Entonces esto se aplica a th etiquetas O td etiquetas O etiquetas de párrafo con la clase roja O la etiqueta div con la ID firstred. 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 hace que los archivos CSS sean más ágiles y limpios, sino que también facilita las actualizaciones futuras. Ahora, si desea cambiar el color de rojo a azul, solo tiene que realizar 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 todo un archivo CSS y 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 sola línea como se indicó anteriormente. Así es como se haría eso:
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 un más hoja de estilo compacta que es más fácil de actualizar en el futuro y que es más fácil de leer hoy.