🕸 Обучение веб-разработке: именование классов и идентификаторов, методология БЭМ

Введение

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

Методологии

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

Наиболее известны среди них следующие:

OOCSS

Характеризуется разделением контейнеров и содержимого с помощью «объектов» CSS.

SMACSS

Руководство по стилю написания CSS с пятью категориями правил.

SUITCSS

Структурированные имена классов и значимые дефисы.

ATOMICCSS

Разбиение стилей на атомарные или неделимые части.

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

До БЭМа в каждом проекте, я придумывал что-то новенькое, а потом открывал код годичной давности и удивлялся – какой идиот это написал?

Методология БЭМ

БЭМ – это сокращение от составляющих методологии: блока, элемента и модификатора.

Блок – независимый компонент веб-страницы, который можно использовать повторно. Его название задается через атрибут class и должно характеризовать смысл, отвечая на вопрос: «что это?». Оно не может обозначать состояние («какой?»). Например, меню – menu, или ссылка – link, а не синий – blue, или маленький – small.

Примеры названий блоков:

        <!-- Верно. Семантически правильный блок-->
<div class="header"></div>
<!-- Неверно. Описывается внешний вид -->
<div class="blue-text"></div>
    

Правила БЭМ не позволяют задавать позиционирование блока или его внешнюю геометрию в виде отступов и влияющих на размеры границ. Также не рекомендуется использовать селекторы по тегам или id. Необходимо обеспечить возможность повторного использования блока или его переноса с места на место. Допускается любая вложенность, включая вложенность блоков друг в друга.

Элемент – не имеющая отдельного значения и семантически привязанная к своему родителю часть блока. К нему применимы те же правила именования, при этом название элемента отделяется от названия блока двумя подчеркиваниями (__).

Пример:

        <!-- Блок “sidebar” -->
<div class=" sidebar ">
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul class=" sidebar__list ">
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li class=" sidebar__item ">first</li>
	</ul>
</div>
    

Здесь также можно использовать любую вложенность, но надо помнить, что элемент всегда является частью блока и не может быть частью другого элемента:

        <!-- Так неправильно -->
<div class=" sidebar ">
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul class=" sidebar__list ">
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li class=" sidebar__list__item ">first</li> <!— не верно -->
</div>
    

Блок создается для повторного использования кода, а потому он не должен зависеть от других компонентов страницы. Если же участок кода не может быть использован без блока-родителя, мы именуем его как элемент. Элементы – это внутренняя реализация блока, но они должны быть не у всех блоков.

Модификатор – маркер, который отделяется от имени блока или элемента двойным дефисом (--), либо одним нижним подчеркиванием (_).

Невозможно одновременно использовать два одинаковых модификатора с разными значениями.

Пример:

        <!-- Блок “sidebar” -->
<div class=" sidebar ">
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul class=" sidebar__list ">
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li class=" sidebar__item sidebar__item--focused sidebar__item--lite">first</li>
	</ul>
</div>
    

Согласно методологии БЭМ, модификатор нельзя использовать самостоятельно в отрыве от выделяемого блока или элемента. Он должен изменять вид, поведение или состояние компонента, а не заменять его.

Пример:

        <!-- Верно. “Элемент ` sidebar__item` имеет модификатор `lite` -->
<!-- Блок “sidebar” -->
<div class=" sidebar ">
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul class=" sidebar__list ">
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li class=" sidebar__item sidebar__item--lite">first</li>
	</ul>
</div>
    

        <!-- Неверно. Отсутствует модифицируемый класс ` sidebar__item ` -->
<!-- Блок “sidebar” -->
<div class=" sidebar ">
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul class=" sidebar__list ">
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li class="sidebar__item--lite">first</li>
	</ul>
</div>
    

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

Пример:

        <!-- Блок `header` -->
<div class="header">
	<!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
	<div class="search-form header__search-form"></div>
</div>
    

Здесь мы сгруппировали поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Его можно использовать в любом другом окружении, потому что у блока нет никаких специфических отступов и границ. Составление независимых блоков разными способами и их разумное повторное использование сокращает объем кода CSS, который вам придется поддерживать.

Заключение

Созданная в Яндекс методология БЭМ помогает решать проблемы веб-разработки, отвечая на следующие вопросы:

· Как облегчить рефакторинг?

· Как сделать ваш код самодокументируемым и информативным?

· Как повторно использовать участки вашего кода и не допустить влияния его компонентов друг на друга?

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