Kun ryhmittelet CSS-valitsimet, käytät samoja tyylejä useisiin eri elementteihin toistamatta tyylejä tyylitaulukossasi. Sen sijaan, että sinulla olisi kaksi, kolme tai useampia CSS-sääntöjä, jotka tekevät saman asian (aseta jonkin väri esimerkiksi punaiseksi), käytät yhtä CSS-sääntöä, joka toteuttaa saman asian. Tämän tehokkuutta lisäävän taktiikan salaisuus on pilkku.
Kuinka ryhmittää CSS-valitsimet
Jos haluat ryhmitellä CSS-valitsimet tyylitaulukkoon, käytä pilkkuja erottaaksesi useita ryhmiteltyjä valitsimia tyylillä. Tässä esimerkissä tyyli vaikuttaa elementteihin p ja div:
div, p {väri: # f00; }
Pilkku tarkoittaa tässä yhteydessä "ja", joten tämä valitsin koskee kaikkia kappale- ja jakoelementtejä. Jos pilkku puuttuu, valitsinta käytetään sen sijaan kaikkiin kappaleelementteihin, jotka ovat jaon lapsi. Se on erilainen valitsin, joten pilkku on tärkeä.
Voit ryhmitellä minkä tahansa valitsimen muodon minkä tahansa muun valitsimen kanssa. Tämä esimerkki ryhmittää luokan valitsimen ja ID-valitsimen:
p.punainen, #sub {väri: # f00; }
Tämä tyyli koskee kaikkia kappaleita, joiden class-attribuutti on punainen ja minkä tahansa elementin (koska tyyppiä ei ole määritelty), jonka ID-attribuutti on sub.
Voit ryhmitellä minkä tahansa määrän valitsimia, mukaan lukien valitsimet, jotka ovat yksittäisiä sanoja, ja yhdistetyt valitsimet. Tämä esimerkki sisältää neljä erilaista valitsinta:
p, .red, #sub, div a: link {color: # f00; }
Tätä CSS-sääntöä sovellettaisiin:
- Mikä tahansa kappaleelementti
- Mikä tahansa elementti, jonka luokka on punainen
- Mikä tahansa elementti, jonka tunnus on sub
- linkki ankkurielementtien pseudoluokka, jotka ovat jaon jälkeläisiä.
Tämä viimeinen valitsin on yhdistevalitsin. Kuten on esitetty, se on helppo yhdistää tämän CSS-säännön muiden valitsimien kanssa. Sääntö asettaa värin # f00 (punainen) näille neljälle valitsimelle, mikä on parempi kirjoittaa neljä erillistä valitsinta saman tuloksen saavuttamiseksi.
Mikä tahansa valitsin voidaan ryhmitellä
Voit sijoittaa minkä tahansa kelvollisen valitsimen ryhmään, ja asiakirjan kaikilla elementeillä, jotka vastaavat kaikkia ryhmiteltyjä elementtejä, on sama tyyli kyseisen tyylin ominaisuuden perusteella.
Jotkut suunnittelijat haluavat listata ryhmitetyt elementit erillisillä riveillä koodin luettavuuden takaamiseksi. Ulkonäkö verkkosivustolla ja latausnopeus pysyvät samana. Voit esimerkiksi yhdistää pilkuilla erotetut tyylit yhdeksi tyyliominaisuudeksi yhdelle koodiriville:
th, td, p.red, div # firstred {väri: punainen; }
tai voit listata tyylit yksittäisiin riveihin selkeyden vuoksi:
th,
td,
p. punainen,
div # firstred
{
väri punainen;
}
Miksi ryhmittää CSS-valitsimet?
CSS-valitsimien ryhmittely auttaa minimoimaan tyylitaulukon koon, joten se latautuu nopeammin. Tosin tyylitaulukot eivät ole tärkeimmät syylliset hitaassa latauksessa. CSS-tiedostot ovat tekstitiedostoja, joten jopa hyvin pitkät CSS-taulukot ovat pieniä verrattuna optimoimattomiin kuviin. Silti jokainen optimointi auttaa, ja jos pystyt ajamaan jonkin koon pois CSS: stä ja lataamaan sivut paljon nopeammin, se on hyvä asia.
Valitsimien ryhmittely tekee myös sivuston ylläpidosta paljon helpompaa. Jos haluat tehdä muutoksen, voit muokata yksinkertaisesti yhtä CSS-sääntöä useiden sääntöjen sijaan. Tämä lähestymistapa säästää aikaa ja vaivaa.
Tärkeintä: CSS-valitsimien ryhmittely parantaa tehokkuutta, tuottavuutta, organisaatiota ja joissakin tapauksissa jopa kuormituksen nopeutta.