Несколько лет назад Юрий Мазурский уже коротко рассказывал в советах о ЦСС‑переменных. Это технология для более удобной организации ЦСС, особенно эффективная на крупных сайтах с множеством страниц и элементов.
ЦСС‑переменные не поддерживаются в Интернет Эксплорере и паре редких мобильных браузеров, чтобы заставить их там работать, используют полифил
В этом совете я напомню об устройстве ЦСС‑переменных и приведу несколько примеров их использования, в том числе на сайте бюро.
ЦСС‑переменные не поддерживаются в Интернет Эксплорере и паре редких мобильных браузеров, чтобы заставить их там работать, используют полифил
Что такое ЦСС‑переменные
В именах переменных можно использовать латиницу, цифры, подчёркивания и дефис. Для чистоты кода полезно называть переменные в едином cтиле именования
Переменные состоят из имени и значения. В ЦСС‑переменную можно записать только значения ЦСС‑свойств: цвета, размеры, трансформации, фоны, шрифты. Записывать в переменную селекторы и сами свойства нельзя.
В именах переменных можно использовать латиницу, цифры, подчёркивания и дефис. Для чистоты кода полезно называть переменные в едином cтиле именования
--colorActive: #dafdaf;
--bgUrl: url(https://placeimg.com/640/480/any);
--fontSizeLarge: 32px;
--fontSans: Helvetica, Arial, sans-serif;
Переменные кладут в корневой селектор :root, если собираются использовать их по всей странице, или в конкретный селектор, когда переменная нужна только внутри него:
:root {
--colorActive: #dafdaf;
}
.factoid {
--fontSans: Helvetica, Arial, sans-serif;
}
Затем переменную подставляют в разные селекторы и свойства через конструкцию
:root {
--keyColor: red;
}
a,
b {
color: var(--keyColor);
}
button {
background-color: var(--keyColor);
}
.highlight {
border: 1px solid var(--keyColor);
}
С переменными работают главные принципы ЦСС: наследование, каскад и переопределение. Можно задать переменную в корневом селекторе, а затем переопределить для отдельных вложенных элементов. Почитать о наследовании и других принципах можно в одном из прошлых советов.
Как применяют ЦСС‑переменные
Переменные отлично подходят для уменьшения объёма и сложности кода, при стилизации элементов со множеством состояний. В переменных удобно хранить ключевые цвета страницы, кегли и шрифтовые наборы.
Простой пример — на сайте есть кнопки, их цвет меняется при наведении на более тёмный. Кнопки по умолчанию зелёные, но могут быть и других цветов, в зависимости от контекста.
Код получается достаточно объёмный, даже для трёх вариантов кнопок с двумя цветами у каждой:
/* Обычная зелёная кнопка */
button {
background-color: #fc5822;
}
button:hover {
background-color: #f64004;
}
/* Оранжевая кнопка */
button.is__preorder {
background-color: #fc5822;
}
button.is__preorder:hover {
background-color: #f64004;
}
/* Красная кнопка */
button.is__cancel {
background-color: #e30016;
}
button.is__cancel:hover {
background-color: #cc0014;
}
Чтобы упростить код, кнопку учат брать цвета из переменных, а если переменных с цветами нет, то ставить зелёный цвет по умолчанию. Затем для разных вариантов описывают наборы переменных с цветами, компактно и аккуратно:
button {
/* Значение через запятую применится, когда переменная не задана, зелёный цвет по умолчанию */
background-color: var(--buttonBg, #fc5822);
}
button:hover {
background-color: var(--buttonBgColor, #f64004);
}
button.is__preorder {
--buttonBg: #fc5822;
--buttonBgHover: #f64004;
}
button.is__cancel {
--buttonBg: #f64004;
--buttonBgHover: #e30016;
}
С переменными код делают проще и лаконичнее, убирают повторы похожих селекторов, аккуратно и удобно группируют свойства. Соотношение «сигнал‑шум» у такого кода повышается.
Чем больше на сайте типовых элементов с разными вариантами оформления, тем заметнее будет польза от переменных. Особое удовольствие делать с переменными темы для сайта целиком. Например, тёмную тему и режим высокой контрастности.
Далее уже более сложный пример — с сайта бюро.
А как в бюро
На сайте бюро все акцентные элементы берут цвет из переменной --keyColor, так для каждой страницы можно одной строкой задать ключевой цвет. Через переменные этот цвет попадёт во все нужные элементы в качестве цвета текста, фона или даже обводки:
/* Задаём ключевой цвет один раз */
:root {
--keyColor: #0550ff;
}
/* Все нужные селекторы подхватят ключевой цвет. Код упрощён */
a,
.linkWithArrow,
.youtubeSpacer-title,
.menu-item.is__active {
color: var(--keyColor);
}
.button {
background: var(--keyColor);
}
.is__somethingNew {
border: 1px solid var(--keyColor);
}
Так мы подкрашиваем страницы советов в цвета советчика, а книжные страницы — в цвета книг.
Конечно, код в примере упрощён, в реальности мы используем больше разных переменных и комбинируем их внутри селекторов. Изучить и поэкспериментировать с реальным кодом этой и любой другой страницы можно в инструментах разработчика в браузере.
Большинство страниц сайта бюро собирают дизайнеры через «Карандашик», ЦСС‑переменные в нём доступны для редактирования и позволяют дизайнерам не вникая в тонкости вёрстки раскрашивать страницы через набор стандартных переменных:
:root {
--backgroundColor: #372621;
--linkColor: #FFE566;
--linkUnderlineColor: rgba(0, 133, 86, .3);
--keyColor: #FFE566;
--keyUnderlineColor: rgba(0, 133, 86, .3);
--textColor: #fff;
--textUnderlineColor: rgba(0, 0, 0, .07);
--selectionColor: #000;
--selectionTextColor: rgb(107, 115, 126);
}Когда не стоит использовать переменные
Иногда переменные применяют исключительно чтобы уменьшить количество повторяющихся значений в коде, это неправильно. Если в ЦСС много повторяющихся значений, значит код написан без понимания основного принципа ЦСС — наследования.
Если решать проблему повторов переменными, это только усложнит код. Чтобы не повторять везде цвета и кегли, их нужно один раз задать в body, оттуда значения унаследуются и применятся ко всем дочерним элементам:
Неправильно:root { --textColor: #000; --fontSizeMedium: 18px; } p { color: var(--textColor); font-size: var(--fontSizeMedium); } h1 { color: var(--textColor); } .caption { color: var(--textColor); } .article button { color: var(--textColor); font-size: var(--fontSizeMedium); }
Правильноbody { color: #000; font-size: 18px; }
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.