title: Naming convention nested blocks and elements in BEM in CSS
body: <p>I am a newbie in the BEM world and was looking for some clarity.
  The BEM guide advises me to use the following approach:</p>
  
  <pre><code>.block {}
  .block__elem1 {}
  .block__elem2 {}
  .block__elem3 {}
  
  &lt;div class='block'&gt;
      &lt;div class='block__elem1'&gt;
          &lt;div class='block__elem2'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='block__elem3'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Let's say I have the following piece of code. It's not clear to me if I should use  <code>trending-topics__image</code> and <code>trending-topics__title</code>, or <code>trending-topics--item__image</code> and <code>trending-topics--item__title</code>, or something different for my elements. I feel like <code>trending-topics__image</code> and <code>trending-topics__title</code> would be too generic, since the <code>trending-topics</code> container could also contain a header image or title that needs different styling.</p>
  
  <pre><code>&lt;div class="trending-topics"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-2"&gt;
                  &lt;a class="trending-topics__item" href="#"&gt;
                      &lt;img class="[WHAT NAME SHOULD I USE?]" src="" alt=""/&gt;
                      &lt;span class="[WHAT NAME SHOULD I USE?]"&gt;Lorem ipsum&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-2"&gt;
                  &lt;a class="trending-topics__item" href="#"&gt;
                      &lt;img class="[WHAT NAME SHOULD I USE?]" src="" alt=""/&gt;
                      &lt;span class="[WHAT NAME SHOULD I USE?]"&gt;Lorem ipsum&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>