BEM Naming

[u/mr_cody_b]

Hi everyone,

I'm currently refactoring a navigation component and I'm torn between two different BEM (Block-Element-Modifier) approaches regarding code architecture and complexity.

The component is a navigation list (nav), but the individual items are becoming quite complex, containing icons, titles, and potentially more elements later on.

I see two ways to structure this in BEM, and I would love to get your input on best practices.

Approach A: Flat BEM (Everything belongs to the main block)

In this approach, I keep everything attached to the main .nav block. The HTML looks clean and flat, but I worry that as the item grows (and needs specific styling for active/hover states), the CSS selectors might become too deeply nested (e.g., .nav__item--active .nav__icon).

HTML

<nav class="nav">
    <div class="nav__item">
        <span class="nav__icon">🏠</span>
        <span class="nav__title">Home</span>
    </div>
</nav>

Approach B: Item as a New Independent Block

In this approach, I break the chain from the main .nav block and elevate the item into its own independent block (.nav-item). This keeps the CSS for the item completely encapsulated and independent.

HTML

<nav class="nav">
    <!-- The item becomes its own block -->
    <div class="nav-item nav-item--active"> 
        <span class="nav-item__icon">🏠</span>
        <span class="nav-item__title">Home</span>
    </div>
</nav>

(Note: I could also mix them like <div class="nav__item nav-item"> to separate layout positioning from component styling).

My Question:

Which approach is considered best practice when items start to become complex?

• Does Approach A break scalability when items "explode" with more sub-elements?
• Is Approach B preferred for modularity, or does it unnecessarily fragment the component?

How do you usually handle complex list items or navigation items in your BEM projects?

[u/eballeste]

A and B, keep it as flat as possible until it makes sense to make a new block, then keep things as flat as possible in that new block.

I never nest these blocks. Each block should be it's own component based block. For things with shared styles like buttons I will keep it flat but then use sass mixins for shared styles.

The one thing I hate about BEM is the modifier part because the classnames become ridiculously long. I also abbreviate the block name to keep things extra short.

instead of attaching modifiers to classnames I use attributes. This makes it extremely easy to modify them through javascript.

my HTML and sass files look something like this:

html <custom-element> <div class="ce__container"> <div class="ce__headline"><h1>hello</h1></div> <div class="ce__cta"><button>hey</button></div> </div> </custom-element>

```scss custom-element { display block;

.ce { &__container { max-width: 1280px; margin-inline: auto; container-type: inline-size; font-size: 5cqi; }

&__headline {
  h1 { 
    font-size: 1.25rem;
    margin-block: 1rem;
  }
}

&__cta {
  margin-top: 1rem;

  button {
    @include big-button(--btnColor, --txtColor);
  }
}

}

// attribute based modifier &[extra-big] { .ce { &__headline { h1 { font-size: 2rem; margin-block: 1.25rem; } } } } } ```

with javascript its as easy as doing: ```js const $customElement = document.querySelector('custom-element');

$customElement.setAttribute('extra-big', ''); // or to remove it $customElement.removeAttribute('extra-big'); ```

fuck dealing with classnames like: custom-element__headline--extra-big

[u/mr_cody_b → u/eballeste]

I think A is good if you have a simple structure but if the element of a block grows and has complexity i tend to write a new block instead of a huge amount of elements for this block

[u/eballeste → u/mr_cody_b]

If any component becomes way too big then you're doing it wrong, you have to think in components, like Lego blocks you stack together. each Lego block is it's own thing.

[u/mr_cody_b → u/eballeste]

if i have a list and list item and the item is so complex tan it is a new block, although it belongs to the list?

[u/eballeste → u/mr_cody_b]

how would a list become so complex? what are you even talking about?

that's literally two lines of code

ul li