Different blocks or modified blocks?

Hi,

I have a big disscusson with my colleague and would love to get your feedback.

I am building a website and have seen some areas, wich are reusable. They share the same HTML construct and looks similar. Example:

<header>
    <nav class="navigation navigation_main">
        <ul class="navigation__list">
            <li class="navigation__item"><a class="navigation__link">Item 1</a></li>
            <li class="navigation__item"><a class="navigation__link">Item 2</a></li>
            <li class="navigation__item"><a class="navigation__link">Item 3</a></li>
        </ul>
        </nav>
        <nav class="navigation navigation_meta">
            <ul class="navigation__list">
                <li class="navigation__item"><a class="navigation__link"><span class="svg-icon svg-icon_search"></span></a></li>
                <li class="navigation__item navigation__item_active"><a class="navigation__link">DE</a></li>
                <li class="navigation__item"><a class="navigation__link">EN</a></li>
            </ul>
    </nav>
</header>

My colleague says, that the navigations have to be named different:

<header>
    <nav class="main-navigation">
        <ul class="main-navigation__list">
            <li class="main-navigation__item"><a class="main-navigation__link">Item 1</a></li>
            <li class="main-navigation__item"><a class="main-navigation__link">Item 2</a></li>
            <li class="main-navigation__item"><a class="main-navigation__link">Item 3</a></li>
        </ul>
    </nav>
    <nav class="meta-navigation">
        <ul class="meta-navigation__list">
            <li class="meta-navigation__item"><a class="meta-navigation__link"><span class="svg-icon svg-icon_search"></span></a></li>
            <li class="meta-navigation__item meta-navigation__item_active"><a class="meta-navigation__link">DE</a></li>
            <li class="meta-navigation__item"><a class="meta-navigation__link">EN</a></li>
        </ul>
    </nav>
</header>

The navigations (there are some additional navigation in the footer and for social media icons, too) looks very similar. They differ in font size and paddings/margins. I see great advance in the first solution, because it is very modular and reusable. The end code is smaller. My colleague says, nesting (i.e. .navigation_meta .navigation__item{}) is evil and should be avoided, whenever possible (i.e .meta-navigation__item{}).

Who is right?

10 years ago

tadatuta

Hi, @SimonWpt

Well, there's nothing wrong with nesting when parent block (or its modifier) affects its children. So your variant is just fine. See https://en.bem.info/faq/#why-should-i-avoid-using-nested-selectors

But it's also possible to use mixes to handle this case. That's when a few different blocks share same DOM node. So you may arrange it like this: <li class="navigation__item meta-navigation__item"> where navigation__item will be responsible for common styles for any generic navigation and meta-navigation__item will add some specific for current particular navigation type.

It may look as it's too many chars in HTML but it results in almost zero difference after gzip. Still I'd go with your variant for this case.

In order to leave a comment you need to login.