title: BEM block, naming & nesting
body: <p>I am trying to wrap my head around BEM naming convention. I am stuck at this. I may misunderstanding something, lets see.</p>
  
  <p>I have a sidebar nav and a content nav.</p>
  
  <h3>My sidebar nav looks like this</h3>
  
  <pre><code>&lt;div class="sidebar"&gt;
      &lt;ul class="sidebar__nav"&gt;
          &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;LINK&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;LINK&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>And my content nav looks like this</h3>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;ul class="content__nav"&gt;
          &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;LINK&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;LINK&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>Nesting example in CSS:</p>
  
  <pre><code>.content__nav .nav__item { background: Red; }
  </code></pre>
  
  <p>Or should I name it like this:</p>
  
  <pre><code>&lt;li class="content__nav__item"&gt;&lt;a href="#" class="content__nav__link"&gt;LINK&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Can you help?</p>