Why it is better to impose in accordance with BEM - practical examples

About BEM (the methodology for writing CSS from Yandex - Block __ Modifier ← ← is the most correct recording of decryption) now you can hear at every step. The case turned out to be good and rolled around the world. Yandex even got into W3C (whether it is connected or not - I don’t know, but I hope that yes - [ in fact, not ] ).

I think many who have not tried it yet, but have read the BEM description , are asking a fair question: “what is the practical use of this whole action?” In fact, despite the very detailed description, it is rather difficult to catch the main “chip”. Of course, a lot of advantages have been described and the overall feeling of the methodology is positive, and it seems that it would seem like it would not be bad to try, but it lacks something concrete. Right here is an example on a living something. Here is my website, this layout is not according to BEM, why should I change everything? Especially, if we take into account the fact that BEM, in principle, brushes aside all selectors except classes, surely during this time so many smart men in the W3C did not realize that everything is so wrong?

Behind this, I will take the liberty to cite several examples with which you (of course, if you are somehow connected with the layout) encounter, I am not afraid of this word, every day. And what will change in such situations if the layout was originally performed in BEM.
')

A little bit about BEM

In short, the whole BEM system fits into 2 theses (principle / rule):

1. There is no selector other than class - i.e. no styles hung on tags, IDs, etc., only classes.
2. — .. .class1 .class2{ display: none; }, 1 () (/ /). [ ]

. — .

— ( , ) .

( )

- . . .

1

. , . :

.content a{
  color: green;
}

, — AJAX . ajax-link — CSS . 2 , . a.ajax-link, css .

, content ID — .

#content a{
  color: green;
}

«» id — #content .ajax-link, .. id , , .

1pro

.. :

#buy-form fieldset .buttons input.submit{
  color: green;
}

, , — - , #buy-form.

2

:

.content h1{
  font-size: 18px;
}
.content h1 a{
  color: green;
}
.content h1 a span{
  text-decoration: none;
}

, h1 h3 div, ( — , — ). .. 1 HTML 3 .

( ) CSS / .

-, , .. .
-, .

, .

1 1pro

( 1) id ( 1pro) :

.content__link{
  color: green;
}

: content link [ _].

. .. . .content__link CSS , :

.content__link{
  color: green;
}
.content__link_type_ajax{
  color: red;
  text-decoration: none;
}

: .

.. :

<a class="conten__link content__link_type_ajax" href="#"> </a>

1pro - :

.buy-form__submit{
  color: green;
}

. , , ( ), . , HTML , . , , -. CSS ( ). , .

2

, — :

.content-header{
  font-size: 18px;
}
.content-header__link{
  color: green;
}
.content-header__link-text{
  text-decoration: none;
}

, — 1 HTML . …

. … . , + Twitter Bootstrap . , . . . — . ( , ..) — ( ) , .

, .

• - — — - . , .
• ( ). ( ), .

PS: vithar.

.