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

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Блок

  • Блок - функционально независимый компонент страницы, который может быть использован множество раз.

Имя класса для блока отвечает на вопрос: "Что это?", записывается маленькими буквами на англ. языке, а при наличии нескольких слов разделяется тире: "title", "logo", "menu","search-form", , "button". В HTML блоки представлены атрибутом class. В CSS по БЭМ не рекомендуется использовать селекторы по тегам или id. Блоку не задаются отступы и позиционирование, чтобы блок был независим, и его можно было повторно использовать, никак не влияя на другие элементы страницы. Создавать блок нужно, когда фрагмент кода используется в разметке в нескольких местах или может использоваться на других страницах сайта, при этом не зависит от других компонентов на странице. Блоки можно вкладывать в другие блоки с абсолютно любой вложенностью. Блок может не иметь собсвенных элементов, а содержать только другие блоки:

<header class="header">
    <!-- Вложенный блок `icon` -->
    <div class="icon"></div>
    <!-- Вложенный блок `form` -->
    <form class="form"></form>
</header>

Элемент

  • Элемент - составная часть блока, которая не может использоваться в отрыве от блока.

Имя класса для элемента также отвечает на вопрос: "Что это?", записывается при помощи двух нижних подчеркиваний после имени класса блока имяКлассаБлока__имяКлассаЭлемента: "menu__item","search-form__input", "nav__link","about__title". Создавать элемент нужно, когда фрагмент не будет использоваться самостоятельно на странице без родительского блока. Элемент — всегда часть блока и не должен использоваться отдельно от него! Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы. Элементы можно вкладывать в другие элементы с абсолютно любой вложенностью, но элемент всегда должен быть частью блока, а не другого элемента:

<form class="search-form">
    <div class="search-form__wrap">
        <input class="search-form__input">
        <button class="search-form__button">Найти</button>
    </div>
</form>

Модификатор

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

Имя класса для модификатора отвечает на вопрос: "Какой?Как выглядит?Какое состояние?", записывается после имени класса блока и имени элемента имяКлассаБлока__имяКлассаЭлемента_модификатор : "list__item_active", "menu_hidden". С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее.

<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form class="search-form search-form_focused">
    <input class="search-form__input">
    <!-- Элемент `button` имеет булевый модификатор `disabled` -->
    <button class="search-form__button search-form__button_disabled">Найти</button>
</form>

Микс

Миск - это приём, позволяющий использовать и блоки и элементы в одном объекте. Умно от Яндекса - Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле. Миксы позволяют совмещать поведение и стили нескольких сущностей без дублирования кода, создавать семантически новые компоненты интерфейса на основе существующих.

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

Такой подход позволяет задать внешнее позиционирование при помощи элементов header__search-form, header__menu, а сами блоки search-form menu оставить универсальными для дальнейшего использования в документе (независимость блоков).

БЭМ-сущность

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

Методология БЭМ от Яндекса -> ru.bem.info

Фрилансер по жизни про БЭМ -> www.youtube.com

#basics #bem
openImgPic