Улучшаем читаемость CSS с помощью пользовательских свойств

Улучшаем читаемость CSS с помощью пользовательских свойств

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

Убираем повторяющийся код

DRY расшифровывается как «Don’t Repeat Yourself» или «не повторяйся». Хорошая цель, так как это сэкономит не только набранный текст, но и время на поиск, замену и отладку, если вы вдруг захотите что-то поменять. Проще говоря, такой подход сокращает затраты на обслуживание кода.

Разберем пример. Ниже представлен плохой CSS код с множеством повторений:

Если нужно сменить цвет темы, необходимо изменить значение первых трех селекторов. Цвет подписи трогать нельзя.

Так как же могут помочь пользовательские свойства CSS? Вы устанавливаете значение один раз и потом используете его много раз! Давайте создадим пользовательское свойство —theme-color:

Сохранив цвет темы в пользовательскую переменную, изменения можно вносить в одном месте, и все значения будут обновляться. Мало того, так вы еще добавили семантику в CSS: если раньше этот цвет сложно было связать с темой, то теперь это явно прописано.

Цвет текста подписи также можно занести в пользовательскую переменную:

Мы только начали!

Отложите калькулятор

Если вы читали введение в пользовательские CSS свойства, вы должны знать, что их можно использовать с функцией calc() для выполнения вычислений в браузере.

Разберем пример сетки:

Улучшаем читаемость CSS с помощью пользовательских свойств

Если вы уже видели этот шаблон или хорошо знаете боксовую модель CSS, скорее всего, вы поймете, что этот код создает макет с ячейками, чьи стороны равны 16px, и разделителями шириной в 16px между ячейками. Чисто по CSS коду это понять сложно, и мы не указываем на то, что действительно важно.

С точки зрения дизайна важным аспектом здесь является пространство вокруг ячеек в 16px. Мы хотим все настроить с учетом конечного результата, а не промежуточных вычислений. Сами по себе эти вычисления неважны, а задавать их отдельно слишком долго.

Пользовательские свойства и calc() помогут нам:

Так мы работает с осмысленными концепциями вычислений, а не результатами этих вычислений. Так намного легче будет понять код в будущем.

На деле, эту идею можно расширить на весь макет вашего сайта, выравнивая элементы по сетке:

В примере выше мы с помощью промежуточных вычислений делаем код еще более понятным.

Замечание: в Safari / WebKit на данный момент наблюдаются проблемы с промежуточными вычислениями такого типа. Проблема была решена в Safari Technology Preview, есть вероятность, что ее пофиксят и в следующем релизе Safari 10.1.

Читаемые изменения

До сих пор мы говорили про значения, которые задаем в документе один раз и потом повторно везде используем без масштабных изменений. Однако пользовательские свойства становятся еще полезнее, когда есть значения, которые необходимо менять в определенных обстоятельствах.

Разберем пример. Простой сетчатый макет на flexbox:

Сразу не поймешь, что здесь происходит. Давайте разберем код. По умолчанию для маленьких экранов строится сетка с одной колонкой. По мере увеличения экрана сетка расширяется до 3 и 6 колонок. Как и в примере из предыдущего раздела, у нас тут ячейки со стороной 16px и разделители в 16px.

Из-за сложности вычислений, нам нужно было добавить пару комментариев, чтобы улучшить читаемость. Но если использовать пользовательские свойства:

Теперь все вычисления выполняются в одном месте. Осталось лишь изменить значения пользовательских свойств во всех медиа запросах. Неважно, знаете вы код или нет, так он стал намного понятнее и более читаемым. И как бонус, так вы не ошибетесь при наборе в вычислениях в новых медиа запросах, и это не приведет к неожиданным результатам!

Замечание: код выше может быть слишком сложным для CSS препроцессоров. Имейте это в виду, если используете что-то подобное и получаете неожиданный результат!

Теперь, когда вы знаете, как сделать свой CSS более читаемым и простым в обслуживании, мы узнаем, как JavaScript может выиграть от пользовательских свойств.

Источник: //sgom.es/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: