I am trying to wrap my head around BEM naming convention. I am stuck at this. I may misunderstanding something, lets see.

I have a sidebar nav and a content nav.

###My sidebar nav looks like this

    &lt;div class=&quot;sidebar&quot;&gt;
        &lt;ul class=&quot;sidebar__nav&quot;&gt;
            &lt;li class=&quot;nav__item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav__link&quot;&gt;LINK&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav__item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav__link&quot;&gt;LINK&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

###And my content nav looks like this

    &lt;div class=&quot;content&quot;&gt;
        &lt;ul class=&quot;content__nav&quot;&gt;
            &lt;li class=&quot;nav__item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav__link&quot;&gt;LINK&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav__item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav__link&quot;&gt;LINK&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

Now I will run into a problem if I style .nav__item, they occur in both my navigations and should not have the same styling. Should I do some nesting here, or am I naming my blocks and elements wrong?

Nesting example in CSS:

    .content__nav .nav__item { background: Red; }

Or should I name it like this:

    &lt;li class=&quot;content__nav__item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;content__nav__link&quot;&gt;LINK&lt;/a&gt;&lt;/li&gt;

Can you help?

All Bem Solutions on Gang of Coders

Total of 1 Bem Solutions

BEM block, naming & nesting