Moderní nativní CSS

Vlastní vlastnosti

CSS má vlastní proměnné a říká se jim vlastní vlastnosti (custom properties). Vypadají jako každá jiná vlastnost, jenom jejich jméno začíná dvěma pomlčkami:

:root {
  --color-brand: #5b2cf0;
  --space: 1rem;
}

.button {
  background: var(--color-brand);
  padding: var(--space) calc(var(--space) * 2);
}

Zápis var(--jmeno) hodnotu vytáhne zpátky. Selektor :root je kořen dokumentu, tedy <html>, takže hodnota deklarovaná tam platí pro celou stránku.

Nejsou to proměnné, jak je známe

Kdo viděl proměnné v jiném jazyce, čeká, že se hodnota jednou dosadí a tím to končí. Vlastní vlastnosti ale žijí v prohlížeči, dědí se jako každá jiná vlastnost a kdekoli po cestě se dají přepsat:

.card--warning {
  --color-brand: #ff5c39;
}

Víc není potřeba. Všechno uvnitř téhle karty, co sahá na var(--color-brand), je najednou korálové, a zbytek stránky zůstal fialový. Blíž než proměnné je to nastavení: řekne se jednou nahoře a kdokoli níž si ho může pro sebe a své potomky přenastavit.

Dvě patra tokenů

Pojmenovaným hodnotám, na kterých stojí vzhled celého webu, se říká design tokeny a vyplatí se je psát ve dvou patrech:

:root {
  /* paleta – co to je za barvu */
  --violet: #5b2cf0;
  --coral: #ff5c39;

  /* role – k čemu tu barvu používáme */
  --color-action: var(--violet);
  --color-danger: var(--coral);
}

V komponentách se pak sahá jen na to druhé patro. Když se za rok změní odstín fialové, přepíše se jediný řádek – a když padne rozhodnutí, že tlačítka budou korálová, taky jediný. K tokenům se vrátíme v modulu 02 z druhé strany, tedy z návrhu.

Náhradní hodnota

Druhý argument var() je záskok pro případ, že vlastnost nikde nad prvkem deklarovaná není:

.card {
  gap: var(--card-gap, 1rem);
}