Kaskade v CSS

Kaskada je postopek, s katerim brskalnik odloči, katera vrednost CSS lastnosti bo na koncu uporabljena za določen element. To je ena temeljnih idej jezika CSS, saj se lahko na isti element hkrati nanaša več pravil.

Osnovna pravila

Kadar na isti element vpliva več pravil, brskalnik ne izbere končne vrednosti naključno. Pri kaskadi so pomembni predvsem naslednji koraki: ustreznost pravila, izvor pravila in pomembnost, specifičnost ter vrstni red zapisa.

1. ustreznost pravila – ali pravilo sploh velja za ta element in v tem mediju,
2. izvor pravila in pomembnost – ali gre za slog brskalnika, uporabnika ali avtorja ter ali je uporabljeno !important,
3. specifičnost – bolj specifičen selektor ima prednost pred manj specifičnim,
4. vrstni red zapisa – če sta pravili enako močni, velja zadnje zapisano.

Viri slogov

CSS pravila lahko prihajajo iz več virov:

• iz privzetih slogov brskalnika,
• iz slogov, ki jih določi uporabnik,
• iz slogov, ki jih napiše avtor strani.

Avtor strani lahko svoje sloge doda na več načinov:

• neposredno v element z atributom style,
• v elementu <style> v glavi dokumenta,
• v zunanji slogovni datoteki.

Te načine lahko med seboj kombiniramo. Kljub temu je glavni namen CSS ločiti vsebino od oblikovanja, zato je v praksi najprimernejša uporaba zunanjih slogovnih datotek.

Primerjave

Vrstni red zapisa

Če je isto pravilo določeno večkrat z enako pomembnostjo in enako specifičnostjo, velja zadnje zapisano pravilo.

p {
   color: blue;
}

p {
   color: green;
}

V tem primeru bo besedilo odstavka zeleno, ker je drugo pravilo zapisano pozneje.

Specifičnost

Če za isti element velja več pravil istega izvora in enake pomembnosti, odloča specifičnost selektorja. Selektor z razredom ali atributom je običajno močnejši od selektorja po elementu, selektor z identifikatorjem pa je še močnejši.

p {
   color: blue;
}

.opozorilo {
   color: orange;
}

#glavni {
   color: red;
}

Če imamo element z identifikatorjem glavni, bo prevladalo pravilo #glavni.

Uporaba !important

Zapis !important poveča pomembnost deklaracije. Uporabljamo ga previdno, ker lahko oteži vzdrževanje kode. Pri pomembnih deklaracijah je vrstni red prednosti obrnjen glede na običajne deklaracije.

p {
   color: blue;
}

p {
   color: red !important;
}

V tem primeru bo besedilo rdeče.

Kaskadne plasti

V sodobnem CSS lahko na kaskado vplivamo tudi z uporabo kaskadnih plasti @layer. Te omogočajo bolj nadzorovano organizacijo slogov, na primer ločevanje osnovnih slogov, komponent in prilagoditev. Kaskadne plasti pomagajo določiti jasnejši vrstni red med skupinami pravil in tako poenostavijo nadzor nad tem, katere deklaracije se na koncu uporabijo.

@layer osnova, komponente, prilagoditve;

@layer osnova {
   p {
      color: black;
   }
}

@layer prilagoditve {
   p {
      color: darkgreen;
   }
}

V tem primeru bo pozneje določena plast prilagoditve preglasila plast osnova, če gre za običajne deklaracije. Pri deklaracijah !important pa je vrstni red plasti obrnjen.

Priporočila

• Za večje projekte uporabljaj predvsem zunanje slogovne datoteke.
• Pravila organiziraj tako, da se izogneš nepotrebno veliki specifičnosti.
• !important uporabljaj le izjemoma in premišljeno.
• Če je slogov veliko, razmisli o uporabi kaskadnih plasti @layer.
• Kadar dve pravili tekmujeta med seboj, najprej preveri izvor, pomembnost, specifičnost in šele nato vrstni red zapisa.

Pogoste napake

• Prepričanje, da vedno zmaga zadnje zapisano pravilo.
• Uporaba zelo specifičnih selektorjev brez jasnega razloga.
• Pretirana uporaba !important.
• Mešanje več načinov dodajanja slogov brez jasne organizacije.
• Neuporaba zunanjih slogovnih datotek tam, kjer bi te poenostavile vzdrževanje kode.