Dědičnost, kaskáda, specifičnost, BEM metodika

Na dnešním cvičení si zopakujeme principy dědičnosti, kaskády a specifičnosti a ukážeme si je na několika praktických příkladech.

Na rozehřátí si zahrajeme jednoduchou hru na zopakování HTML tagů.

Dědičnost

Dědičnost v CSS je princip, podle kterého potomci dědí některé vlastnosti svých rodičů. Díky dědičnosti není nutné nastavovat stejné vlasnosti pro každý prvek zvlášť.

Dědičnost může nabývat čtyř hodnot, následující dvě jsou ale nejpoužívanější:

initial
Výchozí stav v prohlížeči.
inherit
Vynutí dědičnost od rodičovského elementu.

Ne všechny vlasnosti jsou dědičné! Kompletní seznam najdete ve specifikaci. Typicky jsou ale dědičné téměř všechny vlastnosti týkající se textu, jako jsou: barva, font, řádkování nebo dekorování.

Výše zmíněné vyzkoušejme. Mějme následující HTML kód:


<body>
    <article>
        <hgroup>
            <h1>Lorem ipsum</h1>
            <p>dolor sit amet</p>
        </hgroup>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure <a href="">dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa <a href="">qui</a> officia deserunt mollit
            anim id est laborum.</p>
    </article>
</body>

Chceme udělat následující: nastavit barvu elementu article na červenou, u podnapisu použít jeho výchozí barvu a druhému elementu a nastavit barvu na červenou.

Kaskáda

Jednoduše řečeno, kaskáda v CSS je pravidlo, podle kterého se určuje, který styl se aplikuje, pokud na jeden prvek ukazuje více pravidel současně. Jedná se o základní koncept v CSS, který je důležité pochopit a umět používat.

Jedná se o kombinaci následujících vlastností:

Pořadí pravidel
Vždy je aplikováno později definované pravidlo (pokud mají stejnou specifičnost).
Specifita selektorů
Konkrétnější (specifičtější) selektor vyhrává.
Důležitost pravidel
Nejdůležitější pravidlo, označené pomocí !important vyhrává. Nepoužívejte ani kdyby hořelo!

Specifičnost

Specifičnost je číslo ve tvaru (a, b, c), které říká, jak moc je dané CSS pravidlo, respektive jeho selektor, konkrétní. Obecně platí, že čím je konkrétnější, tím je toto číslo větší.

Následuje popis jednotlivých položek:

a
Počet id v selektoru. Třeba následující pravidlo:
```
#hlavni #sekce { border: 1px solid gray; }
```
Bude mít specifičnost ve tvaru (2, 0, 0)
b
Počet tříd, pseudo-tříd a atributů. Následující pravidlo:
```
.button:hover { background-color: pink; }
```
Má specifičnost (0, 2, 0)
c
Počet elementů a pseudoelementů v selektoru. Opět, následující pravidlo:
```
p + p::first-letter { font-weight: bold; }
```
Bude mít specifičnost (0, 0, 3)

BEM metodika

BEM je metodika pro pojmenovávání CSS tříd, která pomáhá udržet CSS kód přehledný, znovupoužitelný a snadno udržovatelný. Hlavní myšlenkou je rozdělení uživatelského rozhraní na samostatné bloky, které mají určité elementy a jak bloky tak elementy mohou existovat v různých modifikacích.

Připomeňme základní pojmenování tříd:

/*blok*/
jmeno-bloku

/*modifikátor bloku*/
jmeno-bloku--jmeno-modifikatoru-bloku

/*element bloku*/
jmeno-bloku__jmeno-elementu

/*modifikátor elementu bloku*/
jmeno-bloku__jmeno-elementu--jmeno-modifikatoru-elementu

Co je ale blok, element a modifikátor?

Blok lze chápat jako samostatnou komponentu, která může existovat nezávisle na ostatních. Je to třeba tlačítko, navigace, kartička, formulář a mnoho dalších.

Element je potom část bloku, která sama o sobě nedává smysl. Pokud je blokem kartička, jak elementem je třeba nadpis této karty.

Modifikátor už je následně konkrétní varianta bloku nebo elementu. Například pokud je tlačítko blokem, modifikátor může určovat jeho konkrétní podobu, například jinou barvu nebo font. Stejný princip platí i pro elementy.

Odkaz na dobrovolné úkoly k dnešnímu cvičení.