Как правильно называть переменные в CSS?

Question

[Сергей]

Переменные в css (в препроцессорах в том числе) - это здорово, но как же всё-таки правильно их именовать? Предположим, нужно задать цвет фона страницы (будем использовать scss):

$white: #fff;

body {
  background-color: $white;
}

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

$white: #f1f1f1;

body {
  background-color: $white;
}

Теперь всё не так радужно: переменная осталась $white, но цвет-то ведь уже другой, и менять эту несчастную переменную по всем файлам, где она объявлена, как-то нерационально.
Значит, приходим к выводу о том, что необходимо называть переменные цветов как-то более универсально. $white становится $color-light. Но тут вдруг требуется этот светлый оттенок поменять на диаметрально противоположный - тёмный. Опять замкнутый круг. Ваши мысли по этому поводу.

Answer 1

[Ankhena]

2 блока переменных.
В первом сами цвета.

@brand-color
@accent-color
@inverse-color

возможно и с названием цветов, например, зеленый и светло-зеленый: green и light-green (такое бывает, когда цветов в макете много)

Во втором блоке уже цвета по назначению

@text-color: #999
@menu-color: @brand-color
@link-color: @accent-color
@hr-color: @inverse-color

Answer 2

[Сергей]

Может, вопрос соберёт больше интересных ответов, но сам пока пришёл к двум вариантам:
1. Не задавать переменные (в данном случае цвета) напрямую желаемому объекту, а делать такую цепочку:

$white: #fff;
$body-bg: $white;
$comment-container-bg: $white;

body {
  background-color: $body-bg;
}
.comment-container {
  background-color: $comment-container-bg;
}

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

2. Создавать цветовые схемы в отдельных файлах со своими переменными (light-theme.scss, dark-theme.scss и т.д.) и подключать определённую тему при необходимости.

Answer 3

[AngReload]

Можно подглядеть у пикабу, на сайте можно менять светлую и тёмную тему и основной цвет. Там хороший код, и названия, которые дали переменным отлично отражают их назначение.

Длиннокод

