Уже не первый раз задаю этот вопрос, но теперь решил подготовить более лучший вариант.
БЭМ подразумевает, что нельзя вкладывать вложенность внутрь вложенности. Долго ломал голову, но не могу реализовать этот пример из головы в БЭМ стиле. Однако сделал следующим образом:
<div class="section-reviews">
<div class="wrapper">
<div class="reviews-container"> <!-- контейнер отзывов -->
<div class="reviews-column-l"></div> <!-- менюшка слева, пока пусто -->
<div class="reviews-column-r"> <!-- контент справа, то есть сами отзывы находятся тут -->
<div class="reviews"> <!-- отзывы -->
<div class="review-item"> <!-- один отзыв -->
<div class="review-title">TEST</div>
<div class="review-slider"> <!-- слайдер в отзыве, не важно что здесь будет. просто пример вложенности -->
<div class="reviews-slider-item"> <!-- элемент слайдера -->
<div class="img"> <!-- в слайдере находится список картинок, просто для примера вложенности -->
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<span class="text"> <!-- а также текст -->
123123
</span>
</div>
</div>
<div class="review-quote"> <!-- блок цитаты отзыва, просто для примера -->
<div class="name">TEST</div>
<div class="author">TEST</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Здесь все отлично читается, а неотделяемые части. например, автор у цитаты, имеют короткие классы.
Как эту кашу можно было бы сделать в бэм в нормальном виде?
Посмотрел пример БЭМА на сайте яндекса auto.yandex.ru и совсем не впечатлило. Есть классы типа
.header2__item, хотя сам .header2 даже не встречается ни разу в документе.
Также увидел там такое
<div class="service__icon service-icon__images service-icon__images_color_56"></div>
Это пугает ) Почему оно является иконкой блока сервис. И в тоже время картинками блока service-icon
Простой
Простой