Agrupa diversos selectors CSS per millorar la velocitat de càrrega
L'eficiència és un factor important en un lloc web reeixit. Aquest lloc ha de ser eficient en la manera com utilitza imatges en línia . Això ajudarà a garantir que el lloc funcioni bé per als visitants i es carregui ràpidament als seus dispositius. L'eficiència també hauria de ser part del vostre procés global, ajudant-vos a mantenir el progrés d'un lloc a temps i amb pressupost.
Al final, l'eficiència juga un paper en tots els aspectes de la creació d'un lloc web i l'èxit a llarg termini, inclosos els estils que s'escriuen per als fulls de CSS d'aquest lloc. Ser capaç de crear fitxers CSS més nítids i més nets és ideal, i una de les maneres d'aconseguir-ho és agrupar diversos selectors CSS junts.
Agrupar selectors
Quan agrupeu els selectors CSS , apliqueu els mateixos estils a diversos elements diferents sense repetir els estils del vostre full d'estils. En lloc de tenir dues o tres o fins i tot més normes CSS, totes elles fan el mateix (per exemple, configuren el color d'alguna cosa en vermell), teniu una única regla CSS que compleixi la vostra pàgina.
Hi ha diversos motius pels quals aquesta "agrupació de selectors" beneficia una pàgina. En primer lloc, el full d'estil serà més petit i es carregarà més ràpidament. És cert que els fulls d'estil no són un dels principals culpables quan es tracta de retardar els llocs de càrrega. Els fitxers CSS són fitxers de text, de manera que les fulles CSS molt llargues són diminutes, de mida real, en comparació amb imatges no optimitzades. Tot i així, cada poc compta, i si podeu afaitar una mica de mida del vostre CSS i carregar les pàgines molt més ràpidament, sempre és bo fer-ho.
En general, les velocitats de càrrega superiors a la mitjana dels llocs són inferiors a 3 segons; De 3 a 7 segons és aproximadament la mitjana, i més de 7 segons és massa lent. Aquests baixos significen que, per aconseguir-los amb el vostre lloc, heu de fer tot el possible. Per això, podeu ajudar-vos a mantenir el lloc ràpidament mitjançant selectors agrupats de CSS.
Com agrupar selectors CSS
Per agrupar selectors CSS junts al vostre full d'estils, utilitzeu comes per separar diversos selectors agrupats en l'estil. A l'exemple següent, l'estil afecta els elements p i div:
div, p {color: # f00; }La coma bàsicament significa "i". De manera que aquest selector s'aplica a tots els elements de paràgraf i tots els elements de divisió. Si faltava la coma, al contrari seria tot l'element de paràgraf que és un nen d'una divisió. Aquest és un tipus de selector molt diferent, de manera que aquesta coma canvia el significat del selector.
Qualsevol forma de selector es pot agrupar amb qualsevol altre selector. En aquest exemple, un selector de classes s'agrupa amb un selector d'identificació:
p.red, #sub {color: # f00; }Així doncs, aquest estil s'aplica a qualsevol paràgraf amb l'atribut de classe de "vermell", I qualsevol element (ja que no vam especificar quin tipus) que té un atribut ID de "sub".
Podeu agrupar qualsevol nombre de selectors junts, inclosos els selectors que són paraules individuals i selectors de compond. Aquest exemple inclou quatre selectors diferents:
p, .red, #sub, div a: link {color: # f00; }Així doncs, aquesta norma CSS s'aplicarà al següent:
- Qualsevol element de paràgraf
- Qualsevol element amb la classe de "vermell"
- Qualsevol element amb una ID de "sub"
- El "enllaç" pseudo classe dels elements d'ancoratge que són decendents d'una divisió.
Aquest últim selector és un selector compost. Podeu veure que es combina fàcilment amb els altres selectors d'aquesta regla CSS. Amb aquesta regla, establirem el color de # f00 (que és de color vermell) en aquests 4 selectors, que és preferible escriure 4 selectors independents per aconseguir el mateix resultat.
Un altre avantatge dels selectors d'agrupació és que, si necessiteu fer un canvi, podeu editar una única regla CSS en comptes de múltiples. Això vol dir que aquest enfocament us estalvia pes i temps de la pàgina a l'hora de mantenir el lloc en el futur.
Es pot agrupar qualsevol selector
Com podeu veure des dels exemples anteriors, qualsevol selector vàlid es pot col · locar en un grup, i tots els elements del document que coincideixin amb tots els elements agrupats tindran el mateix estil en funció d'aquesta propietat d'estil.
Alguns prefereixen llistar els elements agrupats en línies separades per a la llegibilitat del codi. L'aparició a la pàgina web i la velocitat de càrrega segueixen sent els mateixos. Per exemple, podeu combinar estils separats per comes en una propietat d'estil en una línia de codi:
th, td, p.red, div # firstred {color: red; }
o podeu llistar els estils en línies individuals per obtenir més claredat:
th,
td,
p.red,
div # firstred
{
color: vermell;
}
Qualsevol dels mètodes que utilitzeu per agrupar diversos selectors de CSS acelera el vostre lloc i facilita la gestió dels estils a llarg termini.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/08/17.