Перевод статьи Communicating Between JavaScript and CSS Using CSS Variables с сайта eager.io, опубликовано на css-live.ru с разрешения автора — Зака Блума

На 2016 г. CSS-переменные полностью работоспособны в Chrome и Firefox, у IE тоже в планах реализовать их.

Как часто бывает с новинками JavaScript и CSS, не сразу удается представить себе, для чего CSS-переменные могут пригодиться. Для большинства из нас эти переменные — что-то новое и непривычное, так что не всегда очевидно, к чему их применить. Но мы нашли замечательный ответ — взаимодействие между Javascript и CSS.

Что такое CSS-переменные?

CSS-переменные (см. спецификацию) добавляют в CSS два новых понятия. Отныне можно определять собственные свойства, начинающиеся с двойного дефиса (--):

html {
  --main-color: #06c
}

А затем использовать их с помощью var():

a {
  color: var(--main-color)
}

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

Что интересно, переменные подчиняются тем же правилам наследования, что другие CSS-свойства. Например, вдруг мы решили поэкспериментировать с основным цветом нашего блога:

.blog-post {
  --main-color: #9b806b
}

Все ссылки внутри той части страницы, что относится к записи в блоге, окажутся страшноватого коричневого оттенка.

CSS-переменные просто великолепно сочетаются с выражением calc():

html {
  --header-height: 40px
}

.page-content {
  top: calc(var(--header-height) + 10px)
}

CSS-переменные и JavaScript

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

Исторически единственным способом управлять стилями переменной или функцией из JavaScript было, по сути, писать CSS в самом скрипте:

myElement.style.height = height + 'px'

Не так уж редко случается отказываться от отдельного CSS вообще и просто писать стили в JS:

var newStyles = document.createElement('style')
document.head.append(newStyles)
newStyles.innerHTML = ".my-element {" +
  "height: " + height + "px;" +
  "width: 40px;" +
  "color: #9b806b;" +
"}"

CSS-переменные позволяют делать намного лучше, возьмем тот же пример:

.my-element {
  height: var(--element-height);
  width: 40px;
  color: #9b806b;
}

Тогда в JavaScript можно прописать эту переменную именно для нашего элемента:

myElement.style.setProperty('--element-height', height + 'px')

Если исхитриться, можно обойтись и без конкатенации:

.my-element {
  height: calc(var(--element-height) * 1px);
}

myElement.style.setProperty('--element-height', height)

Можно даже определить в CSS значение по умолчанию, которое потом переопределится скриптом:

html {
   /* переопределится в JS */
  --element-height: 20px
}

Теперь можно аккуратно передавать информацию между JavaScript и стилями. Ну разве это не потрясающе?

Вот готовый пример, с которым можно поиграть:

See the Pen Example of Using JavaScript to Set CSS Variables by Zack Bloom (@zackbloom) on CodePen.

P.S. Это тоже может быть интересно:

• «Запашки» кода React-компонентов
• Как читать W3C-спецификации
• Псевдокласс :has() — не только «родительский селектор»