2
<div class="c-catalog">
        <div class="c-catalog__header">Каталог</div>
        <div class="c-catalog__products">
            <div class="wrapper">
                <div class="c-catalog__product">
                    <img src="img/product.jpg" class="c-catalog__product__img">
                    <p class="c-catalog__product__describe"></p>
                </div>
                <div class="c-catalog__product"></div>
                <div class="c-catalog__product"></div>
            </div>
            <div class="wrapper">
                <div class="c-catalog__product"></div>
                <div class="c-catalog__product"></div>
            </div>
        </div>
    </div>

Любителям БЭМ-методологии, правильно ли я понимаю БЭМ?

Есть общий класс c-catalog. Все остальные вложенные классы должны быть с префиксом с-catalog?

А если как в мое примере, появился c-catalog__products, то входящие в него элементы должны быть с-catalog__product или с-catalog__products__item?

И что если в разметке появляются элементы, которые никак не влияют на логику и структуры и нужны просто для оформления, типа .wrapper.

Это допускается, или его надо тоже именовать через с-catalog?

Спасибо

1 ответ 1

1

Есть общий класс c-catalog. Все остальные вложенные классы должны быть с префиксом с-catalog?

Так как c-catalog является блоком, а блок в БЭМ задаёт пространство имён, то его дочерние элементы, как правило, должны содержать префикс данного корневого блока.

Это правило именования не распространяется на универсальные блоки (см. ниже)

А если как в мое примере, появился c-catalog__products, то входящие в него элементы должны быть с-catalog__product или с-catalog__products__item?

c-catalog__products в данном случае является элементом блока c-catalog, а элементы НЕ задают пространство имён в БЭМ. К тому же все дочерние элементы c-catalog__products так же являются дочерними элементами основного блока c-catalog и должны содержать его префикс c-catalog. Т.е. ответ на вопрос - c-catalog__product.

Подробнее о том, почему не рекомендуют использовать второй вариант с-catalog__products__item можно прочитать здесь.

И что если в разметке появляются элементы, которые никак не влияют на логику и структуры и нужны просто для оформления, типа .wrapper.

Это допускается, или его надо тоже именовать через с-catalog?

Допускается, в данном случае wrapper является универсальным блоком.

2
  • а картинка c-catalog__product__img или c-catalog__product_img?
    – ruslik
    13 апр 2016 в 13:22
  • 1
    @ruslik c-catalog__img, так как картинка расположена в блоке c-catalog, а сама она является элементом.
    – edem
    13 апр 2016 в 14:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.