Повторений шістнадцятковий колір легко замінити пошуком, доки в проєкті є лише одна тема. Коли з’являються темна панель, акцентні картки й компактний режим, однакові числа вже не завжди означають однаковий намір. Власні властивості CSS допомагають називати рішення: колір тексту, тло поверхні, відстань між елементами. Їхня користь полягає не лише в коротшому записі.
Назвіть призначення значення
Для загальних значень зручно використати :root. Назви на кшталт --surface і --text говорять про роль у дизайні, тоді як --blue-500 описує колір палітри. Обидва типи можуть співіснувати: палітра зберігає конкретні кольори, а семантичні назви пояснюють, де вони потрібні. Не перетворюйте кожне випадкове число на глобальне налаштування.
<section class="panel">
<h2>План читання</h2>
<p>Один невеликий матеріал на день.</p>
<a href="/css/kaskad-i-spetsyfichnist/">Почати з каскаду</a>
</section>
<section class="panel panel--night">
<h2>Вечірній режим</h2>
<p>Той самий компонент з іншими локальними значеннями.</p>
<a href="/css/vydymyi-fokus/">Перевірити фокус</a>
</section>:root {
--surface: #ffffff;
--text: #172033;
--accent: #1d4ed8;
--space: 1rem;
}
.panel {
color: var(--text);
background: var(--surface);
padding: calc(var(--space) * 1.5);
border: 1px solid currentColor;
border-radius: .75rem;
}
.panel a { color: var(--accent); }
.panel--night {
--surface: #172033;
--text: #f8fafc;
--accent: #bfdbfe;
}Звичайні власні властивості, оголошені через подвійний дефіс, успадковуються. Тому посилання всередині другої панелі отримує її локальний акцент. Не потрібно дублювати всі правила компонента або додавати окремий клас до кожного дочірнього елемента. Виняток — зареєстровані властивості: через @property можна явно керувати успадкуванням.
Це значення в каскаді, а не текстова підстановка під час збирання
Власна властивість обчислюється для конкретного елемента й бере участь у каскаді. Зміна значення на батьківській панелі може вплинути на її нащадків. Водночас сусідній елемент поза панеллю не отримує це значення просто через близькість у файлі. Так само var() не підставляє фрагменти назв властивостей чи селекторів: вона використовується у значеннях оголошень.
Зберігайте одиниці вимірювання разом зі значенням, коли це спрощує контракт компонента. Якщо --space дорівнює 1rem, його можна помножити в calc(). Якщо ви очікуєте лише число, назвіть це окремо й задокументуйте одиниці, які додаються під час використання. Змішування двох підходів дає помилки, які важко помітити на око.
Коли запасне значення справді допомагає
.notice {
border-color: var(--notice-border, #64748b);
color: var(--notice-text, var(--text, #172033));
}Перший приклад використовує запасний колір, якщо потрібна власна властивість не визначена належним чином. Другий послідовно перевіряє локальний текст, загальний текст і завершальний колір. Усі наступні варіанти потрібно вкладати всередину окремих var(). Запис через простий перелік ком не створює список альтернатив.
Важлива пастка: якщо --notice-text існує та містить 16px, це допустимий текст власної властивості, але неприйнятний колір. Запасний колір у var() не стає автоматично перевіркою типу. Після невдалої підстановки color поводитиметься за правилами недійсного обчисленого значення, а не обов’язково повернеться до попереднього оголошення в тому самому блоці.
Додавайте тип лише там, де він потрібен
@property --notice-border {
syntax: "<color>";
inherits: false;
initial-value: #64748b;
}Така реєстрація задає тип кольору, початкове значення та відключає успадкування саме цієї властивості. Це змінює її контракт, тому не варто механічно реєструвати всі токени теми з inherits: false: дочірні компоненти перестануть отримувати батьківські налаштування. Підтримку потрібних можливостей перевіряйте для своїх цільових браузерів.
Відокремте публічні налаштування від внутрішніх
Якщо компонент використовують на кількох сторінках, перелічіть його дозволені налаштування поруч із прикладом. Наприклад: тло, основний текст і акцент посилання. Зміна внутрішнього відступу заголовка не повинна випадково вимагати редагування всіх місць використання. Стабільні семантичні назви допомагають замінити реалізацію компонента без зміни його зовнішнього контракту.
Не додавайте тему через кілька випадкових значень без перевірки взаємозв’язків. Світлий акцент, розрахований на темну панель, не варто переносити на білу поверхню окремо від решти палітри. Корисно зберігати приклад кожної підтримуваної комбінації та перевіряти його після редагування токенів. Так зміна кольору стає передбачуваним рішенням для компонента, а не непомітною зміною читабельності на іншій сторінці.
Перевірте компонент окремо
Вставте панель у світлу й темну область, приберіть локальне налаштування та навмисно задайте некоректне значення. В інспекторі подивіться, звідки успадковано кожну властивість. Перевірте контраст після зміни палітри: змінна з назвою «доступний акцент» не гарантує читабельності сама по собі. Добрий набір токенів має зрозумілий зміст, невеликий публічний інтерфейс і передбачувану поведінку за відсутності налаштувань.