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.
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
<li>BEM elements can be easily refactored to change the structure.
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:
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?
item-titlecan be placed outside
itemand nothing wrong in your example.
This is not
element1-element2in you example, this is separate new element, so filestructure as described in documentation.