:root {
  --color--bg: #fff;
  --color--bg_80: rgba(255, 255, 255, 0.8);
  --color--bg_90: rgba(255, 255, 255, 0.9);
  --color--bg_contrast: #000;
  --color--bg_contrast-50: rgba(0, 0, 0, 0.5);
  --color--bg_contrast-60: rgba(0, 0, 0, 0.6);
  --color--color: #000;
  --color--green: #8ac858;
  --color--red: #FD5D47;
  --color--yellow: #ffc800;
  --color--gray: #cacaca;
  --color--gray_light: #e8e8e8;
  --color--gray_dark: #adadad;
  --color--text: #212121;
  --color--secondary: #4d4d4d;
  --color--caption: #757575;
  --color--text_green: #6c9b45;
  --color--text_link: #6c9b45;
  --color--text_link: var(--color--text_green);
  --color--text_red: #f75c48;
  --color--text_contrast: #fff;
  --color--text_search: rgba(255, 200, 0, 0.3);
  --color--selection: #c5e4ac;
  --color--tool: #c2c2c2;
  --color--icon: #BDBDBF;
  --color--social_vk: #5b7aa8;
  --color--social_facebook: #4867aa;
  --color--social_twitter: #41abe1;
  --color--social_google: #dd4b38;
  --color--app__bg: #f4f4f4;
  --color--app__text: #212121;
  --color--section__bg: #fff;
  --color--section_gray__bg: #f9f9fb;
  --color--section_success__bg: #8ac858;
  --color--section_success__bg: var(--color--green);
  --color--section_success__text: #fff;
  --color--section_danger__bg: #FD5D47;
  --color--section_danger__bg: var(--color--red);
  --color--section_danger__text: #fff;
  --color--section_warning__bg: rgba(255, 200, 0, 0.05);
  --color--section_warning__border: #ffc800;
  --color--section_warning__text: #212121;
  --color--toast_default__bg: #6ea046;
  --color--toast_default__text: #fff;
  --color--toast_danger__bg: #FD5D47;
  --color--toast_danger__bg: var(--color--red);
  --color--toast_danger__text: #fff;
  --color--toast_warning__bg: #ffc800;
  --color--toast_warning__text: #5e3a00;
  --color--popup_shadow-arrow: rgba(0, 0, 0, 0.08);
  --color--popup_default__bg: #fff;
  --color--popup_default__text: #212121;
  --color--popup_gray__bg: #f9f9fb;
  --color--popup_gray__text: #212121;
  --color--popup_danger__bg: #FD5D47;
  --color--popup_danger__bg: var(--color--red);
  --color--popup_danger__text: #fff;
  --color--popup_warning__bg: #212121;
  --color--popup_warning__text: #fff;
  --color--tag__text: #757575;
  --color--tag_highlight__text: #4d4d4d;
  --color--tag-focus__text: #212121;
  --color--header__text: #d8ffbc;
  --color--header_active__text: #fff;
  --color--header_dark__text: rgba(255, 255, 255, 0.7);
  --color--header_icon__bg: rgba(0, 0, 0, 0.05);
  --color--header__bg: #8ac858;
  --color--header__bg: var(--color--green);
  --color--footer__text: #212121;
  --color--footer__bg: #f0f0f0;
  --color--award__bg: #f1f1f1;
  --color--award__bg_hover: #d9d9d9;
  --color--menu-item-current__text: #6c9b45;
  --color--menu-item-current__text: var(--color--text_green);
  --color--menu-item-current__bg: #8ac858;
  --color--menu-item-current__bg: var(--color--green);
  --color--comments__left-border: #efefef;
  --color--comments__image: #fff;
  --color--input__bg: #fff;
  --color--input__text: #212121;
  --color--input-placeholder__text: #757575;
  --color--input-focus__border: #8ac858;
  --color--input-focus__border: var(--color--green);
  --color--input_complexity__bg: #e8e8e8;
  --color--input_checkbox: #adadad;
  --color--bell_yellow: #ffc800;
  --color--border: #e9e9e9;
  --color--border_success: #8ac858;
  --color--border_success: var(--color--green);
  --color--border_error: #FD5D47;
  --color--border_error: var(--color--red);
  --color--border_upload: rgba(233, 233, 233, 0.4);
  --color--highlight_yellow__bg: rgba(255, 200, 0, 0.1);
  --color--highlight_yellow__bg_40: rgba(255, 200, 0, 0.4);
  --color--highlight_red__bg: rgba(253, 93, 71, 0.1);
  --color--highlight_gray__bg: rgba(233, 233, 233, 0.4);
  --color--highlight_green__bg: rgba(138, 200, 88, 0.1);
  --color--shadow: rgba(0, 0, 0, 0.16);
  --color--button__text_contrast: #fff;
  --color--button__stroke: rgba(88, 88, 88, 0.2);
  --color--button__stroke_contrast: rgba(255, 255, 255, 0.2);
  --color--button_default__bg: #e9e9e9;
  --color--button_default__text: #585858;
  --color--button_success__bg: #8ac858;
  --color--button_success__bg: var(--color--green);
  --color--button_danger__bg: #FD5D47;
  --color--button_danger__bg: var(--color--red);
  --color--button_warning__bg: #ffc800;
  --color--button_warning__bg: var(--color--yellow);
  --color--button_dark__bg: #4d4d4d;
  --color--button_dark__bg: var(--color--secondary);
  --color--button-small_success__bg: #83be54;
  --color--button-small_default__bg: #dddddd;
  --color--button-small_default__text: #585858;
  --color--slider__quantity: rgba(138, 200, 88, 0.7);
  --color--progress-circle__storke: rgba(117, 117, 117, 0.2);
  --color--editor__bg: rgba(0, 0, 0, 0.7);
  --color--editor__text: #fff;
  --color--editor__button_hover: rgba(0, 0, 0, 0.4);
  --color--editor__button_active: rgba(0, 0, 0, 0.4);
  --color--player__play: rgba(0, 0, 0, 0.1);
  --color--player__logo: rgba(255, 255, 255, 0.5);
  --color--code__bg: #f9f9fb
}

