What is the correct way to name variables in CSS?

Question

css

Variables in css (including in preprocessors) are great, but what is the right way to name them? Suppose you need to set the background color of the page (we will use scss):

$white: #fff;

body {
  background-color: $white;
}

It seems that everything looks cool, by the name of the variable it is clear what it declares. But then suddenly you need to change the color, for example, to grayish:

$white: #f1f1f1;

body {
  background-color: $white;
}

Now everything is not so rosy: the variable remains $white, but the color is already different, and changing this unfortunate variable in all files where it is declared is somehow irrational.
So, we come to the conclusion that it is necessary to name the color variables somehow more universally. $white becomes $color-light. But then suddenly this light shade needs to be changed to a diametrically opposite one - dark. Again a vicious circle. What are your thoughts on this.

Answer 1

2 blocks of variables.
In the first, the colors themselves.

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

it is also possible with the name of the colors, for example, green and light green: green and light-green (this happens when there are a lot of colors in the layout)
In the second block, there are already colors for their intended purpose

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

Answer 2

You can peek at the peek-a-boo, on the site you can change the light and dark theme and the main color. There is good code, and the names given to the variables perfectly reflect their purpose.

Longcode

: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 3

:root{
  --firstcolor: blue;
}

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

https://jsfiddle.net/top5jb1f/ demo

Answer 4

Everyone is different, most likely we have:

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

those. primary colors are still needed, because. their shades often change, but the primary colors naturally often change, but there are rarely more than 3 of them

Answer 5

I have by default
$c-brand
C-text
C-title
C-link
C-inverse
Well, etc from desires