I think every frontend developer knows how BEM works right? If not, that’s okay. Just Google it and you’ll find a LOT of documentation and articles about it. Personally, I love how intuitive and innovative BEM is. For small components, it works like a charm. But as you project requires longer components which happens to require many more DOM tree, you’ll surely need something more.
Let’s supose that you’re developing a full custom theme for an entreprise-level website/blog/ecommerce and you need to make a highly styleable menu. BEM methodology recommend that we style our components based on the following class structure:
.menu .menu__item .menu--blue
But what if you need a child for that
item element? And another child for that one too?
This is where BEM core concepts starts to fall apart and my “methodology” comes in. You can have as many childs and grandchildren as you need. For example:
.header .header-menu .header-menu-links .header-menu-links-item-label .header-menu-links-item-icon
You may wonder how in the name of God you would add an modifier to that monster. If we were going to do something like this:
// Wrong .header-menu-links-item-icon .header-menu-links-item-icon--star
Eventually, it would make our markup unreadable. Instead, I propose that we do it like this:
// Okay .header-menu-links-item-icon .header-menu-links-item-icon .is-star
That way, any class name that starts with
is- would be a modifier for one of the sibling classes. And for that, you could use inheritance, like this:
.header .is-theme-purple .header .is-theme-purple .header-menu .header .is-theme-purple .header-menu-links .header .is-theme-purple .header-menu-links-item .header .is-active .button .is-lg
Here is an markup example of this methodology:
<div class="menu"> <div class="menu-links"> <div class="menu-links-item is-current">Item 1</div> <div class="menu-links-item">Item 2</div> <div class="menu-links-item">Item 3</div> <div class="menu-links-item">Item 4</div> </div> <button class="button is-size-lg is-color-primary is-shadow"></button> </div>
Alternatively, you can omit
is from modifiers turning it into something like
button -lg -primary -shadow.
Important: While you can obviously use this concept with pure css, it is highly recommended that you use a css preprocessor like SASS.
PS.: Btw, I would like to hear what you guys think about it 🙂