» » » Улучшите свой CSS с помощью этих 5 принципов

 

Улучшите свой CSS с помощью этих 5 принципов

Автор: admin от 6-11-2019, 13:20, посмотрело: 55

Улучшите свой CSS с помощью этих 5 принципов


Написание CSS — процесс достаточно простой и понятный, тогда почему для этого требуются еще какие-то принципы и best-practices?



По мере увеличения масштабов проекта и количества людей, работающего над ним, всё более и более явно начинают проявляться новые сложности, которые могут вызвать серьезные проблемы в будущем. Дублирование кода, сложные цепочки переопределения свойств, использование !important, оставшиеся и неиспользуемые CSS-свойства от удаленных HTML-элементов и так далее. Такой код сложнее читать и исправлять.



Написание CSS на профессиональном уровне сделает код более поддерживаемым, расширяемым, понятным и чистым. Давайте рассмотрим 5 простых и очень эффективным принципов, которые выведут ваш 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. Найти все теги на странице

  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

  • Гибкость и поддерживаемость с использованием принципа открытости/закрытости



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

Источник: Хабр / Интересные публикации

Категория: Веб-разработка, Game Development

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *