Школа
Веб-разработка

Как правильно называть цвета в дизайн‑системе?

Привет!

Подскажите, пожалуйста, как правильно называть цвета в дизайн‑системе (app и web), чтобы было современно, гибко, удобно и дальше масштабировать?

Саша Ирхин
27 мая 2021
👁 9261  
Веб-разработка

Как правильно называть цвета в дизайн‑системе?

Привет!

Подскажите, пожалуйста, как правильно называть цвета в дизайн‑системе (app и web), чтобы было современно, гибко, удобно и дальше масштабировать?

Саша Ирхин
27 мая 2021
👁 9261  
Василий Половнёв
Технический директор бюро
Полезно
 16
16
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Саша!

Советую называть цвета последовательно:

Плохо
// Вразнобой: то color, то colour; то link, то a.
// Непоследовательно: то color primary, то primary color. 
--colorPrimary // ЦСС-переменная в браузере
$primary-colour // Переменная в исходном коде стилей
key color // В документации

--link-color
$aColor
Хорошо
// Однообразно: переменные, представляющие собой один и тот же цвет, называются одинаково. 
// Последовательно: переменные названы с учетом соглашения «тип цвета + Color». 
--primaryColor // В браузере
$primaryColor // В исходном коде
primary color // В документации

--linkColor
$linkColor

И семантично, используя в названии не сам цвет, а его предназначение:

Плохо
--blueColor
--grayColor

Хорошо
--primaryColor
--placeholderColor

Для вдохновения советую взглянуть на систему именования цветов у Эпла и Гугла:

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 16
16
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы