Clever Geek Handbook

Correct approach to create navigation structure with BEM

I'm trying to get my head around BEM naming in CSS and I'm wondering if I'm getting it right.

In the official docs, the element is:

A part of a block that does not have a separate meaning and is semantically tied to its block.

Based on the code snippet below, none of the child elements .main-nav

have a separate meaning, so I believe they all qualify as an element.

However, I can't help but feel that there is some code smell when I get the class name for example .main-nav__sub-menu-item-link

. It looks like I am still nesting several layers deep, right in the element namespace.

Maybe this is ok and the example below is the correct implementation, I would just appreciate the second opinion.

<nav class="main-nav">
  <div class="main-nav__logo">
    <a class="main-nav__logo-link">Company Name</a>
  </div>
  <ul class="main-nav__menu">
    <li class="main-nav__menu-item">
      <a class="main-nav__menu-item-link">Products</a>
      <ul class="main-nav__sub-menu">
        <li class="main-nav__sub-menu-item">
          <a class="main-nav__sub-menu-item-link">Foo</a>
        </li>
        <li class="main-nav__sub-menu-item">
          <a class="main-nav__sub-menu-item-link">Bar</a>
        </li>
        <li class="main-nav__sub-menu-item">
          <a class="main-nav__sub-menu-item-link">Baz</a>
        </li>
      </ul>
    </li>
    <li class="main-nav__menu-item">
      <a class="main-nav__menu-item-link">Services</a>
    </li>
    <li class="main-nav__menu-item">
      <a class="main-nav__menu-item-link">About Us</a>
    </li>
  </ul>
</nav>
Run codeHide result


+3


source to share


1 answer


This is really good.

The missing viewport issue in CSS has been resolved in your markup. Selectors will not grow. So just keep it as it is.



And don't be afraid of long class names, after gzip it is exactly the same as with the short version.

+4


source






More articles:


All Articles