Setting for allowing nested elements about bemto HOT 3 CLOSED

It's not a good idea to have elements create their own block scopes in general. BEM really shines when elements are "portable", meaning that you can move them around and change their nesting without modifying the styles.

But an important BEM concept is to allow for the same tag to be an element of a block and its own block root:

<div class="my-big-component">
  <div class="my-big-component__submit-control special-button">
    <div class="special-button__label"></div>
    <div class="special-button__other-label"></div>
  </div>
</div>

from bemto.

But for now we already can make this:

+b.some-block
  +b.scoped-elt.__element
    +e.sub-element

And we will get:

<div class="some-block">
  <div class="scoped-elt some-block__element">
      <span class="scoped-elt__sub-element"

from bemto.

The basics for this was made in rc-1.0 using a special option and a syntax for making an element to be a root of the following elements:

- set_bemto_settings({ flat_elements: false })

+b.foo
  +e.bar__
    +e.taz

producing

<div class="foo">
  <div class="foo__bar">
    <div class="foo__bar__taz">
    </div>
  </div>
</div>

There are still some cases for elements of elements left, but they'll be implemented in later versions.

from bemto.