Зачем нужен БЭМ

блок отделяется двумя подчёркиваниями, а модификатор — двумя дефисами.

.block {}
.block--mod {}
.block__element {}
.block__element--mod {}

Для меня "ave" моментом помню стало, когда мне объяснили, что не обязательно соблюдать иерархию ноды. Это вообще, как я понял, один из самых путающих моментов для новичков.
Раньше я думал, что БЭМ это:

<div class="note">
    <div class="note__sidebar">
        <div class="note__sidebar__title">
            <img class="note__sidebar__title__icon"/>
        </div>
    </div>
</div>

И думал что это какая-то фигня, а потом я понял, что надо так:

<div class="note">
    <div class="note__sidebar">
        <div class="note__title">
            <img class="note__icon"/>
        </div>
    </div>
</div>

И я прозрел

<div class='my-panel'> <!-- .my-panel { display: flex } -->
  <!-- .my-panel__item { flex: 1 1 auto; margin: 10px; } -->
   <div class='my-panel__item ui-button'>
     <div class='ui-button__caption'>HI</div>
   </div>
</div>

Благодаря этому блоки можно легко менять местами, вкладывать друг в друга и не бояться конфликтов или влияния.

.button.is-disabled {}

<button class="button is-disabled" />

.button--disabled {}

<button class="button button--disabled" />

<button class="search__button search__button--primary">

<button class="search__button -primary">

Некоторые неверно понимали идею и появлялись даже элементы элементов.

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

[block1] {}
[block1~="mod"] {}
[block1_element1] {}
[block1_element1~="mod"] {}

[block2] {}
[block2~="mod"] {}
[block2_element2] {}
[block2_element2~="mod"] {}

[block1_element1_element2] {}
[block1_element1_element2~="mod"] {}

Более живой пример:

[header]{}
[header~="big"]{}
[header_query]{}

[suggest] {}
[suggest_option] {}
[suggest_option~="first"] {}

[header_query_option~="first"] {}

Ну и плюс ваши "уровни переопределения", только без лишней абстракции:

/* Первая подсказка в поле поиска на главной странице */
[serp_header_query_option~="first"] {}

Фактически получается каскад, но не на уровне ДОМ, а на уровне дерева блоков, и без проблем со специфичностью. Сами компоненты в доме могут располагаться друг относительно друга как угодно. Например, suggest может рендериться в body.

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

Мы БЭМ классы генерируем автоматически на основе:

1. Имени блока (mol_button, например).
2. Имени блока в контексте другого блока (блок mol_button, например, может иметь имя option в контексте mol_select, что даст селектор mol_select_option).
3. И так далее по дереву компонент.

Пример из жизни:

<input
    id="$mol_app_todomvc.Root(0).Task_row(1).Title()"
    mol_app_todomvc_task_row_title
    mol_string
    mol_view
    placeholder="Task title"
>

[mol_view] {
    /* Общие стили для всех блоков, на этот селектор можем повесить всякие css-reset */
}

[mol_string] {
    /* Стили для блоков ввода строки текста */
}

[mol_app_todomvc_task_row_title] {
    /* Стили для блоков ввода текста задач в конкретном ToDoMVC приложении */
}

Давно слышу про bem, но недавно впервые столкнулся с проектом, где бьют по рукам за :first-child, :last-child и прочие не бэмославные селекторы. Чувство дискомфорта не покидает с этим bem'ом. И даже не потому что надо писать километровые классы. Есть ощущение, что он отправляет нас куда-то в каменный век css 1. Ни тебе иерархий, ни первых/последних элементов, ни атрибутов. Только классы-классы-классы… Может Яндексу от этого и хорошо, но в среднем проекте это просто бессмысленное раздутие html, которое делает его плохо читаемым. При наличие аккуратного убористого css всё выглядит намного понятнее. Особенно если вы не хотите по пять раз на дню менять местами форму логина, блок спецпредложений, корзину заказа и новости.

К Яндексу в целом я отношусь хорошо, но Яндекс продвигает Яндекс. А bem — просто ещё один информационный повод с помощью которого проводится продвижение. Помнится, они когда-то и xslt продвигали. Я его даже учил и на нём писал. И где он сейчас? При том что возможности у него действительно большие, сложность в 99% проектов не оправдана. Надеюсь что и bem'овская эпидемия канет в Лету и мы снова сможем верстать трёхстраничные сайты просто на css 3.

P.S.: Открыл главную страницу Яндекса. Я просто оставлю это здесь:

<div class="i-bem popup dropdown-menu__popup dropdown-menu__popup dropdown-menu__popup_list_yes dropdown__popup dropdown__popup popup_domik_trigger popup_user_yes popup_theme_ffffff popup_autoclosable_yes popup_adaptive_yes popup_animate_yes" data-bem="{&quot;popup&quot;:{&quot;directions&quot;:{&quot;to&quot;:&quot;bottom&quot;,&quot;axis&quot;:&quot;right&quot;,&quot;offset&quot;:{&quot;top&quot;:-44,&quot;left&quot;:5}},&quot;disableoutside&quot;:&quot;yes&quot;}}" role="menu">...</div>

Вы правда хотите видеть такой html в своём проекте?