Однажды я наткнулся примерно на следующий фрагмент кода: Для меня нижнее подчёркивание — это прямая отсылка к старому соглашению, которое использовалось в JS для создания «внутренних» свойств объекта. Я удивился, что в CSS так тоже можно! Как говорится в спецификации CSS Custom Properties for Cascading Variables Module Level 1, название пользовательского свойства — это специальный CSS-идентификатор <dashed-ident>, начинающийся с --. Одновременно к нему применимы правила синтаксиса CSS-идентификатора <ident>, описанного в стандарте CSS Syntax Module Level 3. По правилам мы можем использовать символы , дефис -, подчёркивание _ и другие ASCII-символы, если их экранировать.  Поэтому предыдущий фрагмент кода абсолютно правильный. А самое интересное, что следующий фрагмент кода тоже! Честно говоря, если бы меня спросили на собеседовании, корректный ли этот код, то я бы точно сказал нет. Предыдущий пример взорвал мне мозг, но он не единственный.  Однажды я потратил несколько часов, чтобы найти ошибку. Браузер не определял значение для пользовательского свойства. Для объяснения я сократил тот код до следующего:  Вы думаете, цвет фона у элемента body стал красным? Вот я также думал. А он не был красным. Я стал инспектировать код и увидел, что ошибки нет. Но по какой-то причине значение red не применялось для пользовательского свойства --color. После медитации над кодом я решил просто скопировать --color и вставить его для свойства background-color. Код заработал.  Оказывается, дело в том, что при именовании пользовательских свойств мы можем использовать как латинские символы, так и кириллические. И случайно в строке --color: red я напечатал первую с на английском языке, а в строке background-color: var(--сolor) уже на русском. С точки зрения браузера это два разных пользовательских свойства, и поэтому значение не применялось.  Одно дело, когда перепутал один символ, но следующий код также будет рабочим: Фон у элемента body будет красный. Честно, я не знаю, почему браузеры могут обрабатывать символы на русском языке. Я пытался нагуглить, почему код работает. Ничего не нашёл. Если вам известен ответ, то, пожалуйста, поделитесь в комментариях. Мы рассмотрели нюансы при именовании пользовательских свойств, но кроме них есть ещё моменты, которые сбивают с толку при работе с ними. В качестве первого примера рассмотрим код, в котором передано некорректное значение 10px через пользовательское свойство --not-a-background-color для свойства background-color. Как думаете, какое итоговое значение будет во вкладке Computed? Можно подумать, что lightgoldenrodyellow, но нет. Правильный ответ — transparent. В стандарте сказано, что если при замене пользовательского свойства получается некорректное значение для свойства, то браузеры вместо него будут использовать корректное. Оно вычисляется в зависимости от свойства. Если оно наследуемое, то значение передаётся в результате наследования. Если нет, используется начальное (initial) значение.  В предыдущем примере после замены var(--not-a-background-color) браузеры определяют, что значение 10px некорректное. Далее они проверяют, можно ли унаследовать значение. Свойство background-color не наследуется, поэтому подставляется начальное значение, т. е. transparent. А если бы у нас было свойство, которое можно наследовать, например font-size, то значение было унаследованное. При работе с пользовательскими свойствами важно помнить, как они работают внутри свойств, которые являются краткой формой для других свойств, т. е свойства padding, margin, border и т. п. В качестве примера я определил свойство border и передал только два значения: Согласно стандарту, в случае отсутствия хотя бы одного значения браузеры не могут найти все составляющие свойства. В результате они не могут применить определённые нами значения. Так произошло в моём примере. В devTools мы увидим, что значения переданы, но свойство border не применилось.  Пользовательские свойства часто сравнивают с переменными из любого языка программирования, но это не так! Для примера создам градиент с помощью следующего кода:
 Браузеры отобразят его от начального цвета green до конечного blue. Но что будет, если для элемента с классом container создать «переменную»  --color-one со значением red? Если бы пользовательские свойства были переменными, как в языках программирования, то градиент стал бы от начального цвета red до конечного blue. Но браузеры не сохраняют значения пользовательских свойств! Они только передают их.  По этой причине мы не можем переопределять значение, которое используется в родительском правиле. Так что градиент по-прежнему будет от начального цвета green до конечного blue. Посмотрите, пожалуйста, на следующий фрагмент кода. Как думаете, каким цветом будет текст? Красный? Я тоже так ответил в первый раз, и это неправильный ответ. Браузеры отобразят текст зелёным, и вот почему. Пользовательские свойства — это полноценные свойства, поэтому если при объявлении значений для них используется !important, то он имеет приоритет только среди пользовательских свойств с таким именем. Таким образом, в примере при объявлении пользовательского свойства --text-color !important создаёт приоритет для него, а не для свойства color. А поскольку второе правило объявлено ниже по коду, то оно будет иметь приоритет по правилам специфичности. А если мы будем использовать !important не при объявлении значения пользовательского свойства, а для свойства color, то приоритет будет уже у первого правила, поэтому текст уже будет красным. Наследование является одним из фундаментальных принципов в CSS, и оно может сбить с толку, когда дело доходит до пользовательских свойств. Рассмотрим пример, где я использую ключевое слово inherit. Какой размер текста будет у элемента с классом child? Для правильного ответа нужно помнить, что пользовательские свойства — самодостаточные свойства, и для них также работает механизм наследования. В нашем примере в строке --main-font-size: inherit с помощью ключевого слова inherit произойдёт наследование от пользовательского свойства --main-font-size, а не от свойства font-size. После замены функции var() браузеры подставят 50px для свойства font-size, и в итоге получим font-size: 50px для элемента с классом child. Мы рассмотрели наследование от родительского пользовательского свойства, а что будет, если его не указывать?  В этом случае браузеры не могут получить значение с помощью ключевого слова inherit из строки --main-font-size: inherit, поэтому они ничего не передадут. В этом случае будет использовано значение по умолчанию inherit, с помощью которого браузеры передадут значение 30px от свойства font-size элемента с классом parent. Мне хочется верить, что я помог больше узнать про пользовательские свойства, и вы будете использовать их без опаски. Если у вас был какой-то кейс, не описанный мной, то напишите, пожалуйста, о нём в комментариях. Мне будет интересно прочитать. Помогаю узнать больше про Accessibility, HTML, CSS