title: naming BEM sub blocks
body: <p>I'm using a BEM approach to writing html + css. With this syntax:</p>
  
  <ul>
  <li>Blocks: block_name 
  <ul>
  <li>Elements: block_name__element_name </li>
  <li>Modifiers: block_name__element_name--modifier</li>
  </ul></li>
  </ul>
  
  <p>I get confused when I have a block within another block. For instance, in a header, I want the header to be a block that I can reference and the nav and logo to be blocks. I want to reference those nav and logo blocks as being the within the site_header. But, how would I write that? Chaining blocks like block_name__sub_block_name seems quite long.</p>
  
  <p>Does anyone have a typical way they would write this example?</p>
  
  <p></p>
  
  <pre><code>&lt;div class="site_header__logo"&gt;
      &lt;a class="site_header__logo__link"&gt;
          &lt;img class="site_header__logo__image"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;nav class="site_header__main_nav"&gt;
      &lt;ul&gt;
          &lt;li class="site_header__main_nav__item"&gt;
              &lt;a class="site_header__main_nav__link"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="site_header__main_nav__item"&gt;
              &lt;a class="site_header__main_nav__link"&gt;About Us&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="site_header__main_nav__item"&gt;
              &lt;a class="site_header__main_nav__link"&gt;Contact Us&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div class="site_header__phone"&gt;
      &lt;p class="site_header__phone__number"&gt;
          555.555.5555
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>