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

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

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

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

Методологии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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