В двух словах, что такое БЭМ?

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

В общем интересуют вот какие вопросы:

1. Зачем он нужен?
2. Где применяется?
3. Обязательно ли его знать верстальщику?
  • Вопрос задан
  • 12461 просмотр
Решения вопроса 3
redfieldone
@redfieldone
Старый , лысый и без денег.
Комментировать
kid-programmer
@kid-programmer
1. Чтоб верстать правильно.
2. В web проектах.
3. Да.

ИМХО... В полном обьеме, как предлогает сам Яндекс, БЭМ избыточен и мало пригоден кроме как в самом Яндексе. Можно ознакомится со всеми хорошими практиками верстания типа oocss.org , и выбрать из них лучшее и подходящще для себя и создать свой БЭМ)
Ответ написан
VitalySorokin
@VitalySorokin
тружусь во благо «ТМ»
В двух словах вряд-ли получится, так как, сама аббревиатура, расшифровывается как «Блок Элемент Модификатор».
Знать верстальщику не обязательно, но как одну из практик попробовать стоит.
А зачем нужна и где применяется, можно узнать на официальном сайте bem.info или в сообществе
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 6
lexxpavlov
@lexxpavlov
Программист, преподаватель
БЭМ - это такая методология вёрстки от Яндекса. Она подразумевает разбиение страниц на отдельные смысловые блоки (комментарий, пост, заголовок, футер, форма, инпут и т.п.). Каждый блок может состоять из других блоков. Основная идея - как можно больше повысить возможность повторного использования уже написанных блоков, для чего используются модификаторы. Плюс, БЭМ подразумевает отказ от каскадных стилей, потому что они препятствуют повторному использованию.
Например, на странице есть два разных заголовка (например, отдельно в статье, и отдельно во врезке). Как все привыкли делать это? есть код заголовка:
<h1 class="header">Заголовок</h1>
И мы ставим эти заголовки в текст статьи и во врезки:
<article class="article">
    <h1 class="header">Заголовок</h1>
    <p>Текст текст текст</p>
</article>
<aside class="incut">
    <h1 class="header">Заголовок</h1>
    <p>Текст текст текст</p>
</aside>

Тогда обычно мы используем каскад, чтобы стилизовать заголовок во врезке:
.header {font-size: 2em; padding-bottom: 1.5em;}
.incut .header {text-decoration: italic;}

Всё хорошо, но теперь мы не можем просто перенести эти стили заголовка во врезке в другое место, потому что эти стили привязаны именно ко врезке (классу incut). Плюс, что ещё хуже, если к элементу привязано несколько различных стилей, образующихся подобными каскадными правилами, то перенести такой внешний вид в другое место становится очень трудоёмко. А также, из-за большей специфичности каскадных стилей, их сложнее "перебить" новым стилем.
БЭМ предлагает отказаться от каскадных стилей и создавать отдельные стили-модификаторы:
<article class="b-article">
    <h1 class="b-article__header">Заголовок</h1>
    <p>Текст текст текст</p>
</article>
<aside class="b-article b-article__incut">
    <h1 class="b-article__header b-article__header_incut">Заголовок</h1>
    <p>Текст текст текст</p>
</aside>


.b-article__header {font-size: 2em; padding-bottom: 1.5em;}
.b-article__header_incut {text-decoration: italic;}


Чем больше проект, тем выгоднее использование подобной методологии. На маленьких и средних проектах БЭМ может быть избыточен. Хотя вот была статья habrahabr.ru/company/yandex/blog/234905 про использование в маленьких проектах.

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

Ну вот. Получилось не в двух словах, но менее подробно качественно описать БЭМ не получится, имхо.
Ответ написан
Комментировать
TMGLUK
@TMGLUK
UX-дизайнер
В двух словах - это секта
Ответ написан
Комментировать
talgautb
@talgautb
front-end developer
Могу в трех - Блок Элемент Модификатор :D
Ответ написан
Комментировать
@constantant
Это просто бесконтекстная вёрстка и вагон пафоса)))

На самом деле достаточно Элемент-модификаторов:
.menu,
.menu-list{
   position:relative;
}
.menu-list{
   overflow:hidden;
   margin:0 -10px;
}
.menu-item,
.menu-item-current{
   display:block;
   float:left;
   margin:0 10px;
}
.menu-item{
   color:#000;
}
.menu-item-current{
   color:#f00;
}

ну и в этому удобно применять closure-stylesheets
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
В двух словах: блок на странице (и в коде на сервере), который может в себя включать такие же (и подобные) блоки с любым уровнем вложенности, использующий единую структуру манипуляции данными.
Ответ написан
Комментировать
DimaLepel
@DimaLepel
Вот сделал для себя выжимку по БЭМ - Скачать в формате pdf
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы