Cuando agrupa selectores CSS, aplica los mismos estilos a varios elementos diferentes sin repetir los estilos en su hoja de estilo. En lugar de tener dos, tres o más reglas CSS que hacen lo mismo (establecer el color de algo en rojo, por ejemplo), usa una sola regla CSS que logra lo mismo. El secreto de esta táctica para aumentar la eficiencia es la coma.
Cómo agrupar selectores CSS
Para agrupar selectores CSS en una hoja de estilo, use comas para separar varios selectores agrupados en el estilo. En este ejemplo, el estilo afecta a los elementos p y div:
div, p {color: # f00; }
En este contexto, una coma significa "y", por lo que este selector se aplica a todos los elementos de párrafo y todos los elementos de división. Si faltara la coma, el selector se aplicaría a todos los elementos de párrafo que son hijos de una división. Ese es un tipo diferente de selector, por lo que la coma es importante.
Puede agrupar cualquier forma de selector con cualquier otro selector. Este ejemplo agrupa un selector de clase con un selector de ID:
p.red, #sub {color: # f00; }
Este estilo se aplica a cualquier párrafo con el atributo de clase de rojo y cualquier elemento (porque el tipo no está especificado) con un atributo ID de sub.
Puede agrupar cualquier número de selectores, incluidos los selectores de palabras simples y los selectores compuestos. Este ejemplo incluye cuatro selectores diferentes:
p, .red, #sub, div a: link {color: # f00; }
Esta regla CSS se aplicaría a:
- Cualquier elemento de párrafo
- Cualquier elemento con la clase de rojo
- Cualquier elemento con un ID de sub
- La Enlace pseudoclase de los elementos de anclaje que son descendientes de una división.
Ese último selector es un selector compuesto. Como se muestra, se combina fácilmente con los otros selectores de esta regla CSS. La regla establece el color de # f00 (rojo) en estos cuatro selectores, que es preferible a escribir cuatro selectores separados para lograr el mismo resultado.
Cualquier selector puede agruparse
Puede colocar cualquier selector válido en un grupo, y todos los elementos del documento que coincidan con todos los elementos agrupados tendrán el mismo estilo según esa propiedad de estilo.
Algunos diseñadores prefieren enumerar los elementos agrupados en líneas separadas para legibilidad en el código. La apariencia en el sitio web y la velocidad de carga siguen siendo las mismas. Por ejemplo, puede combinar estilos separados por comas en una propiedad de estilo en una línea de código:
th, td, p.red, div # firstred {color: rojo; }
o puede enumerar los estilos en líneas individuales para mayor claridad:
th,
td,
p.red,
div # firstred
{
color rojo;
}
¿Por qué agrupar los selectores de CSS?
Agrupar los selectores de CSS ayuda a minimizar el tamaño de la hoja de estilo para que se cargue más rápido. Es cierto que las hojas de estilo no son los principales culpables de la carga lenta; Los archivos CSS son archivos de texto, por lo que incluso las hojas CSS muy largas son pequeñas en comparación con las imágenes no optimizadas. Aún así, cada poco de optimización ayuda, y si puede reducir un poco el tamaño de su CSS y cargar las páginas mucho más rápido, eso es algo bueno.
La agrupación de selectores también facilita mucho el mantenimiento del sitio. Si necesita hacer un cambio, simplemente puede editar una sola regla CSS en lugar de varias. Este enfoque ahorra tiempo y molestias.
El resultado final: la agrupación de selectores CSS aumenta la eficiencia, la productividad, la organización y, en algunos casos, incluso la velocidad de carga.