Skip to content

Nopeuta ryhmittelemällä useita CSS-valitsimia

20 de maaliskuu de 2021

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, erota useita ryhmiteltyjä valitsimia tyylillä pilkuilla. Tässä esimerkissä tyyli vaikuttaa elementteihin p ja div:

div, p { color: #f00; }

Pilkku tarkoittaa tässä yhteydessä ”ja”, joten tämä valitsin koskee kaikkia kappaleen elementtejä ja kaikkia jakoelementtejä. Jos pilkku puuttuu, valitsinta käytetään sen sijaan kaikkiin kappaleen elementteihin, 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.red, #sub { color: #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äillä neljällä valitsimella, 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 luetella ryhmitetyt elementit erillisillä riveillä koodin luettavuuden vuoksi. Ulkonäkö verkkosivustolla ja latausnopeus pysyvät samana. Voit esimerkiksi yhdistää pilkuilla erotetut tyylit yhdeksi tyyliominaisuudeksi yhdelle koodiriville:

th, td, p.red, div#firstred { color: red; }

tai voit listata tyylit yksittäisiin riveihin selkeyden vuoksi:

th,
td,
p.red,
div#firstred
{
color: red;
}

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 ryhmitteleminen helpottaa myös sivuston ylläpitoa. 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.