Что не так с этой версткой по БЭМ?

Question

[jTavez]

Учусь, пытаюсь понять БЭМ, подскажите что не так с этой разметкой? В качестве примера, вот такой простой блок из лендинга:

Собственно разметка:

<section class="advantages">
    <div class="container">
        <h2 class="advantages__title">
            We are building a blockchain platform that focuses on <br />
            <span class="font-bolder">solving three existing problems:</span>
        </h2>
        <ul class="advantages__list advantage">

            <li class="advantage__item">
                <svg class="advantage__image" viewBox="0 0 64 64">
                    <use xlink:href="assets/images/iconsmap.svg#advantage-acessibility"></use>
                </svg>
                <strong class="advantage__title">Acessibility</strong>
                <p class="advantage__description">
                    Lisk's <span class="font-bolder">suite of tools</span> is build in JavaScript,
                    the most commonly used programming language in the world
                </p>
                <a href="" class="advantage__link-more">Suite of tools</a>
            </li>

            <li class="advantage__item">
                <svg class="advantage__image" viewBox="0 0 64 64">
                    <use xlink:href="assets/images/iconsmap.svg#advantage-acessibility"></use>
                </svg>
                <strong class="advantage__title">Acessibility</strong>
                <p class="advantage__description">
                    Lisk's <span class="font-bolder">suite of tools</span> is build in JavaScript,
                    the most commonly used programming language in the world
                </p>
                <a href="" class="advantage__link-more">Suite of tools</a>
            </li>

            <li class="advantage__item">
                <svg class="advantage__image" viewBox="0 0 64 64">
                    <use xlink:href="assets/images/iconsmap.svg#advantage-acessibility"></use>
                </svg>
                <strong class="advantage__title">Acessibility</strong>
                <p class="advantage__description">
                    Lisk's <span class="font-bolder">suite of tools</span> is build in JavaScript,
                    the most commonly used programming language in the world
                </p>
                <a href="" class="advantage__link-more">Suite of tools</a>
            </li>

        </ul>
    </div>
</section>

Comments

[Сергей delphinpro]

Слишком объемный блок.
Как минимум advantages__item нужно выделить в отдельный блок.
А в остальном нормально.

[Сергей delphinpro]

readmore в принципе тоже может быть независимым блоком.

[WapSter]

<section class="advantages">
    <div class="container">

Дико смущает вот этот момент.

[Сергей delphinpro]

Xdevelx, ну да, недоглядел.

Вот это имел ввиду

<ul class="advantages__list advantage">
            <li class="advantage__item">

стоило поменять на это

<ul class="advantages__list">
            <li class="advantages__item advantage">

Либо advantages__item делать как неймспейс

А это дичь какая-то. ужасный вариант.

[Сергей delphinpro]

WapSter, тоже верно. по-хорошему можно добавить advantages__container
Но по факту, в реале, оно нафиг не надо.

[Сергей delphinpro]

Xdevelx,

У каждой секции будет свой элемент-контейнер? Зачем? container нужно выделять в отдельный блок или миксовать его с advantages__container по необходимости

я так и написал

Answer 1

[ildar-meyker]

Я бы не стал использовать блоки advantages и advantage. Если уж сильно нужно 2 блока, можно было бы придумать другие имена, чтобы они не были так похожи. В данном конкретном случае вполне достаточно одного пространства.

Answer 2

[Vaultboy84]

Обьясните мне лучше, как вы понимаете, что такое БЭМ и зачем он вам в лендинге? Как вы пришли к тому, что он вам нуженв этом проекте?