<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> 

Lovers of the BEM methodology, do I understand BEM correctly?

There is a general c-catalog class. All other nested classes should be prefixed с-catalog ?

And if, as in my example, c-catalog__products , then the elements included in it should be с-catalog__product or с-catalog__products__item ?

And what if elements appear in the markup that do not affect the logic and structures in any way and are simply needed for the layout, such as .wrapper .

Is it allowed, or should it also be called via с-catalog ?

thank

    1 answer 1

    There is a general c-catalog class. All other nested classes should be prefixed with c-catalog?

    Since c-catalog is a block , and a block in BEM defines a namespace , its children, as a rule, must contain the prefix of the root block .

    This naming rule does not apply to universal blocks (see below).

    And if, as in my example, c-catalog__ products appeared, then the elements included in it should be c-catalog__product or c-catalog__products__item?

    c-catalog__products in this case is an element of the c-catalog block, and the elements do NOT specify the namespace in BEM. In addition, all child elements of c-catalog__ products are also children of the main c-catalog block and must contain its c-catalog prefix. Those. The answer to the question is c-catalog__product.

    You can read more about why it is not recommended to use the second option c-catalog__products__item here .

    And what if elements appear in the markup that do not affect the logic and structures in any way and are simply needed for the layout, such as .wrapper.

    Is it allowed, or should it also be called via c-catalog?

    Allowed , in this case, the wrapper is a universal unit.

    • a picture of c-catalog__product__img or c-catalog__product_img? - ruslik
    • one
      @ruslik c-catalog__img, since the picture is located in the c-catalog block , and it itself is an element . - edem