Все так делают после прочтения официальной документации))
Но все на много проще. Представь себе что у тебя в макете есть кнопки перехода на другие страницы.
Значит нужно что-то вроде
<a href='#'>Кнопка</a>, но оно не очень похоже на кнопку, поэтому:
- на первом уровне тебе нужно найти все общее между всеми кнопками в макете и создать элементарную bem сущность button.
<a class='button' href='#'>Кнопка</a>
// COMMON
.button{
display: inline-block;
padding: 0.5em 1em;
text-align: center;
text-decoration: none;
}
дальше, к примеру видим, что в макете есть кнопки двух размеров - большие и маленькие, соответственно:
// SIZE
<a class='button button_size_m' href='#'>Кнопка</a>
<a class='button button_size_l' href='#'>Кнопка</a>
// COLOR
<a class='button button_primary' href='#'>Кнопка</a>
<a class='button button_secondary' href='#'>Кнопка</a>
/* _MODS_ */
// SIZE
.button{
&_size_s{
font-size: 1rem;
}
&_size_l{
font-size: 2rem;
}
}
// COLOR
.button{
&_primary{
background: #607D8B;
color: #ffffff;
}
&_secondary{
background: #8BC34A;
color: #ffffff;
}
}
и на последнем уровне переопределения мы имеем большую кнопку по центру хедера, где ее родитель за руку ставит в то место, где она должна стоять))
<a class='button button_primary button_size_l header__button' href='#'>Кнопка</a>
// PARENT__BLOCK
.header{
&__button{
display: block;
width: 200px;
margin: 0 auto;
}
}
Далее примерно такой же подход ко всем остальным блокам.
определил общее > доопределил/переопределил варианты > при необходимости родителем расставил по местам и косишь как будто ты не верстальщик, а rонструкторо-собиральщик :)
codepen.io/kovbassa/pen/ObrqZv 
