«Называть вещи сложно» — гласит аксиома разработки программного обеспечения, и CSS не является исключением. Вот несколько собранных мыслей, связанных с именованием пользовательских свойств CSS.
Я собираюсь использовать термины «переменная» и «настраиваемое свойство» как взаимозаменяемые, поскольку по сути это одно и то же с точки зрения того, как их называть.
Отказ от ответственности: то, что следует ниже, не является евангелием. Для меня CSS — очень поэтичный язык, существует множество разных способов выразить одни и те же концепции. Мне нравятся эти соглашения, но я не считаю их единственным правильным способом именования переменных в CSS. Если вы не согласны с каким-либо из моих пунктов ниже, я хотел бы узнать вашу точку зрения.
Регистр или нотация
При именовании переменных первое, о чем следует поговорить, — это какой регистр использовать.
В программировании есть несколько видов написании переменных. Рассмотрим некоторые из них.
Верблюжья нотация
Первое слово пишется со строчной буквы, следующие — с заглавной, разделителей между составными частями нет. Торчащие посреди итогового названия заглавные буквы напомнили кому-то горбы верблюда — так возникло название нотации. Пример: calculateElephantWeight
Нотация Паскаля
Тоже самое, что и верблюжья нотация только первая буква тоже заглавная. Пример: CalculateElephantWeight
Змеиная нотация
Слова разделяются символами подчёркивания — они как бы ползут по строке, в результате получается длииинное, как змея, название. Пример: calculate_elephant_weight
Шашлычная нотация (kebab case, kebab-case)
В этой нотации слова разделяют символом дефиса. При некоторой доле фантазии можно представить, что слова при этом как бы насаживают на шампур — вот и получается шашлык (kebab). Пример: calculate-elephant-weight
Плоская нотация
Чтобы получить наименование в этом стиле, нужно просто записать слова рядом без пробелов, все буквы каждого слова должны быть строчными. Пример: calculateelephantweight
Какую нотацию выбрать?
Рассмотрите возможность сочетания нотации кебаба с верблюжьей нотацией.
На мой взгляд, это соглашение с первого взгляда проясняет, каково фактическое имя переменной и каковы метаданные, закодированные в этом имени.
:root {
/* Harder to scan: */
--system-control-accent-color: blue;
--system-focus-ring-color: cadetBlue;
--system-label-color-quaternary: lightGray;
--system-heading-title-font-size: 1.5rem;
--system-subheading-font-size: 1.2rem;
--system-caption-font-size: 0.65rem;
/* Easier to scan: */
--system-color-controlAccent: blue;
--system-color-focusRing: cadetBlue;
--system-color-labelQuaternary: lightGray;
--system-fontSize-headingTitle: 1.5rem;
--system-fontSize-subheading: 1.2rem;
--system-fontSize-caption: 0.65rem;
}то позволяет среднему сегменту всегда быть типом значения, а последнему сегменту — конкретным именем переменной. На мой взгляд, такое последовательное размещение дефисов облегчает быстрое чтение пользовательских свойств.
