Как правильно оформить блок в стиле БЭМ?

Question

[desuvin]

Подскажите, как правильно оформить данный код в стиле БЭМ.

<section class="section-price">
        <div class="wrapper">
            <h2>Цены</h2>
            <div class="price-list">
                <div class="price-item">
                    <img src="img/price/img1.jpg" alt="" />
                    <span class="title">
                        Охранная сигнализация
                    </span>
                    <button class="btn">Заказать</button>
                </div>
                <div class="price-item">
                    <img src="img/price/img2.jpg" alt="" />
                    <span class="title">
                        Специальное предложение
                    </span>
                    <button class="btn btn--down">Подробнее</button>
                </div>                
                <div class="price-item">
                    <img src="img/price/img3.jpg" alt="" />
                    <span class="title">
                    Кнопка тревожной <br />
                    сигнализации
                    </span>
                    <button class="btn">Заказать</button>
                </div>                                
            </div>
        </div>
    </section>

если писать section-price__price-list__price-item, то селекторы выйдут слишком некрасивые

Comments

[Александр]

Согласно оригинальной методологии конструкции типа section-price__price-list__price-item ( то есть block__element__subelement) рекомендуется не использовать. Надо разбивать на блоки.

Answer 1

[Денис Инешин]

Суть БЭМа еще и в том, что его так то не пишут вручную, замаешься эти километры названий писать. Используйте тулзы, которые яндекс поставляет для разработки: https://ru.bem.info/tools/ и все встанет на свои места. Без этих инструментов, вы только проблем себе добавите.

Comments

[Nikolay Talanov]

Позволю себе не согласиться, автоматизирование бем верстки обычно хорошо подходит только для гигантских проектов, в случае же когда верстальщик один, достаточно юзать наследование с препроцессорами, аля
.block {
&__element {}
}

[Денис Инешин]

Nikolay Talanov: это решит проблему лишь частично, понимаете, в html все равно придется писать полные конструкции. И вообще БЭМ вреден для мелких проектов, проще использовать что-то БЭМ-подобное, но не чистый БЭМ.

[Александр Петров]

Я считаю полный БЭМ-стек ужасным. Методология — крута и подходит везде.
Писать вручную? Есть эммет с БЭМ фильтром. Ну, это не полное спасение, конечно, но всяко лучше.
Так что, кому что.

[Денис Инешин]

Как бы ужасен БЭМ-стек не был, он спасение для гигантских проектов. Но действительно не стоит пихать его везде где можно.

[Александр]

Согласен, в БЭМ-стеке без бутылки не разберешься.. Денис Инешин с километрами названия справляется auto-complete.

[Денис Инешин]

Вообще, есть мнение, что БЭМ не нужен, если у вас проект меньше Яндекса)

[Сергей delphinpro]

Денис Инешин: >Без этих инструментов, вы только проблем себе добавите.
Как сказать. Я обхожусь без "этих инструментов" =) БЭМ - прежде всего идеология, попытка структурировать свой CSS код и облегчить его сопровождение. И для этого вполне хватает придерживаться соглашения об именовании селекторов.
Да, полный стек БЭМ-технологий - вещь занятная, но сложная для понимания "с наскока", и, скорее всего, излишняя для небольших проектов.

Answer 2

[Александр]

Надо бы видеть контекст, но в общем надо как-то так.

<section class="section-price">
        <div class="section-price__wrapper">
            <h2>Цены</h2>
            <div class="price">
                <div class="price__list">
                    <div class="price__item">
                        <img src="img/price/img1.jpg" alt="" />
                    <span class="title">
                        Охранная сигнализация
                    </span>
                        <button class="btn">Заказать</button>
                    </div>
                    <div class="price__item">
                        <img src="img/price/img2.jpg" alt="" />
                    <span class="title">
                        Специальное предложение
                    </span>
                        <button class="btn btn--down">Подробнее</button>
                    </div>
                    <div class="price__item">
                        <img src="img/price/img3.jpg" alt="" />
                    <span class="title">
                    Кнопка тревожной <br />
                    сигнализации
                    </span>
                        <button class="btn">Заказать</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

Comments

[desuvin]

Неплохо, спасибо. :)

[Александр]

desuvin: пожалуйста. Почитайте полезную статью о БЭМ: www.sitepoint.com/working-bem-scale-advice-top-dev...

[Nikolay Talanov]

desuvin: Это тяжело назвать бэмом, не юзайте такое. h2 без класса, куча примитивных классов (title/btn) и так далее. У КАЖДОГО элемента (за исключением декоративных элементов, аля span'ы в гамбургер меню) должен быть класс, по названию которого можно сразу определить что находится внутри элемента.

[Сергей delphinpro]

.title - слишком общий, и, к тому же, распространенный селектор. нельзя его использовать
.price__title - будет норм.

[desuvin]

Сергей: А разве можно писать price__title, если у нас родительский блок price__item. То есть разве не должно быть .price > .price__title ?

[desuvin]

Хотя все, я наконец-то понял :)

[Александр]

Nikolay Talanov: . btn - не примитивный класс, это глобальный класс. Просто тут не хватает модификаторов с размером, типом и т.п. (напр: btn--size--m). Но мы же не знаем, сколько разных кнопок он использует, поэтому это гадание по кофеной гущи. Класс title - тоже может являться таковым, просто тут не надо гадать не зная контекста.

[Nikolay Talanov]

Александр: Если человек использует бутстрап, то юзать просто btn это ок. В верстке без фреймворков лучше давать определенные классы кнопкам (так как у них будут разные margin'ы скорее всего и возможно еще какие части) а "общие стили" применять на уровне препроцессоров, с помощью mixin'ов или extend.

[Сергей delphinpro]

Александр: >Класс title - тоже может являться таковым, просто тут не надо гадать не зная контекста.
согласен с данной формулировкой. Но скорее всего это заголовок блока все же.

desuvin: > То есть разве не должно быть .price > .price__title ?
суть БЭМ - стремление избавиться от каскада. Я допускаю каскад только для обозначения контекста. во всех остальных случаях - только одиночный класс. И это здорово помогает поддерживать и расширять код.