Топ 5 причин, почему мне нравятся пользовательские свойства CSS

Привет, Хабр! Представляю вашему вниманию перевод статьи «My top 5 reasons why I like CSS custom properties», автора Stas Melnikov

Спецификация пользовательских свойств CSS навсегда изменила мой взгляд на веб-разработку. Именно поэтому я хочу написать, почему мне нравятся пользовательские свойства CSS.

Что такое пользовательские свойства CSS?

Вкратце, пользовательские свойства CSS – это свойства, которые были созданы разработчиком. Браузер ничего о них не знает, пока разработчик их не определит.

Объявление любого пользовательского свойства начинается с двух тире, после которых необходимо добавить имя свойства. После чего вы добавляете цвет и устанавливаете значение свойства.

Например, я создал – свойство melnik909BrandColor, со значением purple для элемента button:

button {
  --melnik909BrandColor: purple;
}

Функция var

Первой особенностью пользовательских свойств CSS, является функция var. С помощью этой функции, я могу сказать браузеру, чтобы он взял значение пользовательского свойства и добавил его к любому свойству CSS.

Для этого я должен определить свойство CSS и добавить значение этого свойства, там же установить функцию var с пользовательским свойством в качестве аргумента.

К примеру, я добавил свойство --melnik909BrandColor для свойств границы и цвета.

button {
  --melnik909BrandColor: purple;
  color: var(--melnik909BrandColor);
  border: 2px solid var(--melnik909BrandColor);
}

Пользовательские свойства можно изменять прямо в браузере

Опытный читатель, который знает такие инструменты, как Sass или LESS может сказать: «Стас, почему я должен изучать пользовательские свойства CSS? Я знаю переменные Sass и этого для меня достаточно».

Внимание! Переменные Sass и LESS помогают организовать CSS так, чтобы разработчикам было проще поддерживать код. Например, я создал переменную $melnik909BrandColor в которой сохранил цвет:

$melnik909BrandColor: purple;

button {
  color: $melnik909BrandColor;
  border: 2px solid $melnik909BrandColor;
}

После компиляции я увижу следующий код в браузере:

button {
  color: purple;
  border: 2px solid purple;
}

На этом примере видно, что переменные Sass и LESS не находятся в браузере.

Вторая особенность пользовательский свойств CSS заключается в том, что они находятся в браузере. Таким образом, я могу поменять значения прямо там. Например, я могу поменять значение свойства —melnik909BrandColor для состояния выделения элемента button:

button {
  --melnik909BrandColor: purple;
  color: var(--melnik909BrandColor);
  border: 2px solid var(--melnik909BrandColor);
}

button:hover {
  --melnik909BrandColor: #27ae60;
}

Можно использовать пользовательские свойства CSS и медиа запросы вместе

Третья особенность пользовательских свойств CSS — их значения могут быть изменены с помощью медиа запросов. Например, я определяю свойство melnik909BrandColor, чтобы изменить цвет текста элемента body на разных устройствах.

body {
  color: var(--melnik909BrandColor);
}

@media (max-width: 768px) {

  body {
    --melnik909BrandColor: purple;
  }
}

@media (min-width: 769px) {

  body {
    --melnik909BrandColor: tomato;
  }
}

Функция calc и пользовательские свойства CSS

Бывают случаи, когда нам необходимо использовать функцию calc. К примеру, мне нравится использовать эту функцию, когда мне нужно посчитать количество элементов в строке:

.child {
  width: calc(100% / 4);
}

.child {
  width: calc(100% / 3);
}

Однако, этот код трудно использовать повторно, и тут пользовательские свойства CSS нам помогут. Мы можем создать переменную, которая будет считывать количество элементов. Например, я добавлю свойство –-itemsNumber в предыдущий пример:

.child {
  width: calc(100% / var(--itemsNumber));
}

И определю значения в элемент parent:

.parent {
  --itemsNumber: 5;
}

/* or */

.parent {
  --itemsNumber: 7;
}

Настройка векторной графики

Существует 2 способа настройки векторной графики с помощью пользовательских свойств CSS.

В первом методе мы определяем атрибуты fill, stroke и stroke-width, и добавляем к ним пользовательские свойства CSS в качестве их значений.

Дальше мы можем добавить значения атрибутов, устанавливая значения пользовательских свойств:

<svg class="svg-with-attr" viewBox="0 0 55.867 55.867">
  <path 
    stroke="var(--iconStroke)" 
    stroke-width="var(--iconStrokeWidth)" 
    fill="var(--iconFill)" 
    d="...">
</svg>

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

.svg-with-attr {
  --iconFill: #eeeeee;
  --iconStroke: #000000;
  --iconStrokeWidth: 1px;
}

Слева находится значок по умолчанию без стилей, а справа значок со стилями.

Во втором методе, мы определяем пользовательские свойства CSS для свойств stroke, stroke-width и fill, используя правила CSS.

body {
  --iconFill: #ffcc00;
  --iconStroke: #000000;
  --iconStrokeWidth: 2px;
}

.svg-with-props {
  stroke: var(--iconStroke);
  stroke-width: var(--iconStrokeWidth);
  fill: var(--iconFill);
}