Lekce 1.3

Moderní nativní CSS

Vlastní vlastnosti a zanořování bez preprocesoru, dotazy na velikost rodiče a specificita, kterou máme pod kontrolou.

Cvičení 2

Tokeny – pokračování

Co si vyzkoušíte

Uklidíte styly karty do jediného zanořeného bloku a najdete hranici, za kterou už zanořování škodí. Vycházíte ze stylů, které jste právě otokenizovali.

Zadání

  1. Poskládejte všechna pravidla karty do jediného bloku .card.
  2. Přepište stavy :hover a :focus-visible přes &.
  3. Vtáhněte dovnitř i media query, která kartu v širším okně otáčí na řádek.
  4. Přečtěte si v devtools výsledný selektor u nadpisu karty a porovnejte ho s tím, co jste napsali.
  5. Najděte v hotovém souboru místo, kde je zanoření hlubší než dvě úrovně, a rozmotejte ho zpátky.

Bonus

  1. Zapište uvnitř .card pravidlo pro &__title a v devtools se podívejte, na co se to přeložilo.
  2. Zanořte stejným způsobem i navigaci a rozhodněte, jestli je zápis čitelnější. Pokud ne, vraťte ji zpátky – i to je legitimní výsledek.