Урок 08 · 10 хв

Змінні й шари

--колір на :root. Змінюєш тему — не шукаєш 40 hex у файлі.

:root { --bg: #fff; --ink: #111; } і color: var(--ink). Немає змінної — другий аргумент: var(--accent, navy). Це звичайний CSS, а не препроцесор. Теми: інший клас на html перевизначає ті самі імена.

Токени

Можна спитати про це правило«Ім'я за сенсом, а не за значенням»

@layer (коли браузери в проєкті це підтримують) упорядковує бібліотеку vs твої стилі.
Забагато var на кожну властивість — шум. Токени: колір, відступ, радіус.
DevTools показує обчислене. Якщо «не застосувалося» — специфічність, а не «CSS зламався».

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. :root у CSS це
2. var(--x, navy), якщо --x немає
3. Чому --danger краще за --red?