Moderní CSS
Proměnné
Barvu, mezeru nebo zaoblení zapíšete jednou, pojmenujete a pak jen odkazujete. Změna na jednom místě se projeví všude.
Upravíme dvě karty turnusů. V náhledu vidíte, kam se dostaneme.
Začátek
Stejná čísla pořád dokola
Červená #d40000 je v CSS čtyřikrát, mezera 24px čtyřikrát, zaoblení 8px třikrát. Kdo chce změnit barvu webu, musí najít všechna místa a na žádné nezapomenout.
Druhá karta má navíc třídu is-water. Zatím nic nedělá.
Vlastnost · 1
Definice --název a var()
Barvu uložíme do proměnné --accent na :root, tedy na celou stránku. Všude, kde byla červená, teď stojí var(--accent).
Název proměnné musí začínat dvěma pomlčkami a záleží v něm na velkých a malých písmenech. Hodnotu pak vytáhne var().
Vlastnost · 2
Mezery a zaoblení
Stejně uložíme i mezeru a zaoblení. CSS je teď kratší na čtení: var(--space) říká, co to číslo znamená.
Proměnné na :root jsou jako nastavení celého webu. Hodí se mít je všechny na začátku souboru pohromadě.
Vlastnost · 3
Jiná hodnota jen uvnitř
Proměnné se dědí. Když vodácké kartě nastavíme --accent na břidlicovou, změní se border, nálepka, odkaz i tlačítko. Jen v ní, první karta zůstane červená.
Bez proměnných bychom pro vodáckou kartu museli přepsat čtyři pravidla. Takhle stačí jedno.
Responzivita
Na telefonu menší mezery
Mezera 24 px je na úzkém displeji zbytečně velká. Na mobilu změníme jedinou proměnnou a zmenší se mezera mezi kartami, padding i mezera nad tlačítkem.
Takhle se proměnné používají nejčastěji: v @media nebo v dark mode se změní hodnoty, pravidla zůstanou stejná.
Shrnutí
Jednou zapsat, všude použít
Ano
- proměnné pro barvy, mezery a zaoblení na
:root - výstižné názvy podle účelu:
--accent, ne--cervena - přepsání proměnné pro jednu část stránky
- změna proměnných v
@media
Ne
- stejná barva zapsaná na deseti místech
- proměnná pro hodnotu, která se použije jen jednou
Fallback hodnota pro případ, že proměnná neexistuje: var(--accent, #d40000).