Agrupa varios selectores CSS para mellorar a velocidade de carga
A eficiencia é un factor importante nun sitio web exitoso. Ese sitio web debería ser eficiente na forma en que usa imaxes en liña . Isto axudará a garantir que o sitio funcione ben para os visitantes e que se cargue rapidamente nos seus dispositivos. A eficiencia tamén debe ser unha parte do seu proceso global, axudando a manter o progreso dun sitio a tempo e en orzamento.
Ao final, a eficiencia desempeña un papel en todos os aspectos da creación dun sitio web e o éxito a longo prazo, incluídos os estilos que están escritos para as follas CSS do sitio. Ser capaz de crear ficheiros CSS máis lixeiros e máis limpos é ideal, e unha das formas en que pode conseguir isto é agrupar varios selectores CSS xuntos.
Agrupación de selectores
Cando agrupa selectores CSS , aplica os mesmos estilos a varios elementos sen repetir os estilos na súa folla de estilo. En lugar de ter dúas ou tres ou máis regras CSS, todas as que fan o mesmo (por exemplo, axustar a cor de algo a vermello), ten unha única regra CSS que cumpre coa súa páxina.
Hai unha serie de razóns polas que esta "agrupación de selectores" beneficia unha páxina. En primeiro lugar, a folla de estilo será máis pequena e cargarase máis rápido. Hai que recoñecer que as follas de estilo non son un dos principais culpables cando se trata de cargar sitios lentos. Os ficheiros CSS son ficheiros de texto, polo que as follas CSS moi longas son pequenas, sabias en tamaño de arquivo, en comparación con imaxes non optimizadas. Aínda así, cada pouco conta, e se pode afeitar un tamaño do seu CSS e cargar as páxinas moito máis rápido, isto sempre é bo.
En xeral, as velocidades de carga superiores á media dos sitios son menos de 3 segundos; 3 a 7 segundos é aproximadamente a media, e máis de 7 segundos é demasiado lento. Estes números baixos significan que, para logralos co seu sitio, necesitas facer todo o que poidas. É por iso que pode axudar a manter o seu sitio rápido usando selectores CSS agrupados.
Como agrupar selectores CSS
Para agrupar selectores CSS xuntos na súa folla de estilo, usa comas para separar varios selectores agrupados no estilo. No exemplo de embaixo, o estilo afecta aos elementos p e div:
div, p {cor: # f00; }A coma baséase basicamente en "e". Polo tanto, este selector aplícase a todos os elementos de parágrafo e a todos os elementos de división. Se a coma faltara, sería, en vez, todos os elementos de parágrafo que sexan fillos dunha división. Este é un tipo de selector moi diferente, polo que esta coma realmente cambia o significado do selector.
Calquera forma de selector pódese agrupar con calquera outro selector. Neste exemplo, un selector de clase agrúpase cun selector de ID:
p.red, #sub {cor: # f00; }Polo tanto, este estilo aplícase a calquera parágrafo co atributo de clase "vermello", E calquera elemento (xa que non especificamos que tipo) que ten un atributo de ID de "sub".
Pode agrupar calquera número de selectores xuntos, incluíndo selectores que son palabras individuais e selectores de compund. Este exemplo inclúe catro selectores diferentes:
p, .red, #sub, div a: link {color: # f00; }Polo tanto, esta regra CSS aplicaríase ao seguinte:
- Calquera elemento de parágrafo
- Calquera elemento coa clase de "vermello"
- Calquera elemento cunha ID de "sub"
- A pseudo clase "enlace" dos elementos de áncoras que son decendentes dunha división.
Ese último selector é un selector composto. Podes ver que se combina facilmente cos outros selectores desta regra CSS. Con esa regra, estamos configurando a cor de # f00 (que é vermello) nestes 4 selectores, o que é preferible escribir 4 selectores separados para lograr o mesmo resultado.
Outro beneficio dos selectores de agrupamento é que, se precisa facer un cambio, pode editar unha única regra CSS en lugar de varias. Isto significa que este enfoque aforra o peso da páxina e o tempo no que se trata de manter o sitio no futuro.
Calquera selector pódese agrupar
Como podes ver nos exemplos anteriores, calquera selector válido pode ser colocado nun grupo e todos os elementos do documento que coincidan con todos os elementos agrupados terán o mesmo estilo en función da propiedade do estilo.
Algunhas persoas prefiren enumerar os elementos agrupados en liñas distintas para que se poida ler no código. O aspecto no sitio web e a velocidade de carga segue sendo o mesmo. Por exemplo, pode combinar estilos separados por comas nunha propiedade de estilo nunha liña de código:
th, td, p.red, div # firstred {cor: vermello; }
ou pode listar os estilos en liñas individuais para obter máis claridade:
th,
td,
p.red,
div # firstred
{
cor: vermello;
}
Calquera método que utilice para agrupar varios selectores CSS acelera o seu sitio e facilita a xestión de estilos a longo prazo.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 17 de febreiro de 17.