CSS specificita, kaskáda, izolace, konvence (BEM)

Co je CSS

CSS (Cascading Style Sheets) je jazyk pro popis vzhledu webových stránek. HTML strukturuje obsah, CSS řeší jak ten obsah vypadá, JavaScript řeší chování.

Tři pilíře webu

HTML  → struktura a sémantika
**CSS   → vzhled (barvy, layout, animace)**
JS    → chování a interaktivita

Co je CSS kaskáda

Kaskáda je mechanismus, který rozhoduje, které CSS pravidlo vyhraje, když více pravidel cílí na stejný element a stejnou vlastnost.

Vyhodnocuje se v tomto pořadí:

  1. Původ a důležitost (odkud styl pochází a jestli má !important)
  2. Specificita (jak přesný je selektor)
  3. Pořadí (které pravidlo je v kódu pozdější)

Kromě toho existuje ještě dědičnost, což je odlišný mechanismus, jak hodnoty přechází z rodiče na potomka.

Původ stylů (origin)

Styly můžou pocházet ze tří zdrojů. Společně s !important se vyhodnocují v této hierarchii:

Priorita (od nejnižší k nejvyšší) Kategorie
1 Normální styly prohlížeče (user-agent)
2 Normální styly uživatele (extensions, accessibility)
3 Normální styly autora (tvoje CSS)
4 CSS animace (@keyframes během animace)
5 !important styly autora
6 !important styly uživatele
7 !important styly prohlížeče
8 CSS transitions (přechody)

Druhá věc: animace a transitions mají vlastní úroveň, transitions dokonce přebíjí i !important. Proto blikne button při hoveru, i když máš color: red !important.

Specificita

Specificita určuje, který selektor je "přesnější", tedy má vyšší prioritu. Počítá se jako čtyřmístné číslo (inline, ID, třída, tag).

Selektor Specificita Příklad
Inline styl 1,0,0,0 style="color: red"
ID selektor 0,1,0,0 #header { }
Třída, pseudo-třída, atribut 0,0,1,0 .button, :hover, [type]
Element, pseudo-element 0,0,0,1 p { }, ::before
Univerzální * 0,0,0,0 * { }
:not(), :is(), :has() dle nejvyšší specificity argumentu viz níže
:where() 0,0,0,0 (nulová) :where(.btn)

Příklady výpočtu