How to properly set an element's scope using BEM?

Question

Given the following BEM tree structure, where five nested levels exist:

collection-main__features-top__story__byline__author

according to BEM's naming convention, where an element is part of a block and has no meaning outside of the block it belongs to, what is the proper way to name the author class?

Since an author is semantically tied to the byline and the story context, but meaningless under the features-top and collection-main blocks, what is the best BEM name?

collection-main__author
features-top__author
story__author (best?)
story__byline__author
byline__author

What happens if a new features block gets introduced?

collection-main__features-top__story__byline__author (target)
collection-main__features-bottom__story__byline__author

features-top__story__author
story--features-top__author (best?)

Finally, what happens if another collection block gets added and we want to style the second author element in the list?

collection-main__features-top__story__byline__author
collection-main__features-bottom__story__byline__author (target)
collection-sub__features-top__story__byline__author
collection-sub__features-bottom__story__byline__author

Would we do something like this?

story--collection-main--features-bottom__author

There must be a better option.

Please, show your data to output. Is it like `{collection-main: [{"feature-item": { story: {author: ''} } }]}` ? — Alex Baumgertner, Jan 12 '15 at 10:25

Ihor Zenich · Answer 1 · 2016-09-15T12:05:01.483

BEM prohibits put an elements in the elements in CSS!
You make the most typical error in BEM markup - writing a block__element__element. You must create new blocks, rather than copying DOM-tree.

For example:
Right HTML:

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>

Right CSS:

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

If you need to make an element of an element, then you need to make a new block or make your bem-tree with a single nested elements!

WRONG:

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem1__elem2'></div>
    </div>
</div>

RIGHT #1: Make a new block

<div class='block1'>
    <div class='block2'>
        <div class='block2__elem'></div>
    </div>
</div>

RIGHT #2: Make your bem-tree with a single nested elements

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
</div>

Pay attention - you can not put elements in a elements in the css, but you can and should put elements in a elements into html! DOM-tree and BEM-tree can be different.

Do not write strange names, putting the element name in the name of the block!

WRONG:

.block {}
.block-elem1 {}
.block-elem1__elem2 {}

Because you get a problem with odd names when you try to move the block:

<div class='other-block'>
    <div class='block-elem1'></div>
</div>

Nested html-elements is a DOM-tree.
The names of the classes you write is a BEM-tree.
Feel the difference!

DOM-tree:

<ul>
  <li>
    <a>
      <span></span>
    </a>
  </li>
</ul>

.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}

BEM-tree:

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>

.menu {}
.menu__item {}
.menu__link {}
.menu__text {}

References:

"An element is a constituent part of a block that can't be used outside of it." https://en.bem.info/methodology/key-concepts/#element

An element is a part of a block! Not part of element! Read Vitaly Harisov, the author of BEM-methodology: https://twitter.com/harisov/status/403421669974618112

Classname like "block__elem__elem___elem" means that coder didn't understand anything in BEM.

How to properly set an element's scope using BEM?

1 Answers1

Linked