BEM против SMACSS: Сравнение методологий CSS

Автор: Нельсон Майкл ✏️

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

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

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

• Что такое BEM?
• Что такое SMACSS и как она работает?
  • База
  • Макет
  • Модуль
  • Состояние
  • Тема
• BEM против SMACSS: Сравнение опыта разработчиков
  • Чистый код
  • Файловая структура
  • Время разработки
  • Масштабируемость и поддержка

Что такое BEM?

BEM — это простое соглашение об именовании, которое облегчает чтение, понимание, работу и масштабирование кода фронтенда. Она надежна и понятна.

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

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

Чтобы использовать BEM, нам нужно лишь следовать его соглашению об именовании!

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

Давайте посмотрим, как все это сочетается в примере ниже:

<div class="card card-current">
  <div class="card__img">
    <img src="#" alt="#" />
  </div>
  <div class="card__desc">
    <h3>Card Title</h3>
    <p>Some descriptiton 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>

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

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

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

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

1. База
2. Макет
3. Модуль
4. Состояние
5. Тема

База

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

Макет

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

Модуль

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

Состояние

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

Тема

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

BEM против SMACSS: Сравнение опыта разработчиков

Чистый код

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

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

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

Структура файлов

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

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

• Вложенный
• Плоский
• Flex

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

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

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

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

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

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

<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 намного быстрее, чем в BEM, поскольку вам не нужно писать такие длинные селекторы классов.

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

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

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

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

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

Заключение

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

Не перегружает ли ваш фронтенд процессор пользователей?

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

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