Задать вопрос
@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, то селекторы выйдут слишком некрасивые
  • Вопрос задан
  • 565 просмотров
Подписаться 2 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
IonDen
@IonDen
JavaScript developer. IonDen.com
Суть БЭМа еще и в том, что его так то не пишут вручную, замаешься эти километры названий писать. Используйте тулзы, которые яндекс поставляет для разработки: https://ru.bem.info/tools/ и все встанет на свои места. Без этих инструментов, вы только проблем себе добавите.
Ответ написан
@pchelovek
HTML-верстальщик
Надо бы видеть контекст, но в общем надо как-то так.
<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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы