CSS переменные

В крупных проектах часто используется ограниченная палитра цветов, составленная дизайнером. В ходе разработки, мы используем эту палитру по всему проекту. Проект растёт, количество файлов в нём, соответственно, тоже. И вот, наступает он — РЕДИЗАЙН. Слово, доставляющее боль и страдания любому верстальщику. Так уж получилось, что вам повезло и в проекте просто поменялось несколько цветов. Допустим, салатовый стал ярко-зелёным, а красный стал томатным. Звучит не так уж и сложно. Простенький такой редизайн. И пошли мы по всем CSS-файлам проекта искать изменённые цвета. Причём, через какое-то время мы ещё и заметили, что в прошлый раз, дизайнер немножко ошибался с цветами и вместо одного кода салатового цвета#3bff00, он использовал множество вариаций, незначительно отличающихся друг от друга. К примеру,#3bff01. Как мы понимаем, простым поиском и заменой нам уже не обойтись. Теперь придётся искать на всех страницах вашего сайта салатовые элементы. Уже представляете, сколько времени у вас на это уйдёт? А ведь нам еще красный на томатный менять.

В борьбу с такими вот проблемами включились CSS переменные (CSS custom properties) (пользовательские свойства CSS) . Мы можем изначально задать переменную для салатового цвета и использовать только её. А если мы при разработке увидим, что есть два почти одинаковых салатовых цвета, то можем подойти к дизайнеру и спросить, какой из них правильный. Дизайнеры тоже люди и тоже ошибаются. Это надо учитывать. Итак, зададим два цвета: салатовый и томатный:

:root {
  --green-light: #3bff00;
  --tomato: #ff6347;
}

Как вы видите, CSS переменные задаются в псевдо-классе:root

Теперь будем использовать эти переменные в CSS:

menu {
  background-color: var(--green-light);
  border: 1px solid var(--tomato);
}

К следующему редизайну, когда#3bff00поменяется на#00ad68, мы лишь изменим код цвета в:root, и весь проект перекрасится. Одна секунда вместо часов страданий.

Рекомендую называть переменные не так, как в примере. Наиболее правильными будут названия, исходя из того, где используется цвет или вообще какие-то абстрактные названия. Например--accent, --primary, --frame-shadow, ...

:root {
  --font-large: 20px;
}

h3 {
  font-size: var(--font-large);
}

@media(min-width: 700px) {
  :root {
   --font-large: 32px;
  }
}