Kiedy grupujesz selektory CSS, stosujesz te same style do kilku różnych elementów bez powtarzania stylów w arkuszu stylów. Zamiast mieć dwie, trzy lub więcej reguł CSS, które robią to samo (na przykład ustawiają kolor czegoś na czerwony), używasz jednej reguły CSS, która wykonuje to samo. Sekretem tej taktyki zwiększającej wydajność jest przecinek.
Jak pogrupować selektory CSS
Aby zgrupować selektory CSS w arkuszu stylów, użyj przecinków, aby oddzielić wiele zgrupowanych selektorów w stylu. W tym przykładzie styl wpływa na elementy p i div:
div, p { kolor: #f00; }
W tym kontekście przecinek oznacza „i”, więc ten selektor stosuje się do wszystkich elementów akapitu i wszystkich elementów podziału. Gdyby brakowało przecinka, selektor miałby zastosowanie do wszystkich elementów akapitu, które są potomkami dzielenia. To inny rodzaj selektora, więc przecinek jest ważny.
Możesz zgrupować dowolną formę selektora z dowolnym innym selektorem. Ten przykład grupuje selektor klasy z selektorem identyfikatora:
p.czerwony, #sub { kolor: #f00; }
Ten styl dotyczy dowolnego akapitu z atrybutem class class czerwony oraz dowolny element (ponieważ rodzaj nie jest określony) z atrybutem ID równym pod.
Możesz pogrupować dowolną liczbę selektorów, w tym selektory będące pojedynczymi słowami i selektory złożone. Ten przykład zawiera cztery różne selektory:
p, .red, #sub, div a: link { color: #f00; }
Ta reguła CSS miałaby zastosowanie do:
- Dowolny element akapitu
- Dowolny element z klasą czerwony
- Dowolny element o identyfikatorze pod
- połączyć pseudoklasa elementów kotwicy, które są potomkami dywizji.
Ten ostatni selektor jest selektorem złożonym. Jak pokazano, można go łatwo połączyć z innymi selektorami w tej regule CSS. Reguła określa kolor #f00 (czerwony) na tych czterech selektorach, co jest lepsze niż pisanie czterech oddzielnych selektorów, aby osiągnąć ten sam wynik.
Dowolny selektor można pogrupować
Możesz umieścić dowolny prawidłowy selektor w grupie, a wszystkie elementy w dokumencie, które pasują do wszystkich zgrupowanych elementów, będą miały ten sam styl na podstawie tej właściwości stylu.
Niektórzy projektanci wolą wymienić zgrupowane elementy w osobnych wierszach dla czytelności w kodzie. Wygląd na stronie i szybkość ładowania pozostają takie same. Na przykład możesz połączyć style oddzielone przecinkami w jedną właściwość stylu w jednym wierszu kodu:
th, td, p.red, div#firstred { kolor: czerwony; }
lub możesz wymienić style w poszczególnych liniach dla jasności:
th,
td,
p.czerwony,
div#firstred
{
kolor czerwony;
}
Dlaczego grupowe selektory CSS?
Grupowanie selektorów CSS pomaga zminimalizować rozmiar arkusza stylów, dzięki czemu ładuje się on szybciej Trzeba przyznać, że arkusze stylów nie są głównymi winowajcami powolnego ładowania; Pliki CSS to pliki tekstowe, więc nawet bardzo długie arkusze CSS są małe w porównaniu z niezoptymalizowanymi obrazami. Mimo to każda optymalizacja pomaga, a jeśli możesz zmniejszyć rozmiar swojego CSS i ładować strony o wiele szybciej, to dobrze.
Grupowanie selektorów znacznie ułatwia również konserwację witryny. Jeśli chcesz dokonać zmiany, możesz po prostu edytować jedną regułę CSS zamiast wielu. Takie podejście oszczędza czas i kłopoty.
Podsumowując: grupowanie selektorów CSS zwiększa wydajność, produktywność, organizację, a w niektórych przypadkach nawet szybkość ładowania.