БЭМ vs SMACSS: Сравнение CSS методологий

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

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

В этой статье мы сравним две широко используемых CSS методологии: Блок, Элемент, Модификатор (БЭМ) и Scalable and Modular Architecture for CSS (SMACSS). Мы рассмотрим их сходство и то, как они в конечном итоге сочетаются друг с другом.

Что такое БЭМ

БЭМ — это просто соглашение об именах, упрощающее чтение, понимание, работу и масштабирование фронтэнд кода. Он надёжный и ясный.

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

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

Чтобы использовать БЭМ, необходимо следовать соглашению об именовании!

• Б означает блок. Блок — это отдельная сущность. Примером может служить компонент карточка.
• Э означает элемент. Элемент — это часть блока, семантически связанная с ним и не имеющая самостоятельного значения.
• М означает модификатор. Это простой флаг, позволяющий изменить внешний вид или поведение элемента, или блока.

Давайте посмотрим, как всё это объединяется в примере ниже:

<div class="card card-current">
  <div class="card__img">
    <img src="#" alt="#" />
  </div>
  <div class="card__desc">
    <h3>Card Title</h3>
    <p>Some description for our card element.</p>
  </div>
  <div class="card__buttons">
    <button class="card__button card__button-danger">Delete</button>
    <button class="card__button card__button-success">Confirm</button>
  </div>
</div>

В методологии БЭМ блоки имеют только имя класса. Вы можете это видеть в примере выше, .card. Элемент являющиеся часть блока, имеют префикс имени блока, за которым следует двойное подчёркивание __ и имя элемента. Вы можете увидеть это в приведённом выше примере с .card__img, .card__desc, .card__buttons и .card__button.

Наконец, модификаторы имеют префикс имени блока или элемента, который они изменяют, в нашем примере .card-current, .card__button-success и .card__button-danger.

Что такое SMACSS и как он работает

SMACSS — это набор правил для категоризации набора правил CSS, чтобы сделать кодовую базу CSS более организованной, чистой, масштабируемой и модульной. Следуя методологии SMACSS, мы можем разделить наборы правил CSS на пять категорий:

• Base / Базовые
• Layout / Макет
• Module / Модуль
• State / Состояние
• Theme / Тема

Base / Базовые

Все наборы правил CSS, которые придают HTML-элементам стиль по умолчанию, называются базовыми правилами. Вместо использования селекторов класса или идентификатора мы используем селекторы элементов, атрибутов, псевдоклассов, дочерних элементов или одноуровневых селекторов для определения этих наборов правил. Иногда мы называем эти правила стиля сбросами, поскольку они сбрасывают стили HTML-элементов по умолчанию.

Layout / Макет

На основе повторного использования стили макета можно разделить на основные и второстепенные стили. Основными компонентами являются те, которые определяют структуру страницы, например, header, footer, боковое меню, body и так далее. Макет страницы состоит из нескольких основных компонентов, называемых правилами макета. Модули, с другой стороны, являются второстепенными компонентами, которые находятся внутри основных компонентов.

Module / Модуль

Модули — это компоненты пользовательского интерфейса, которые разделены и отличаются друг от друга. Обычно они находятся в компонентах макета, но иногда и внутри компонентов других модулей. На них не влияют другие модули или макеты пользовательского интерфейса. Примерами могу быть, аккордеон, модальное окно или диалоговое окно, или карусель.

State / Состояние

Наборы CSS правил использующиеся для указания стилей для различных состояний компонента. По сути, это переопределяет стиль модуля пользовательского интерфейса по умолчанию. Например, компонент всплывающего сообщения может быть в успешном или неуспешном состоянии, и мы можем отобразить его красным или зелёным цветом, чтобы отобразить это. Состояния аналогичны модификаторам в методологии БЭМ.

Theme / Тема

Наборы CSS правил для тем предназначены для создания стилей специфичных для тем. Свойства темы в первую очередь переопределяют цвета и изображения по умолчанию.

БЭМ vs SMACSS: Сравнение опыта разработчика

