Skip to content

Instantly share code, notes, and snippets.

@jackrugile

jackrugile/bem-nesting.html

Created July 29, 2015 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jackrugile/781aa60e3f6a73af5057 to your computer and use it in GitHub Desktop.
Save jackrugile/781aa60e3f6a73af5057 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bem-nesting.html
<nav class="nav">
<ul class="nav__list">
<li class="nav-list__item">
<a class="nav-list-item__link"></a>
</li>
<li class="nav-list__item">
<a class="nav-list-item__link"></a>
</li>
<li class="nav-list__item">
<a class="nav-list-item__link"></a>
<ul class="nav-list-item__sub-nav-list">
<li class="nav-list-item-sub-nav-list__item">
<a class="nav-list-item-sub-nav-list-item__link"></a>
</li>
</ul>
</li>
</ul>
</nav>
Copy link

ghost commented Jul 29, 2015

Since nav is the block, I've taken the approach that everything can be just a single element from that. Just becausenav-list__item is underneath the nav__item, doesn't mean it's required to be there. So you don't have to deep nest at all if you don't want to.

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__link"></a>
        </li>
        <li class="nav__item">
            <a class="nav__link"></a>
        </li>
        <li class="nav__item">
            <a class="nav__link"></a>
            <ul class="nav__sub-nav-list">
                <li class="nav__item">
                    <a class="nav__link"></a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

If your sub-nav-list needs special styling, then you can just create the modifier for it and then style your nav__item and nav__link according to the modifier.

<ul class="nav__list nav__list--sub-nav">
    <li class="nav__item">
        <a class="nav__link"></a>
    </li>
</ul>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment