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

Написание CSS действительно просто и понятно, так почему же при написании CSS нужны принципы и передовые методы?

По мере увеличения масштабов проекта и увеличения числа людей, работающих над проектом, проблемы становятся все более очевидными и могут вызвать серьезные проблемы в будущем. Устранение проблем может стать сложнее, дублированный код, сложные цепочки переопределения и использование ! Important оставшийся / неиспользуемый код (удаленные элементы или функции), код, который трудно читать, и т. Д.

Написание CSS на профессиональном уровне сделает код CSS более удобным в обслуживании, расширяемым, понятным и чистым. Мы собираемся рассмотреть пять простых и очень эффективных принципов, которые выведут ваш CSS на новый уровень.

Принцип именования

«В информатике есть только две сложные вещи: аннулирование кеша и присвоение имен объектам». — Фил Карлтон

Правильное именование и структурирование селекторов CSS — это первый шаг к тому, чтобы сделать CSS более читабельным, структурированным и чистым. Установление правил и ограничений в вашем соглашении об именах делает ваш код стандартизированным, надежным и легким для понимания.

Вот почему такие концепции, как BEM (блочный элемент-модификатор), SMACSS (масштабируемая и модульная архитектура для CSS) и OOCSS (объектно-ориентированный CSS) популярны среди многих разработчиков внешнего интерфейса.

Принцип низкой специфичности

Переопределение свойств 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 с низкой специфичностью в сочетании с БЭМ или одним из других принципов именования, упомянутых в предыдущем разделе, мы можем создать производительный, гибкий и понятный код.

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

Давайте перепишем наш предыдущий пример, используя БЭМ и сохраняя низкую специфичность.

 
 .card  {}


 .card__title  {}

 .blogList__image  {}

 .blogList__title - избранное  {}

 .blogList__img - специальный  {}
 

Вы можете видеть, насколько эти селекторы просты, понятны и могут быть легко переопределены и расширены при необходимости. А сохраняя их на низком уровне (один класс), мы гарантируем оптимальную производительность и гибкость.

Принцип DRY

Принцип DRY (не повторяйся) можно также применить к CSS. Дублированный код в CSS может вызвать раздувание кода, ненужные переопределения, снизить ремонтопригодность и т. Д. Эту проблему можно решить, правильно структурировав код и имея высококачественную документацию.

Storybook — отличный бесплатный инструмент, который позволяет вам создавать обзор доступных компонентов внешнего интерфейса и писать высококачественную документацию.

 
 .warningStatus  {
   набивка :  0,5 rem ;
   font-weight : жирный;
   цвет :  # eba834 ;
}

 .errorStatus  {
   набивка :  0,5 rem ;
   font-weight : жирный;
   цвет :  # eb3d34 ;
}

 .form-errorStatus  {
   заполнение :  0,5рем   0   0   0 ;
   font-weight : жирный;
   цвет :  # eb3d34 ;
}
 

Давайте реорганизуем код, чтобы он следовал принципу DRY.

 
 .status  {
   набивка :  0,5 rem ;
   font-weight : жирный;
}

 .status - предупреждение  {
   цвет :  # eba834 ;
}

 .status - error  {
   цвет :  # eb3d34 ;
}

 .form__status  {
   заполнение :  0,5рем   0   0   0 ;
}
 

Принцип единоличной ответственности

Используя принцип единой ответственности в нашем CSS, мы можем гарантировать, что наши классы CSS легко расширяются и переопределяются. Давайте посмотрим на следующий пример.

   .button  {
   набивка :  1рем   2рем ;
   font-size :  2rem ;
   border-radius :  0,2rem ;
   цвет фона :  # eb4934 ;
   цвет :  #fff ;
   font-weight : жирный;
}

 .button - вторичный  {
   border-radius :  0 ;
   font-size :  1rem ;
   цвет фона :  # 888 ;
}
 

Мы видим, что если мы хотим расширить класс .button с помощью .button - secondary мы делаем множество переопределений для достижения того, что нам нужно, когда мы только хотим , чтобы применить другой цвет фона и сохранить стили по умолчанию.

Проблема в том, что наш класс .button выполняет несколько ролей:

• Устанавливает макет ( отступ )
• Устанавливает типографику ( font-size font-weight )
• Устанавливает представление ( цвет цвет фона радиус границы )

из-за этого наши классы CSS очень трудно расширять и комбинировать с другими классами CSS. Помня об этом, давайте будем использовать БЭМ и OOCSS для улучшения нашего CSS.

 
 .button  {
   набивка :  1рем   2рем ;
   font-weight : жирный;
   цвет :  #fff ;
}


 .button - radialBorder  {
   border-radius :  0,2rem ;
}

 .button - большой  {
   font-size :  2rem ;
}

 .button - primary  {
   цвет фона :  # eb4934 ;
}

 .button - вторичный  {
   цвет фона :  # 888 ;
}
 

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

Принцип открытия / закрытия

программные объекты (классы, модули, функции и т. Д.) Должны быть открыты для расширения, но закрыты для модификации.

В предыдущих примерах мы уже использовали принцип открытия / закрытия. Все новые функции и параметры необходимо добавлять путем расширения. Давайте посмотрим на этот пример.

   .card  {
   обивка :  1рем ;
}

 .blog-list   .card  {
   padding :  0,5em   1rem ;
}
 

Селектор .blog-list .card имеет несколько потенциальных проблем:

• Некоторые стили могут применяться только в том случае, если элемент .card является потомком элемента .blog-list .
• Стили принудительно применяются к элементу .card если они размещены внутри элемента .blog-list что может привести к неожиданным результатам и ненужным переопределениям.

Давайте перепишем предыдущий пример:

   .card  {
   обивка :  1рем ;
}

 .blogList__card  {
   padding :  0,5em   1rem ;
}
 

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

Заключение

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

• Стандартизированные наименования и структура, а также улучшенная читаемость за счет использования BEM, OCSS и т. Д.
• Повышенная производительность и структура за счет использования селекторов с низкой специфичностью.
• Уменьшение раздувания кода и повышение качества кода с помощью принципа DRY
• Гибкость и ремонтопригодность за счет использования принципа открытия / закрытия
• и т. Д.

---

Эти статьи заправлены кофе. Так что если вам нравится моя работа и вы считаете ее полезной, подумайте о покупке мне кофе! Я был бы очень признателен.

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