BEM naming: "element block__element" or "block__element block__element--modifier"? - css

Question

This question is in reference to this documentation https://en.bem.info/methodology/css/#external-geometry-and-positioning
The parent class is "header" and the button is "button header__button". Typically, I would use (and see elsewhere in tutorials) "button button--header".
My site uses dropdown menus with the class "dropdown-menu" and I am also using "dropdown-menu--nav" but is "--nav" an appropriate modifier? By the logic in the documentation, I should use "dropdown-menu navbar__dropdown-menu". I'm lost because I can see both navbar and dropdown-menu being their own blocks, but when they interact with each other, I'm not so sure. If navbar is the block and dropdown-menu is the element, should I use "dropdown-link navbar__dropdown-link" instead of "dropdown-menu__link dropdown-menu__link--nav" for links?
I could see the "element block__element" approach working better because the block specific styling to that element would be near the block styling, instead of with the element styling as a modifier.

Answer 1

Example of how I use BEM for button example and dropdown menu: https://codepen.io/SROwl/pen/eYmVzBE
Explanation:
I would write dropdown-menu--nav as dropdown-menu__nav as it is a component of the dropdown menu. Also, I tend to rebase inner components seen in the nav example below.
The button example is used to show multiple classes being used to create the button look you want. However, if the .button class doesn't have any of the same styles as .header__button then this would not be necessary. You would simply use .header__button.
I would use a modifier if I wanted to change the button color, ex: .header__button--green.
I stray away from the BEM documentation a little where they want you to use something like: < div class="header__button header__button--green">. I use SCSS extends to include the properties of header__button to header__button--green so the markup ends up being: < div class="header__button--green"> rather than including both classes. This is a personal preference, some people do not like extends as they find it difficult to manage or don't like the way it compiles the css.
BEM
<!-- How BEM states it should be done -->
<div class="button">Shop Now</div>
<div class="button header__button">Shop Now</div>
<div class="button header__button header__button--green">Shop Now</div>
BEM EXTEND
<!-- How I prefer to do it -->
<div class="button2">Shop Now</div>
<div class="header__button2">Shop Now</div>
<div class="header__button2--green">Shop Now</div>
BEM NAV
<div class="dropdown-menu">
<div class="dropdown-menu__header">
Menu
</div>
<ul class="dropdown-menu__nav">
<li class="nav__link">Link 1</li>
<li class="nav__link--active">Link 2</li>
<li class="nav__link">Link 3</li>
</ul>
</div>
body {
font-family: sans-serif;
}
// BEM WAY
.button {
background: #000;
color: #fff;
border-radius: 5px;
font-size: 16px;
text-align: center;
max-width: 200px;
padding: 5px 15px;
text-transform: uppercase;
margin-bottom: 10px;
}
.header__button {
font-size: 32px;
color: #ccc;
&--green {
background-color: green;
}
}
// BEM-ish way
.button2 {
background: #000;
color: #fff;
border-radius: 5px;
font-size: 16px;
text-align: center;
max-width: 200px;
padding: 5px 15px;
text-transform: uppercase;
margin-bottom: 10px;
}
.header__button2 {
#extend .button2;
font-size: 32px;
color: #ccc;
&--green {
#extend .header__button2;
background-color: green;
}
}
// BEM-ish menu
.dropdown-menu {
background: gray;
width: 300px;
padding: 15px;
&__header {
background-color: #ccc;
padding: 5px;
}
&__nav {
background: darken(#ccc, 20%);
padding: 10px;
list-style-type: none;
.nav {
&__link {
text-transform: uppercase;
color: purple;
padding: 5px;
&--active {
#extend .nav__link;
color: pink;
background: gray;
}
}
}
}
}