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

Мы подготовили для вас три статьи о кастомных свойствах в CSS. Из них вы узнаете, что такое кастомные свойства и зачем они нужны, чем они отличаются от свойств в Sass, и какие есть ограничения при работе с кастомными CSS-свойствами. Чтобы разобраться в этом, вам понадобится знание CSS и основ JavaScript. В статьях мы разбираем простые примеры, которые помогут вам понять основы работы с кастомными свойствами.

Кастомные свойства или CSS-переменные?

Многие называют их CSS-переменными. Говоря «переменная», возникает вопрос о типах данных, которые в ней хранятся. Подразумевают, что в переменных могут храниться те типы данных, которые существуют в конкретном языке программирования. Но в CSS всё не так. В CSS есть много разных типов данных: от текста до цветов и единиц измерения. В переменных можно записать код цвета или размер элемента, но сохранятся эти данные как строки. Это накладывает ряд ограничений на разработчика при использовании кастомных свойств там, где важен тип данных. Например, в медиа-запросах. Именно поэтому мы используем термин «пользовательские» или «кастомные» свойства, принятый в документации.

Синтаксис

Кастомные свойства позволяют сконфигурировать будущий макет ещё до начала разработки компонентов. Верстальщик получает от дизайнера вместе с макетом набор правил, по которым будет выстраиваться палитра сайта, типографика, сетка. До появления кастомных свойств верстальщики использовали препроцессоры, чтобы изначально задать подобную систему в коде и следовать принципу «DRY» (Don’t Repeat Yourself с англ. «не повторяйся»). Они сохраняли набор этих правил в отдельные Sass- или Less-переменные, писали миксины и в целом применяли комплекс мер по оптимизации своей работы и структурированию кода. Это круто и удобно, но требует последующей компиляции в CSS, ведь этот язык понимает браузер.

Теперь часть этих задач можно решать нативно, средствами платформы через кастомные свойства. Например, дизайнер определил цветовую палитру нашего будущего сайта. Для простоты пусть в нём будут два цвета — чёрный (ну, не совсем чёрный) и белый. Так выглядит глобальная конфигурация этих цветов на CSS:

:root {
    --color-black: #1e1e1e;
    --color-white: #fff;
}

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