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

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

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

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

$mainBrandColor: #F060D6;
$secondaryFocus: #4C9FEB;
$fadedHighlight: #F1F3F4;

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

$orange: #F060D6;
$red: #BB532E;
$blue: #4C9FEB;

$gray-1: #eee;
$gray-2: #ccc;
$gray-3: #555;

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

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

$colors: (
  light: #ccc,
  dark: #333
);

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

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

:root {
  -c-orange: #F060D6;
  -c-red: #BB532E;
  -c-blue: #4C9FEB;

  -c-gray-1: #eee;
  -c-gray-2: #ccc;
  -c-gray-3: #555;
}

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

$color-primary:
$color-primary-dark:
$color-primary-light:

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

$primary:
$primaryLight: 
$primaryDark:

$secondary:
$secondaryLight:
$secondaryDark:

$neutralDarker:
$neutrayDark:
$neutral:
$neutralLight:
$neutralLighter: 
$neutralLightest:

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

$color-alpha: #12e09f;
$color-beta: #e01258;
$color-gamma: #f5f5f5;
$color-psi: #1f1f1f;
$color-omega: #fff;

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

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

$color-danube: #668DD1;
$color-cornflower: $6195ED;
$color-east-bay: $3A4D6E;

// theme1.scss
$color-alpha: $color-danube;
$color-bravo: $color-cornflower;
$color-charlie: $color-east-bay;

// theme2.scss
$color-alpha: $color-cornflower;
$color-bravo: $color-danube;
$color-charlie: $color-east-bay;

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

$table-row-background: lighten($color-background, 10%);

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

$ns-color__blue—dark: rgb(25,25,112); 
$ns-brand__color—primary: $ns-color__blue—dark;

// component.scss
$ns-component__color—text: $ns-brand__color—primary;

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

$light-green-100:
$light-green-200:
$light-green-300:
// etc
$light-green-900:
$light-green-A200:
$light-green-A400:

$deep-purple-100:
$deep-purple-200:
$deep-purple-300:
// etc
$deep-purple-A900:

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

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

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

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

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

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны