При создании интерфейса мобильного приложения, сайта или любого другого стилизованного объекта обычно используется несколько основных цветов и довольно много оттенков каждого основного цвета. В сумме получаются десятки, бывает сотни уникальных цветов. Когда в CSS они раскиданы по разным местам проекта и никак не упорядочены, любое изменение в дизайне приведёт верстальщика к огромному количеству кропотливого труда.
При разработке приложений под Android эта проблема частично решена путём
хранения всех цветов в одном файле colors.xml
. Но и здесь по-прежнему не хватает
толковой организации, потому что скидывание цветов в одну кучу тоже не выход,
так как происходит повсеместное дублирование одних и тех же цветов, и для
корректировки дизайна приложения в будущем придётся потрудиться при поиске множества
оттенков одного и того же цвета:
Поэтому я делаю простую вещь — выношу объявления цветов в отдельную область и группирую их оттенки:
Поясню.
Здесь используется подход «Define & Use»:
- Все объявления цветов выносятся в начало файла (раздел define).
- Записи группируются по цвету. Например, все оттенки зелёного находятся в одной группе; все оттенки бежевого — в другой; тёмно-серый — в третьей; и тд. Порядок самих групп значения не имеет. Порядок цветов внутри группы так же неважен.
- Цветам даются безличные имена в соответствии с их группой. Как видите, имя
цвета начинается с
color
, а дальше идёт уникальный трёхзначный номер. Каждой группе выделяется диапазон в 50 цифр, поэтому записи первой группы имеют номера от 000 до 049; вторая группа: 050-099; третья: 100-149; и тд. - Теперь самое интересное. В разделе use находятся записи, которые и используются в конкретных местах проекта. В этих записях нет объявления цветов, а есть лишь ссылки на уже существующие цвета из раздела define.
Итак, вот что даёт такая организация цветов:
- Все цвета максимально сконцентрированы в одном месте — в разделе define.
- Более того, вы всегда точно знаете где искать конкретный оттенок какого-либо цвета — в своей группе.
- Захотели переделать тему приложения? Нет ничего проще!
- Появляется офигенная возможность оптимизации цветовой палитры. Вы сразу увидите слишком разросшиеся группы, в которых есть несколько практически одинаковых цветов, которые можно объединить в один без потери качества дизайна.
Что же касается CSS, то там, во-первых, нужно использовать какой-либо препроцессор типа LESS/SASS/Stylus. А во-вторых, проделать все те же манипуляции, что описаны выше. То есть сгруппировать все цвета в разделе define:
Вообще, если проект не очень сложный, то обычно этого достаточно, и раздел use можно опустить, а данные константы сразу же использовать в нужных местах в вёрстке. Ведь в отличие от Android, где цвета могут быть указаны во многих типах файлов (layout, drawable, java и тд), в веб-проектах цвета используются только в CSS (в идеале), поэтому зачастую здесь не нужна такая же строгая организация. Тем не менее, если закладывать проекту серьёзное будущее, то лучше сразу организовать всё максимально удобно.
