In a nutshell, what is BEM?

Question

css

In a nutshell, in human language, I ask you to tell me about BEM. I didn't find much on the internet.
As I understand it, this applies to the frontend? Or am I wrong?
In general, the following questions are of interest:
1. Why is it needed?
2. Where is it applied?
3. Is it necessary for a layout designer to know it?

Answer 1

Well, there are presentations on Yandex itself. Well in...

Answer 2

BEM is such a layout methodology from Yandex. It involves splitting pages into separate semantic blocks (comment, post, title, footer, form, input, etc.). Each block can be made up of other blocks. The main idea is to increase the reusability of already written blocks as much as possible, for which modifiers are used. Plus, BEM means avoiding cascading styles because they prevent reuse.
For example, there are two different headings on a page (for example, separately in the article, and separately in the sidebar). How is everyone used to doing it? there is a heading code:
And we put these headings in the text of the article and in the sidebars:

<article class="article">
    <h1 class="header">Заголовок</h1>
    <p>Текст текст текст</p>
</article>
<aside class="incut">
    <h1 class="header">Заголовок</h1>
    <p>Текст текст текст</p>
</aside>

Then we usually use a cascade to style the title in the sidebar:

.header {font-size: 2em; padding-bottom: 1.5em;}
.incut .header {text-decoration: italic;}

All is well, but now we can't just move these sidebar heading styles to another place, because these styles are attached to the sidebar (incut class). Plus, what's worse, if an element has several different styles associated with these cascading rules, then it becomes very time consuming to transfer such a look to another place. And also, because of the greater specificity of cascading styles, they are more difficult to "kill" with a new style.
BEM suggests abandoning cascading styles and creating separate modifier styles:

<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;}

The larger the project, the more profitable it is to use such a methodology. On small and medium projects, BEM can be redundant. Although there was an article habrahabr.ru/company/yandex/blog/234905 about using it in small projects.
BEM can be used on its own by manually creating all the elements and blocks. But there is an extensive toolkit for BEM that helps to create a library of elements and blocks.
Well. It turned out not in a nutshell, but it’s impossible to describe BEM in less detail, IMHO.

Answer 3

In a nutshell - this is a sect

Answer 4

Can in three - Block Element Modifier :D

Answer 5

It's just a contextless layout and a carriage
of pathos))) In fact, there are enough Modifier Elements:

.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;
}

well, this is convenient to use closure-stylesheets

Answer 6

In a nutshell: a block on the page (and in the code on the server), which can include the same (and similar) blocks with any level of nesting, using a single data manipulation structure.

Answer 7

Here is a summary of BEM for myself - Download in pdf format