Agrupando múltiples selectores CSS

Agrupar selectores CSS simplifica tus hojas de estilo La eficiencia es un factor importante en un sitio web exitoso. Un sitio debe ser eficiente en la forma en que utiliza imágenes en línea para ayudar a garantizar que el sitio funcione bien para los visitantes y se cargue rápidamente en sus dispositivos.

Agrupar selectores CSS simplifica tus hojas de estilo

La eficiencia es un factor importante en un sitio web exitoso. Un sitio debe ser eficiente en la forma en que utiliza imágenes en línea para ayudar a garantizar que el sitio funcione bien para los visitantes y se cargue rápidamente en sus dispositivos. La eficiencia también debe ser parte del proceso general, ayudándole a mantener el progreso de un sitio en tiempo y presupuesto.

La eficiencia juega un papel en todos los aspectos de la creación de un sitio web y el éxito a largo plazo, incluso en los estilos escritos para las hojas CSS del sitio. Poder crear archivos CSS más ágiles y limpios es deseable, y una de las formas en que puedes lograr esto es agrupando múltiples selectores CSS.

Agrupando Selectores CSS

Cuando agrupa selectores CSS, aplica los mismos estilos a varios elementos diferentes sin repetir los estilos en su hoja de estilos. En lugar de tener dos, tres o más reglas CSS, que hacen lo mismo (establecer el color de algo en rojo, por ejemplo), tiene una sola regla CSS que logra lo mismo para su página.

Hay varias razones por las cuales la agrupación de selectores beneficia a una página. En primer lugar, su hoja de estilo es más pequeña y se carga más rápidamente. Es cierto que las hojas de estilo no son uno de los principales culpables cuando se trata de sitios de carga lenta. Los archivos CSS son archivos de texto, por lo que incluso las hojas CSS realmente largas son pequeñas, del tamaño de un archivo en comparación con las imágenes no optimizadas. Aún así, cada poquito cuenta, y si puede reducir un poco el tamaño de su CSS y cargar las páginas mucho más rápido, eso siempre es algo bueno.

En general, las velocidades de carga superiores a la media para los sitios son inferiores a 3 segundos; De 3 a 7 segundos es aproximadamente el promedio, y más de 7 segundos es demasiado lento. Para evitar un largo tiempo de carga en su sitio, debe hacer todo lo que pueda. Agrupar selectores CSS puede ayudar.

Cómo agrupar selectores CSS

Para agrupar selectores CSS en una hoja de estilo, utiliza comas para separar múltiples selectores agrupados en el estilo. En este ejemplo, el estilo afecta a los elementos p y div:

 div, p {color: # f00; } 

La 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.

Cualquier forma de selector se puede agrupar con cualquier otro selector. En este ejemplo, un selector de clase se agrupa con un selector de ID:

 p.red, #sub {color: # f00; } 

Este estilo se aplica a cualquier párrafo con el atributo de clase «rojo» y a cualquier elemento (ya que el tipo no está especificado) que tenga un atributo ID de «sub».

Puede agrupar cualquier número de selectores, incluidos los selectores que son 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 lo siguiente:

  • Cualquier elemento de párrafo
  • Cualquier elemento con la clase de «rojo»
  • Cualquier elemento con un ID de «sub»
  • La pseudo clase «enlace» de los elementos de anclaje que son descendientes de una división.

Ese último selector es un selector compuesto. Puede ver que se combina fácilmente con los otros selectores en esta regla CSS. La regla establece el color de # f00 (que es rojo) en estos cuatro selectores, lo cual es preferible a escribir cuatro selectores separados para lograr el mismo resultado.

Otro beneficio de los selectores de agrupación es que si necesita hacer un cambio, puede editar una sola regla CSS en lugar de varias. Este enfoque ahorra peso de página y tiempo cuando se trata de mantener el sitio en el futuro.

Cualquier selector puede ser agrupado

Cualquier selector válido se puede colocar en un grupo, y todos los elementos del documento que coincidan con todos los elementos agrupados tendrán el mismo estilo en función de esa propiedad de estilo.

Algunas personas prefieren enumerar los elementos agrupados en líneas separadas para la 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;
}

Cualquiera de los métodos que use para agrupar múltiples selectores CSS acelera su sitio y facilita la administración de estilos a largo plazo.

Rate article
labsfabs.com
Add a comment