Правильная ли разметка в стиле БЭМ?

Question

[timonck]

<section class="blog-sec blog">
    <div class="container">
        <div class="blog__title">
            <h2 class="blog__title__headline">Recent blog</h2>
            <div class="line1 line-recent"></div>
            <p class="blog__title__p">Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc rutrum <br>
                nisi vel nibh cursus, nec vestibulum orci feugiat.</p>
        </div>
        <div class="blog__post">
            <div class="blog__post__item">
                <img class="blog__post__item__img" src="img/blog2.png">
                <h3 class="blog__post__item__heading">Is there hope for the SEO profession?</h3>
                <span class="blog__post__item__span">Post by Lawrence R. Smith</span>
                <div class="line1"></div>
                <p class="blog__post__item__text">Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc
                    rutrum nisi vel nibh cursus, nec vestibulum orci feugiat. Nunc in luctus lacus. Integer eget dui
                    nisi. Integer mauris lacus.</p>
                <a class="blog__post__item__button" href="#">Read More</a>
            </div>
            <div class="blog__post__item">
                <img class="blog__post__item__img" src="img/blog1.png">
                <h3 class="blog__post__item__heading">Is there hope for the SEO profession?</h3>
                <span class="blog__post__item__span">Post by Esperanza A. Johnson</span>
                <div class="line1"></div>
                <p class="blog__post__item__text">Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc
                    rutrum nisi vel nibh cursus, nec vestibulum orci feugiat. Nunc in luctus lacus. Integer eget dui
                    nisi. Integer mauris lacus.</p>
                <a class="blog__post__item__button" href="#">Read More</a>
            </div>
            <div class="blog__post__item">
                <img class="blog__post__item__img" src="img/blog3.png">
                <h3 class="blog__post__item__heading">Is there hope for the SEO profession?</h3>
                <span class="blog__post__item__span">Post by Heather R. Williams</span>
                <div class="line1"></div>
                <p class="blog__post__item__text">Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc
                    rutrum nisi vel nibh cursus, nec vestibulum orci feugiat. Nunc in luctus lacus. Integer eget dui
                    nisi. Integer mauris lacus.</p>
                <a class="blog__post__item__button" href="#">Read More</a>
            </div>
        </div>
        <a class="blog__button" href="#">+ load more</a>
    </div>
</section>

Comments

[xonar]

А причём тут флексы, бустрап и методология БЭМ? Советую изучить - https://ru.bem.info/methodology/

[Виталий Першин]

xonar, Ну так он не понимает вот и связал не связываемое...

Answer 1

[Андрей]

Нет, вот так примерно будет правильно

<section class="blog">
	<div class="container">
		<div class="blog__headline">
			<h2 class="blog__title">Recent blog</h2>
			<p class="blog__subtitle">Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc rutrum nisi vel nibh cursus, nec vestibulum orci feugiat.</p>
		</div>
		<div class="blog__posts">
			<div class="post">
				<img class="post__img" src="img/blog2.png">
				<h3 class="post__title">Is there hope for the SEO profession?</h3>
				<span class="post__author">Post by Lawrence R. Smith</span>
				<p class="post__description">Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc rutrum nisi vel nibh cursus, nec vestibulum orci feugiat. Nunc in luctus lacus. Integer eget dui nisi. Integer mauris lacus.</p>
				<a class="button post__button" href="#">Read More</a>
			</div>
		</div>
		<a class="button blog__button" href="#">+ load more</a>
	</div>
</section>

Тут все ответы
https://ru.bem.info/methodology/key-concepts/

Comments

[xonar]

Как по мне правильнее будет button--blog вместо blog__button

<a class="button blog__button" href="#">+ load more</a>

Ведь уже есть стили у button, а блог баттон это модификатор скорее.

[Виталий Першин]

xonar, В контексте блога как раз более уместен будет микс button blog__button, а модификатор будет уместен для не одноразовой модификации. То есть к примеру внутри blog кнопке нужно задать отступ сверху например margin-top: 100px. То тут мы и применяем микс blog__button при этом нам ничего не мешает применять остальные модификаторы совместно с миксом.

[xonar]

Виталий, Да, теперь согласен с вами.