Frontend Formula

Кастомные свойства



Удобный способ сохранить повторяющееся значение и потом использовать его в разных местах кода. Как переменные в языках программирования.



Что это и как пишется?

Кастомное свойство — это произвольное свойство с определённым значением. Оно отличается от стандартного CSS-свойства способом записи. Чтобы применить кастомное свойство, нужно передать его в CSS-функцию var().



Пример:

.list {

  --element-gap: 10px;

}



.list-item {

  margin-left: var(--element-gap);

}

Наследование кастомных свойств

Свойства наследуются вниз по дереву. Определив переменную в родительском элементе, мы сможем использовать её в любом дочернем элементе.



Использование в JavaScript

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



На практике

Кастомные свойства также сильно упрощают жизнь, если нужны цветовые схемы, ночная тема или при разработке дизайн-системы.



Статья: https://doka.guide/css/custom-properties/



#css #дока



👉 @frontend_formula