Организация цветовой палитры при помощи подхода Define and Use

При создании интерфейса мобильного приложения, сайта или любого другого стилизованного объекта обычно используется несколько основных цветов и довольно много оттенков каждого основного цвета. В сумме получаются десятки, бывает сотни уникальных цветов. Когда в CSS они раскиданы по разным местам проекта и никак не упорядочены, любое изменение в дизайне приведёт верстальщика к огромному количеству кропотливого труда.

При разработке приложений под Android эта проблема частично решена путём хранения всех цветов в одном файле colors.xml. Но и здесь по-прежнему не хватает толковой организации, потому что скидывание цветов в одну кучу тоже не выход, так как происходит повсеместное дублирование одних и тех же цветов, и для корректировки дизайна приложения в будущем придётся потрудиться при поиске множества оттенков одного и того же цвета:

Reedy Android - colors.xml

Поэтому я делаю простую вещь — выношу объявления цветов в отдельную область и группирую их оттенки:

Define and Use approach on Android

Поясню.
Здесь используется подход «Define & Use»:

  1. Все объявления цветов выносятся в начало файла (раздел define).
  2. Записи группируются по цвету. Например, все оттенки зелёного находятся в одной группе; все оттенки бежевого — в другой; тёмно-серый — в третьей; и тд. Порядок самих групп значения не имеет. Порядок цветов внутри группы так же неважен.
  3. Цветам даются безличные имена в соответствии с их группой. Как видите, имя цвета начинается с color, а дальше идёт уникальный трёхзначный номер. Каждой группе выделяется диапазон в 50 цифр, поэтому записи первой группы имеют номера от 000 до 049; вторая группа: 050-099; третья: 100-149; и тд.
  4. Теперь самое интересное. В разделе use находятся записи, которые и используются в конкретных местах проекта. В этих записях нет объявления цветов, а есть лишь ссылки на уже существующие цвета из раздела define.

Итак, вот что даёт такая организация цветов:

  1. Все цвета максимально сконцентрированы в одном месте — в разделе define.
  2. Более того, вы всегда точно знаете где искать конкретный оттенок какого-либо цвета — в своей группе.
  3. Захотели переделать тему приложения? Нет ничего проще!
  4. Появляется офигенная возможность оптимизации цветовой палитры. Вы сразу увидите слишком разросшиеся группы, в которых есть несколько практически одинаковых цветов, которые можно объединить в один без потери качества дизайна.

Что же касается CSS, то там, во-первых, нужно использовать какой-либо препроцессор типа LESS/SASS/Stylus. А во-вторых, проделать все те же манипуляции, что описаны выше. То есть сгруппировать все цвета в разделе define:

Colors in LESS CSS

Вообще, если проект не очень сложный, то обычно этого достаточно, и раздел use можно опустить, а данные константы сразу же использовать в нужных местах в вёрстке. Ведь в отличие от Android, где цвета могут быть указаны во многих типах файлов (layout, drawable, java и тд), в веб-проектах цвета используются только в CSS (в идеале), поэтому зачастую здесь не нужна такая же строгая организация. Тем не менее, если закладывать проекту серьёзное будущее, то лучше сразу организовать всё максимально удобно.