Эта статья будет полезна, если вы уже знакомы с основами кастомных свойств в CSS: синтаксисом, особенностями контекста при использовании кастомных свойств и реактивностью при управлении через JavaScript. Понимаете, как применять контекст и фоллбэки для кроссбраузерности. Знаете, какая разница между кастомными свойствами и препроцессорными переменными. Если что-то из этого вам не знакомо, прочтите статью про основы кастомных CSS-свойств и про их особенности. Это достаточно исчерпывающее руководство, чтобы начать применять технологию в проектах. Но не хватает одной детали: используя любую технологию, нужно знать ограничения, которые она накладывает на разработку. Разберём, что кастомные свойства не умеют делать.

Кастомные свойства — это текст

Начнём с незамысловатых сложностей. Кастомные свойства — это текст. И любой текст с указанием кастомного свойства валиден внутри CSS-правил:

.block {
    background-color: #1e1e1e;
    background-color: Мой любимый цвет — var(--my-color);
}

Третью строку браузер посчитает валидной, при этом вторая не сработает:

Правильный код перезапишется на неправильный. Это кажется странным и нелогичным. Нужно помнить об этой особенности кастомного свойства, чтобы не допускать таких ошибок.

#статьи #css #веб-разработка #фронтенд