Нормально ли писать такие классы в БЭМ?

Question

[Дима Долготер]

.testimonials__slider__item__text__testimonial

Answer 1

[Владимир Проскурин]

Нельзя https://ru.bem.info/methodology/quick-start/#%D0%9...

Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

Comments

[Дима Долготер]

<div class="testimonials-slider">
  <div class="  testimonials-item d-flex justify-content-around">
  <img src="img/testimonial1.png" class="testimonials-item__img   ">
   <div class="testimonials-item__text  ">
    
   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus enim facilis fugiat illum ipsam laudantium libero non reprehenderit totam ullam? <br>
   		<b>- Lorem ipsum</b>
   	</div>   </div>
  
  </div>

примерно так?

[Толстый Лорри]

SpiderPigAndCat, Примерно так:

<div class="testimonials-slider">
    <div class="testimonials-slider__item">
        <img src="img/testimonial1.png" class="testimonials__item-img">
        <div class="testimonials__item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Doloribus enim facilis fugiat illum ipsam laudantium libero non
reprehenderit totam ullam?<br><b>- Lorem ipsum</b>
        </div>
    </div>
</div>

Либо так, если вы хотите выделить айтем отдельным блоком

<div class="testimonials-slider">
    <div class="testimonials-slider__item">

        <div class="image-block">
            <img src="img/testimonial1.png" class="image-block__picture">
            <div class="image-block__caption">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Doloribus enim facilis fugiat illum ipsam laudantium libero non
    reprehenderit totam ullam?<br><b>- Lorem ipsum</b>
            </div>
        </div>
        
    </div>
</div>

PS Классы, описывающие стили (вроде justify-content-around) БЭМ рекомендует избегать, ибо это вредит идее разделения данных и стилей. Особенности поведения настраиваются через классы-модификаторы (block--modified и block__element--modified).