Написание CSS — процесс достаточно простой и понятный, тогда почему для этого требуются еще какие-то принципы и best-practices?
По мере увеличения масштабов проекта и количества людей, работающего над ним, всё более и более явно начинают проявляться новые сложности, которые могут вызвать серьезные проблемы в будущем. Дублирование кода, сложные цепочки переопределения свойств, использование !important, оставшиеся и неиспользуемые CSS-свойства от удаленных HTML-элементов и так далее. Такой код сложнее читать и исправлять.
Написание CSS на профессиональном уровне сделает код более поддерживаемым, расширяемым, понятным и чистым. Давайте рассмотрим 5 простых и очень эффективным принципов, которые выведут ваш CSS на новый уровень
Принцип именования
«В компьютерных науках существует только две сложные вещи: инвалидация кеша и именование» – Фил Карлтон
Правильное именование и структурирование ваших CSS-селекторов является первым шагом к тому, чтобы сделать ваш CSS более удобочитаемым, структурированным и чистым. Определение правил и ограничений в соглашении об именовании делает ваш код стандартизированным, надежным и простым для понимания.
Именно поэтому такие концепции как BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) и OOCSS (Object Oriented CSS) популярны среди многих frontend-разработчиков.
Принцип низкой специфичности
Переопределение CSS-свойств является очень полезным, но в более сложных проектах всё может достаточно быстро выйти из-под контроля. Цепочки переопределения могут стать очень длинными и сложными, что вынудит вас использовать
!important для решения проблем специфичности, в которых можно легко потеряться при отладке кода или добавлении новых функций/* Селектор с низкой специфичностью */
.card {}
/* Селекторы с высокой специфичностью */
.card .title {}
.blog-list .card img {}
.blog-list .card.featured .title {}
#js-blog-list .blog-list .card img {}
Браузер и специфичность
Одно из преимуществ следования принципу низкой специфичности — это производительность. Браузеры парсят CSS справа налево.
Давайте взглянем на следующий пример:
.blog-list .card img {}
Браузеры «прочитают» селектор следующим образом:
- Найти все теги <img> на странице
- Из них выбрать элементы, которые являются потомками класса .card
- Из них выбрать элементы, которые являются потомками класса .blog-list
Вы можете видеть, как селекторы с высокой специфичностью влияют на производительность, особенно когда нам нужно глобально выбрать общий элемент типа div, img, li, и т.п.
Использование одинакового уровня специфичности
Используя селекторы CSS-классов с низкой специфичностью в сочетании с методологией BEM или одним из других принципов именования, упомянутых в предыдущем разделе, мы можем создать производительный, гибкий и легкий для понимания код.
Зачем использовать CSS-классы? Мы хотим придерживаться одинакового уровня специфичности, оставаясь гибкими и способными выбирать несколько элементов. Селекторы элементов и селекторы по id не обеспечивают нужной нам гибкости.
Давайте перепишем предыдущий пример используя BEM и придерживаясь низкой специфичности.
/* Селектор с низкой специфичностью */
.card {}
/* Замена селекторам с высокой специфичностью */
.card__title {}
.blogList__image {}
.blogList__title--featured {}
.blogList__img--special {}
Вы можете видеть, насколько эти селекторы проще, понятнее и могут быть легко переопределены и расширены, если потребуется. И сохраняя их специфичность на низком уровне (единственный класс), мы гарантируем оптимальную производительность и гибкость.
Принцип DRY
Принцип DRY (Don`t repeat yourself, рус. не повторяйся) также может быть применён к CSS. Дублирование в CSS может привести к раздутию кода, ненужными переопределениям, ухудшению поддерживаемости и т.п. Эта проблема может быть исправлена с помощью надлежащего структурирования кода и наличия качественной документации.
Storybook — это отличный бесплатный инструмент, позволяющий вам создавать обзор доступных компонентов веб-интерфейса и писать качественную документацию.
/* Без использования принципа DRY */
.warningStatus {
padding: 0.5rem;
font-weight: bold;
color: #eba834;
}
.errorStatus {
padding: 0.5rem;
font-weight: bold;
color: #eb3d34;
}
.form-errorStatus {
padding: 0.5rem 0 0 0;
font-weight: bold;
color: #eb3d34;
}
Давайте проведём рефакторинг кода, следуя принципу DRY
/* С использованием принципа DRY */
.status {
padding: 0.5rem;
font-weight: bold;
}
.status--warning {
color: #eba834;
}
.status--error {
color: #eb3d34;
}
.form__status {
padding: 0.5rem 0 0 0;
}
Принцип единственной ответственности
Используя принцип единственной ответственности в CSS, можно быть уверенным, что CSS-классы являются легко расширяемыми и переопределяемыми. Давайте рассмотрим следующий пример
.button {
padding: 1rem 2rem;
font-size: 2rem;
border-radius: 0.2rem;
background-color: #eb4934;
color: #fff;
font-weight: bold;
}
.button--secondary {
border-radius: 0;
font-size: 1rem;
background-color: #888;
}
Видно, что если потребуется расширить класс .button с помощью модификатора .button--secondary, придётся выполнить много переопределений, хотя мы хотим всего лишь поменять цвет фона, сохранив стили по умолчанию.
Проблема в том, что наш класс .button имеет несколько ролей:
- Определяет блочную модель (padding)
- Определяет типографику (font-size, font-weight)
- Определяет внешний вид (color, background-color, border-radius)
Это усложняет расширение CSS-класса и его объединение с другими классами. Учитывая это, давайте улучшим наш CSS с помощью BEM и OOCSS.
/* Общие стили */
.button {
padding: 1rem 2rem;
font-weight: bold;
color: #fff;
}
/* Расширения стиля */
.button--radialBorder {
border-radius: 0.2rem;
}
.button--large {
font-size: 2rem;
}
.button--primary {
background-color: #eb4934;
}
.button--secondary {
background-color: #888;
}
Мы разбили стили нашего button на несколько классов, которые могут использоваться для расширения базового класса. При необходимости мы можем применить модификаторы и добавить новые по мере изменения дизайна или добавления новых элементов
Принцип открытости/закрытости
Программные сущности (классы, модули, функции и т. п.) должны быть открыты для расширения, но закрыты для изменения»
Мы уже использовали принцип открытости/закрытости в предыдущих примерах. Все новые функции и опции должны добавляться путём расширения. Давайте рассмотрим этот пример.
.card {
padding: 1rem;
}
.blog-list .card {
padding: 0.5em 1rem;
}
Селектор .blog-list .card имеет несколько потенциальных проблем:
- Некоторые стили могут быть применены только если элемент .card является дочерним по отношению к элементу .blog-list
- Стили принудительно применяются к элементу .card, если он помещен в элемент .blog-list, что может привести к неожиданным результатам и ненужным переопределениям
Давайте перепишем предыдущий пример:
.card {
padding: 1rem;
}
.blogList__card {
padding: 0.5em 1rem;
}
Мы исправляем проблему, если используем одиночный селектор класса. С этим селектором мы можем избежать непредвиденных эффектов и не используем условно вложенные стили.
В заключение
Мы рассмотрели примеры, как применяя эти несколько простых принципом можно существенно улучшить подход к написанию CSS:
- Стандартизированное именование и структура, лучшая удобочитаемость с использованием BEM, OCSS, и т.д.
- Улучшенная производительность и структура с использованием селекторов с низкой специфичностью
- Снижение раздутия и улучшенное качество кода с использованием принципа DRY
- Гибкость и поддерживаемость с использованием принципа открытости/закрытости
Благодарю, что нашли время, чтобы прочитать эту статью. Если она показалась вам полезной, можете поделиться ею или оставить комментарий.
