Как вы именуете переменные для цветов?

Как вы именуете переменные для цветов?

Когда я впервые попробовал Sass на проекте, первое, что я захотел сделать, — создать переменные для всех цветов. Я уже знал, что следует избегать имен, подобных .header-blue-left-bottom, потому что цвет и положение этого элемента могут измениться. Лучше делать упор на сущность вещей, нежели на их внешний вид.

Поэтому я попытался сделать имена цветов семантическими:

Но очень быстро я обнаружил, что не могу их запомнить. Приходилось постоянно подсматривать туда, где я их определил. Это быстро надоело и я вернулся к привычному виду:

Это гораздо более интуитивное представление, если, конечно, не считать некоторых негативных побочных эффектов. Но в конце концов, все это находится в CSS и предназначено только для разработчиков, так что проблема не такая уж и большая.

Также я пытался хранить цвета в мапе:

Но единственная определенная цель такой структуры — очищение глобального пространства имен. Вероятно, это не стоит хлопот, связанных с необходимостью все время получать цвет из мапа (map-get). Пространства имен, такие как $-c-orange, вероятно, более простой подход для этого.

Большей частью я придерживаюсь этого подхода в Sass (просто-используй-названия-цветов). Он также прекрасно может существовать в виде пользовательских свойств CSS:

Можно добавить немного больше конкретики, сохраняя при этом абстрактность, как советует Marcus Ortense:

А вот подход Mike Street с базовыми цветами и их вариациями:

Недавно Silvestar Bistrović писал об использовании абстрактной греческой нумерации:

Я раньше использовал такой подход для медиа-запросов, так как нумерация, похоже, имеет смысл (маленькие числа — это маленькие экраны, большие числа — большие экраны). Это удобно для оттенков цвета, почему бы и с обычными числами не попробовать?

Еще один популярный подход — совмещение имени цвета с абстрактными именами. Так делает Geoff и John Carroll:

Вы можете сами определить необходимую степень подробности и даже добавить варианты вне палитры:

Stuart Robson даже добавляет немного БЭМа:

В Material Desing используются значения, которые похожи на font-weight! У вас есть базовый диапазон цветов + некоторые альтернативы:

А как вы выбираете имена для переменных цветов?

Полезные ссылки

Если вы получаете удовольствие, отделяя солнечно-желтый цвет (sunny yellow) от подсолнечно-желтого (sunflower yellow), то загляните сюда или сюда:

See the Pen Color Namer by Maneesh (@maneeshc) on CodePen.0

Существует даже плагин Sublime Text для преобразования форматов цветов в любой синтаксис:

Оригинал: What do you name color variables?

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *