what's the difference between block__element1__element2 and block_

In quick start:

Create an element If a section of code can't be used separately without the parent entity (the block). The exception is elements that must be divided into smaller parts – subelements – in order to simplify development. In the BEM methodology, you can't create elements of elements. In a case like this, instead of creating an element, you need to create a service block.

If I name as blockelement1-element2, it doesn't change the truth i create a element of element and blockelement1-element2 must be used under the blockelement1 context. what's more, in BEM name convention, represent the parent-child relationship, element1-element2 break this rule, how can i know the element2 is a child of element1 or a name of element1 if not read the HTML.

7 years ago

tadatuta

The reason of not allowing elements of element is exactly in your question: DOM shouldn't be resembled in names of the components. Just like you don't need to resemble in naming the fact that <li> is always inside <ul>. Moreover in contrast with <ul> and <li> BEM elements can be easily refactored to change the structure.

7 years ago

liajoy

But name as blockelement1-elemen2 still break the rule element can't be a child of element.Just it use '-' to replace ''.And I think element can be placed anywhere only it's under block scope. example:

<div class="menu">
    <h2 class="menu__title"></h2>
    <h2 class="menu__item-title"></h2> // Wrong
    <div class="menu__item">
        <h2 class="menu__item-title"></h2> // Right
        <h2 class="menu__title_type_item"></h2> // is it a solution?
    </div>
</div>

menuitem-title can be placed under menu, but the truth is menuitem-title only can be placed under menuitem because it's a child of menuitem.And a child should use . If name grandchild as blockelement__element won't make it more easier to understand where it can be used?

another question is use block__element1-element2, how does the file structure like?

7 years ago

vithar

item-title can be placed outside item and nothing wrong in your example.

7 years ago

vithar

This is not element1-element2 in you example, this is separate new element, so filestructure as described in documentation.

In order to leave a comment you need to login.

what's the difference between block__element1__element2 and block__element1-element2

what's the difference between blockelement1element2 and block__element1-element2