html[data-theme-dark] {
  --color--bg: #22272B;
  --color--bg_80: rgba(34, 39, 43, 0.8);
  --color--bg_90: rgba(34, 39, 43, 0.9);
  --color--bg_contrast: #fff;
  --color--bg_contrast-50: rgba(34, 39, 43, 0.5);
  --color--bg_contrast-60: rgba(34, 39, 43, 0.6);
  --color--color: #fff;
  --color--green: #567842;
  --color--red: #FD5D47;
  --color--yellow: #917815;
  --color--gray: #4e5255;
  --color--gray_light: #65686b;
  --color--gray_dark: #393d41;
  --color--text: #bfbfbf;
  --color--secondary: #a6a6a6;
  --color--caption: #7d7d7d;
  --color--text_green: #6c9b45;
  --color--text_red: #f75c48;
  --color--text_contrast: #fff;
  --color--text_search: rgba(145, 120, 21, 0.3);
  --color--selection: rgba(69, 96, 53, 0.99);
  --color--tool: #4e5255;
  --color--icon: #4e5255;
  --color--social_vk: #5b7aa8;
  --color--social_facebook: #4867aa;
  --color--social_twitter: #41abe1;
  --color--social_google: #dd4b38;
  --color--app__bg: #171c20;
  --color--app__text: #bfbfbf;
  --color--section__bg: #22272B;
  --color--section_gray__bg: #1a1e21;
  --color--section_success__text: #fff;
  --color--section_danger__bg: #FD5D47;
  --color--section_danger__text: #fff;
  --color--section_warning__bg: rgba(145, 120, 21, 0.05);
  --color--section_warning__border: #917815;
  --color--section_warning__text: #bfbfbf;
  --color--toast_default__bg: #8ac858;
  --color--toast_default__text: #fff;
  --color--toast_danger__bg: #FD5D47;
  --color--toast_danger__text: #fff;
  --color--toast_warning__bg: #fed45b;
  --color--toast_warning__text: #5e3a00;
  --color--popup_shadow-arrow: rgba(0, 0, 0, 0.08);
  --color--popup_default__bg: #1f2327;
  --color--popup_default__text: #bfbfbf;
  --color--popup_gray__bg: #171b1e;
  --color--popup_gray__text: #bfbfbf;
  --color--popup_danger__bg: #FD5D47;
  --color--popup_danger__text: #fff;
  --color--popup_warning__bg: #181b1e;
  --color--popup_warning__text: #bfbfbf;
  --color--tag__text: #7d7d7d;
  --color--tag_highlight__text: #a6a6a6;
  --color--tag-focus__text: #bfbfbf;
  --color--header__text: rgba(255, 255, 255, 0.7);
  --color--header_active__text: #fff;
  --color--header_dark__text: rgba(255, 255, 255, 0.7);
  --color--header_icon__bg: rgba(255, 255, 255, 0.05);
  --color--header__bg: #1f2327;
  --color--footer__text: #bfbfbf;
  --color--footer__bg: #0f0f0f;
  --color--award__bg: #4e5255;
  --color--award__bg_hover: #606366;
  --color--comments__left-border: #393d41;
  --color--input__bg: #22272B;
  --color--input__text: #bfbfbf;
  --color--input-placeholder__text: #7d7d7d;
  --color--input-focus__border: #8ac858;
  --color--input-focus__border: var(--color--green);
  --color--input_complexity__bg: #65686b;
  --color--input_checkbox: #393d41;
  --color--bell_yellow: #ffc800;
  --color--border: #393d41;
  --color--border_error: #FD5D47;
  --color--border_upload: rgba(57, 61, 65, 0.4);
  --color--highlight_yellow__bg: rgba(145, 120, 21, 0.1);
  --color--highlight_yellow__bg_40: rgba(145, 120, 21, 0.4);
  --color--highlight_red__bg: rgba(253, 93, 71, 0.1);
  --color--highlight_gray__bg: rgba(255, 255, 255, 0.1);
  --color--highlight_green__bg: rgba(86, 120, 66, 0.1);
  --color--shadow: rgba(0, 0, 0, 0.46);
  --color--button__text_contrast: #fff;
  --color--button__stroke: rgba(110, 110, 110, 0.2);
  --color--button__stroke_contrast: rgba(255, 255, 255, 0.2);
  --color--button_default__bg: #2d3236;
  --color--button_default__text: #6e6e6e;
  --color--button_dark__bg: #0f0f0f;
  --color--button-small_default__bg: #2b3033;
  --color--button-small_default__text: #6e6e6e;
  --color--button-small_success__bg: #52723f;
  --color--slider__quantity: #3c542e;
  --color--progress-circle__storke: rgba(125, 125, 125, 0.2);
  --color--editor__bg: rgba(34, 39, 43, 0.9);
  --color--editor__text: #fff;
  --color--editor__button_hover: rgba(255, 255, 255, 0.2);
  --color--editor__button_active: rgba(255, 255, 255, 0.4);
  --color--player__play: rgba(34, 39, 43, 0.1);
  --color--player__logo: rgba(255, 255, 255, 0.5)
}

Answer 4

[Максим]

:root{
  --firstcolor: blue;
}

header{
 background:var(--firstcolor);
}

https://jsfiddle.net/top5jb1f/ демо

Comments

[Сергей]

А если таких цветов штук 20, как тогда по названию seventeenthcolor понять, что оно такое? :)

[Максим]

Сергей, у меня был проект там почти 240 было таких переменных ... и там были не только цвета но и цифровые значения

Answer 5

[Arman]

У всех по разному скорее всего, у нас:

$first-color
$second-color
//..
$white
$black
$gray

т.е. основные цвета все равно нужно, т.к. часто меняются их оттенки, а вот основные цвета естественно часто меняются, но их редко больше 3

Answer 6

[Froggyweb]

У меня по умодчанию
$c-brand
C-text
C-title
C-link
C-inverse
Ну и т д от желаний