These are chat archives for bem/talk

12th
Jan 2015
Eric-Xu
@Eric-Xu
Jan 12 2015 15:46

Hi @all. I'm having some trouble understanding how to define an element's scope using BEM and would be grateful for any help.
I understand the principle of this naming convention:

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

However, what happens when there are two sections, each with a menu block that needs to be styled differently?

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

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

Do we then end up with something like this?

.menu--primary {}
.menu--primary__item {}

Thanks for any help.

Anton Winogradov
@awinogradov
Jan 12 2015 15:50
Hi! .menu.menu_primary .menu__item is right for you;)
Eric-Xu
@Eric-Xu
Jan 12 2015 15:56
@verybigman if I wanted to avoid any CSS nesting, would we then use .menu__item.menu_primary__item?
Anton Winogradov
@awinogradov
Jan 12 2015 16:41
No, you can mix block with mod on element or element of block, but don't mix modifier from block. This is don't right. You can read more about naming on bem.info/methodology.
You can use modifier for element, ex: menu__item.menu__item_primary
Eric-Xu
@Eric-Xu
Jan 12 2015 16:48

Sorry, @verybigman. I'm a bit confused by this. Can you flush it out with an example?

No, you can mix block with mod on element or element of block, but don't mix modifier from block.

Alexej Yaroshevich
@zxqfox
Jan 12 2015 16:58
He means that .block--modifier__element is impossible thing, It's .block__element but inside .block with .block--modifier.
Eric-Xu
@Eric-Xu
Jan 12 2015 17:09
Thanks for pointing that out @zxqfox. I did not know that .block--modifier__element is non-BEM compliant.
But going back to @verybigman's example of menu__item.menu__item_primary, this to me, reads semantically like targeting the primary item element of the menu block.
What if I wanted to target the item element of a primary menu block, given two types of menu blocks?
Alexej Yaroshevich
@zxqfox
Jan 12 2015 17:10
There is a npm package https://github.com/bem/bem-naming with helpers and simple API to parse/stringify
@Eric-Xu Yes, you're right. And actually, It's a situation for cascade
Cascades possible if they applied to elements by block's modifier. You don't brake anything with it even if you use your block with cascade in another project. Why you don't want to use it here? .block--modifier .block__element
Eric-Xu
@Eric-Xu
Jan 12 2015 17:24
@zxqfox We are experimenting with avoiding (unnecessary) nesting of selectors in our stylesheets. How common is it to find projects using BEM that also nests selectors? Was BEM created with nested selectors in mind?
Alexej Yaroshevich
@zxqfox
Jan 12 2015 17:33
@Eric-Xu Afaik BEM recommends to avoid unnecessary cascades to make blocks separate. Using them for changing view or behaviour of elements inside block if block have some modifier isn't unnecessary. It's logically right and actually one of the common cases to use cascade. That's why @verybigman said about .menu_primary .menu__item right after your first question. I don't really know why we shouldn't use cascades even if the task need cascade. But I'm agree that we should avoid nesting, linking different blocks in css selectors, etc. We should keep blocks separate to make them useful. In other way there is no chance that we can use that blocks once again.