Как именовать переменные цвета в SASS

Как именовать переменные цвета в SASS

Ужас как не люблю именовать такие переменные в SASS. В процессе работы я всегда думаю, что нашел идеальное решение, но где-то на середине гребаного проекта, я понимаю, что сделал идеально тупой нейминг для всех переменных, обозначающих цвет. Вообще, с переменными такое происходит довольно часто. И это касается не только SASS, но и множества других языков. Люди думают: зачем заморачиваться с переменными, если их все равно никто не видит.
В действительности же правильная система именования позволит сохранить время, сохранить ваш код DRY и, что самое важное, сохранить ваш проект легким для понимания другими разработчиками.

ПЛОХОЕ ИМЕНОВАНИЕ

Что ж, начнем с плохого. Оглядываясь на несколько месяцев назад, я вижу, что во многих проектах, которыми я занимался, файл «variables.sсss» выглядел примерно следующим образом:

Что не так?

  • Такие имена переменных не дают никакой информации ни об их месте в иерархии, ни об их связи между собой.
  • Какой цвет основной? Красный? Синий? Может быть темно-красный?
  • Что случится, если наша цветовая схема изменится? Мы должны будем изменить $red во всех местах в соответствии с нашим новым цветом. В первую очередь это лишает смысла вообще существование переменных.
  • «Darker red»? Насколько темнее?

ЧУТЬ ЛУЧШЕ

Теперь мы обозначили некий контекст, намного понятнее стала связь между цветами. Мы имеем $primary-color и $secondary-color – два основных оттенка нашей схемы – и некоторые служебные, но относительно понятные переменные, типа $text-color.

НАМНОГО ЛУЧШЕ

Это метод, который я стал недавно применять для всех новых проектов.

Сначала мы определяем самые используемые цвета во внутренние переменные. Мне нравится добавлять в название таких переменных префикс x. Внутренние переменные выполняют единственную функцию, они освобождают глобальные переменные от каких-либо зависимостей. При этом глобальные переменные, благодаря «человеческим названиям», сразу дают понимание о том, какие цвета используются в проекте. А с HEX-кодами пускай разбирается машина.

Также в этом методе мы стали именовать актуальные цветовые переменные согласно шаблону «свойство-уровень». Это особенно полезно, когда кроме цветовых есть множество других переменных: типографика, отступы, медиа-запросы и т.д., благодаря чему мы можем легко находить нужную нам переменную в файле variables.scss поиском по названию свойства.

Заметим, что мы использовали слово «pallete» в названии переменной цвета, т.к. css свойство «color» предназначено лишь для определения цвета текста.

Перевод статьи: https://alexpate.uk/journal/naming-sass-color-variables/

Следить за обновлениями блога в: твиттере, фейсбуке, вконтакте

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

Ваш электронный адрес не будет опубликован.Обязательные для заполнения поля отмечены *