Чистый код

БЭМ следует соглашению об именовании, сообщая разработчикам, как давать имена класса элементам. Это обеспечивает хороший способ структурирования нашего HTML-документа и таблицы стилей. Хотя имена классов могут быть очень длинными, они остаются чистыми и читабельными.

SMACSS также поддерживает кодовую базу чистой. Его правила категоризации позволяют узнать, где правила стиля должны быть объявлены чётким и лаконичным образом. А его соглашение об именовании делает HTML-документ чистым и удобочитаемым, поскольку имена классов минимальны.

Обе методологии хороши, когда нужно убедиться, что кодовая база чистая, удобочитаемая и удобная для навигации.

Файловая структура

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

В методологии БЭМ есть три подхода к организации каталога проекта:

• Nested
• Flat
• Flex

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

Неважно, насколько велик проект; если вы следуете методологии SMACSS, у вас будет та же структура папок, которую мы видели в разделе обзора SMACSS выше. Он использует правила категоризации SMACSS и определяет, как мы структурируем папку проекта.

В этой методологии ваш файл модулей обычно становится самым большим по мере роста проекта. Это может затруднить поиск модулей, но я считаю, что простое сочетание клавиш Ctrl+F или Command+F, если вы работаете на Mac, может помочь легко и быстро найти модули.

На данный момент я бы не сказал, что между ними есть явный победитель. Я предпочитаю искать в одном файле, а не во всём каталоге.

Время разработки

Если вы не используете препроцессор CSS, такой, как Sass или Less, разработка может быть немного медленнее, если вы используете методологию БЭМ. Необходимость объявлять имена классов в соответствии с соглашением об именовании может занять много времени. Вот что я имею в виду:

<div class="card card-current">
  <div class="card__img"></div>
  <div class="card__desc"></div>
  <div class="card__buttons">
    <button class="card__button card__button-danger">Delete</button>
    <button class="card__button card__button-success">Confirm</button>
  </div>
</div>

Обратили внимание, какие длинные имена классов? Если бы мы нацеливались на эти элементы с помощью обычного CSS, это могло бы быть немного озадачивающим и трудоёмким. Вот что я имею в виду:

.card{...}
.card-current{...}
.card__img{...}
.card__desc{...}
.card__button{...}
.card__button-danger{...}

Это можно решить, если мы используем CSS препроцессор — в данном случае Sass — поэтому наш код выглядел бы так:

.card{
  &__img{...}
  &__desc{...}
  &__buttons{...}
}

Нам всё ещё нужно писать имена классов в HTML элементах, поэтому для каждого блока будет много префиксов имени блока к его элементам и модификаторам.

В основе SMACSS лежит категоризация. На самом деле она не даёт вам строгого соглашения об именовании, она просто говорит вам, где разместить похожие правила стиля, и даёт разработчикам гибкость в именовании элементов. Советует ставить перед селекторами префикс в соответствии с их категоризацией, например, правила стиля макета можно записать как .l-example.

Тем не менее SMACSS не рекомендует следовать одному и тому же правилу именования модулей, поскольку количество модулей может расти экспоненциально вмести с проектов. Рекомендуется ставить перед связанными элементами в модуле их базовое имя. Например, .base будет модулем, а .base-element будет элементом внутри модуля.

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

Масштабируемость и поддержка

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

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

Кроме того, БЭМ позволяет структурировать код, чтобы вы могли создавать повторно используемые компоненты, а также изменять внешний вид и поведение компонентов в соответствии с контекстом, в который они будут помещены, используя модификаторы. Создание нового файла для каждого блока или компонента по мере того, как проект начинает расти, может быть слишком сложным и не способствует масштабируемости.

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

Заключение

В этой статье мы рассмотрели две широко используемые методологии CSS: БЭМ и SMACSS. Независимо от того, какую из них вы решите использовать в своих проектах, вы получите преимущества более структурированного CSS и пользовательского интерфейса. На мой взгляд, ни один из них не затмевает другого; это действительно зависит от личных предпочтений.