Начните использовать кастомные свойства CSS для улучшения читабельности и для упрощения обслуживания в будущем.
Заметка: Я пропущу некоторые fallback’и в var() поисках этой статьи, но помните, вы всегда должны делать поиски настолько хорошими, как это возможно, следуя паттерну:
.foo {/* Для браузеров, которые не понимают кастомных свойств */color: black;/* `black` used as fallback if `--color` isn't defined */color: var(--color, black);}
Придерживайтесь правила (DRY)
DRY значит, не повторяйте себя, что является хорошей практикой, так как удерживает не только от лишних нажатий на клавиши, но и от поиска, замены и дебаггинга чего бы там ни было в вашем коде. Проще говоря, это уменьшает затраты на обслуживание.
Сделаем небольшое исследование. К примеру плохой CSS со многими повторениями:
.button {background-color: gray;}.title {color: gray;}.image-grid > .image {border-color: gray;}.caption {color: gray; /* Так же должен быть серым, независимо от темы */}
Если вы захотите поменять цвет темы, вам придется изменить три селектора и постараться не затронуть цвет текста в классе caption.
Как нам могут помочь кастомные свойства CSS? Просто установите значение один раз и используйте его где необходимо в коде! Давайте создадим кастомное свойство --theme-color
:root {--theme-color: gray;}.button {background-color: var(--theme-color);}.title {color: var(--theme-color);}.image-grid > .image {border-color: var(--theme-color);}.caption {color: gray;}
Установив цвет темы в кастомном свойстве, вы можете сделать единичное изменение и все значения изменятся. Кроме того вы добавили семантику в ваш CSS: было не ясно, было ли это какое-то конкретное свойство, которое меняло цвет темы допустим в серый, теперь мы можем это видеть.
По сути, мы можем создать кастомное свойство и для текста caption:
:root {--theme-color: gray;--caption-text-color: gray;}.button {background-color: var(--theme-color);}.title {color: var(--theme-color);}.image-grid > .image {border-color: var(--theme-color);}.caption {color: var(--caption-text-color);}
Мы только начинаем!
Отложите в сторону калькулятор
Как вы уже знаете, если вы читали представление кастомных CSS свойств, вы можете использовать кастомные свойства вместе с calc(), для запуска калькулятора в браузере.
Давайте рассмотрим следующий пример:
.image-grid {padding: 8px;}.image-grid > .image {margin: 8px;}
Если вы раньше видели этот паттерн, то вы хорошо знаете модель CSS box, и можете без проблем определить разметку шириной в 16px и расстояние между ячейками в 16px. Для CSS не становится ясным, что мы делаем акцент на важных для нас аспектах.
С точки зрения дизайна, здесь важно расстояние в 16px вокруг граней и между клетками. Нам нужно распределить все в конечном результате, а не только промежуточный расчет; эти расчеты не имеют смысла сами по себе, и ставить их отдельно, значить добавить нам лишнюю работу.
С помощью кастомных свойтв и calc(), мы можем все упростить:
:root {--image-grid-spacing: 16px;}.image-grid {padding: calc(var(--image-grid-spacing) / 2);}.image-grid > .image {margin: calc(var(--image-grid-spacing) / 2);}
Таким образом, мы работаем со значимой концепцией лежащей за рассчетами, нежели с результатами этих расчетов, и мы упрощаем дальнейшую разработку в будущем.
Можно даже перенести эту идею на разметку всего сайта и разместить все согласно сетке страницы:
:root {--page-grid: 4px;--image-grid-spacing: calc(4 * var(--page-grid));}.title {text-size: calc(5 * var(--page-grid));}.paragraph {margin: calc(4 * var(--page-grid));}.image-grid {padding: calc(var(--image-grid-spacing) / 2);}.image-grid > .image {margin: calc(var(--image-grid-spacing) / 2);}
В примере выше мы делаем промежуточные расчеты для улучшения нашего кода.
Заметка: Safari / WebKit в данный момент имеют некоторые проблемы с промежуточными расчетами. Проблема была устранена в Safari Technology Preview, поэтому есть шансы, что она будет исправлена в следующем релизе, Safari 10.1.
Изменения читабельности
До сих пор мы были сосредоточены на значениях, которые устанавливаются в файле, чтобы многократно их использовать, без каких-либо серьезных изменений. Но кастомные свойста особенно полезны, когда вы хотите изменить какие-либо значения в конкретных случаях.
Рассмотрим пример. Мы имеем обычную grid разметку, сделанную с помощью flexbox:
.image-grid {display: flex;flex-wrap: wrap;padding: 8px;}.image-grid > .image {margin: 8px;width: calc(100% - 16px);}@media (min-size: 600px) {/* 3 images per line */.image-grid > .image {width: calc(100% / 3 - 16px);}}@media (min-size: 1024px) {/* 6 images per line */.image-grid > .image {width: calc(100% / 6 - 16px);}}
Не сразу понятно, что здесь происходит, поэтому давайте разберемся. По умолчанию, в маленьком разрешении, мы имеем grid с одной колонкой. С увеличением разрешения, мы получаем 3 колонки, а затем 6. Как и в предыдущем примере, мы имеем расстояние между клетками в 16px.
Из-за сложности расчетов, мы вынуждены прокомментировать некоторые строки, для лучшей читабельность. Если мы используем кастомные свойства:
:root {--grid-spacing: 16px;--grid-columns: 1;}.image-grid {display: flex;flex-wrap: wrap;padding: calc(var(--grid-spacing) / 2);}.image-grid > .image {margin: calc(var(--grid-spacing) / 2);width: calc(100% / var(--grid-columns) - var(--grid-spacing));}@media (min-size: 600px) {:root {--grid-columns: 3;}}@media (min-size: 1024px) {:root {--grid-columns: 6;}}
Теперь, когда все расчеты сделаны в одном месте, все что осталось заменить в строке медиа — это кастомное свойтво значения. Это намного чище и читабельнее, не важно как хорошо вы знакомы с кодом. Как бонус, делая все таким образом, вы не рискуете совершить ошибку в расчетах в новой строке медиа!
Заметка: пример выше может быть слишком продвинутым для CSS препроцессоров. Пожалуйста, имейте это ввиду, если вы вдруг получите результат, которого не ожидали!
Теперь, когда вы знаете как сделать свой код CSS немного читабельнее и легче для изменений, мы рассмотрим как даже JavaScript код может улучшиться в исполнении, когда мы используем кастомные свойства. Увидимся на следующей неделе!
Статью перевел timurziev. Оригинал на Sgom.es доступен по ссылке.