Написание 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 {}

Браузеры «прочитают» селектор следующим образом:

  1. Найти все теги <img> на странице
  2. Из них выбрать элементы, которые являются потомками класса .card
  3. Из них выбрать элементы, которые являются потомками класса .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
  • Гибкость и поддерживаемость с использованием принципа открытости/закрытости

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