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

Refaktoring – pokračování

Co si vyzkoušíte

Necháte kartu reagovat na to, co v sobě má, a rozdělíte styly do vrstev tak, aby se přebíjely v pořadí, které jste určili vy. Vycházíte z karty, kterou jste právě přepsali na container query.

Zadání

  1. Odeberte v HTML jedné z karet obrázek.
  2. Napište pravidlo, které kartě bez obrázku dá jiné rozvržení, a použijte k tomu :has(). Do HTML ani do tříd nesahejte.
  3. Přidejte jedné kartě odznak s cenou a přes :has() jí kvůli němu zvedněte tloušťku rámečku.
  4. Rozdělte style.css na vrstvy reset, components a utilities a vyjmenujte je v tomhle pořadí hned na začátku souboru.
  5. Přidejte pomocnou třídu .text-muted do vrstvy utilities a použijte ji na popis v kartě. Ověřte, že přebije pravidlo z vrstvy components, přestože má nižší specificitu.
  6. Najděte ve svém CSS !important, pokud tam nějaký je, a zkuste ho vrstvami nahradit.

Bonus

  1. Napište :has() tak, aby stránka s otevřeným dialogem ztlumila obsah pod ním.
  2. Zkuste, co se stane, když vrstvy vyjmenujete v opačném pořadí. Pak to vraťte.