Правильно ли названы классы по БЭМ?

Question

[campus1]

Здравствуйте!
Столкнулся с проблемой как правильно называть более вложенные классы.
Например:

<section class="testimonials">
        <div class="container">
            <div class="testimonials__wrapper">
                <div class="testimonials__wrapper_item">
                    <div class="testimonials__wrapper_item_img">
                        <img src="img/photo/testimonial.png" alt="Q">
                    </div>
                    <div class="testimonials__wrapper_item_text">
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
                        <h4>Joe Doe</h4>
                    </div>
                </div>

                <div class="testimonials__wrapper_item">
                    <div class="testimonials__wrapper_item_img">
                        <img src="img/photo/testimonial.png" alt="Q">
                    </div>
                    <div class="testimonials__wrapper_item_text">
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
                        <h4>Joe Doe</h4>
                    </div>
                </div>
            </div>

        </div>
    </section>

Правильно ли так или зашквар?
Спасибо всем, не кидайтесь камнями)

Answer 1

[Андрей Куклин]

Привет. Я не супер эксперт, но на сколько я знаю нет...
Для примера возьму твой верхний кусок кода

<section class="testimonials">
        <div class="container">
            <div class="testimonials__wrapper">
                <div class="testimonials__wrapper_item">
                    <div class="testimonials__wrapper_item_img">
                        <img src="img/photo/testimonial.png" alt="Q">
                    </div>
                    <div class="testimonials__wrapper_item_text">
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
                        <h4>Joe Doe</h4>
                    </div>
                </div>

я бы сделал так:

<section class="testimonials">
        <div class="container">
            <div class="testimonials__wrapper">
                <div class="testimonials-item">
                    <div class="testimonials-item__img">
                        <img src="img/photo/testimonial.png" alt="Q">
                    </div>
                    <div class="testimonials-item__text">
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
                        <h4>Joe Doe</h4>
                    </div>
                </div>

Но учти, что у меня сейчас почти 3 часа ночи, и за меня говорит мой кофе)

Comments

[chimir]

у Вас получилось, что testimonials-item - это отдельный блок, я сомневаюсь, что он может где-то в дальнейшем реиспользоваться, соответственно это должно быть элементом блока testimonials - testimonials__item, Обертка для изображения тоже элемент testimonials__img. Если же Вы считаете, что это точно независимый блок, то выбрано не подходящее именование класса.

Answer 2

[Сергей]

По БЭМ нотации — неправильно. Как уже заметили, элемент не может содержать в себе другие элементы, а имя класса вовсе не обязано показывать всю иерархию внутри блока, а только заявлять о принадлежности к определенному блоку. Так как "айтемов" может быть много, для них тоже нужно создать свой блок. CSS для item нужно привязывать к этому блоку, а его состояние внутри родителя — к элементу item, дочернему testimonials. Я бы сделал так:

<section class="testimonials">
    	<div class="container testimonials__container">
    		<div class="testimonials__item testimonials-item">
    			<img src="http://placehold.it/100/100" alt="alt" class="testimonials-item__img">
    			<div class="testimonials-item__text" ></div>
    			<div class="testimonials-item__name"></div>
    		</div>
    		<div class="testimonials__item testimonials-item">
    			<img src="" alt="" class="testimonials-item__img">
    			<div class="testimonials-item__text"></div>
    			<div class="testimonials-item__name"></div>
    		</div>
    	</div>
    </section>

Comments

[Сергей]

А одинарное подчеркивание, которым Вы обозначаете вложенность, должно указывать на модификатор блока. Так, если у нас есть два отзыва: положительный и отрицательный и нам нужно отобразить это в стилях, то их код будет выглядеть так:

<div class="testimonials__item testimonials-item testimonials-item_like">
    			<img src="http://placehold.it/100/100" alt="alt" class="testimonials-item__img">
    			<div class="testimonials-item__text"></div>
    			<div class="testimonials-item__name"></div>
    		</div>
    		<div class="testimonials__item testimonials-item testimonials-item_unlike">
    			<img src="" alt="" class="testimonials-item__img">
    			<div class="testimonials-item__text"></div>
    			<div class="testimonials-item__name"></div>
    		</div>

Answer 3

[simka alien]

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

Comments

[Alex Karo]

Мм... Здесь "по именованию" у элементов дочерних элементов

Answer 4

[Alex Wells]

Зачем так сложно..

<section class="testimonials">
	<div class="container">
		<div class="wrapper">
			<div class="item">
				<div class="img"><img alt="Q" src="img/photo/testimonial.png"></div>
				<div class="text">
					<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
					<h4>Joe Doe</h4>
				</div>
			</div>
			<div class="item">
				<div class="img"><img alt="Q" src="img/photo/testimonial.png"></div>
				<div class="text">
					<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
					<h4>Joe Doe</h4>
				</div>
			</div>
		</div>
	</div>
</section>

Comments

[Ольга Ветер]

Ну вот это точно к БЭМ никакого отношения не имеет. Да и в целом item и img в структуре может быть множество, со стилями потом застрелиться можно, если у сайта страниц надцать - так тем более.