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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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