title: Child element of modifier element?
body: <p>Take the following structure:</p>
  
  <pre><code>&lt;div class='article article--yellow'&gt;
    &lt;div class='article__headline'&gt;...&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='article article--blue'&gt;
    &lt;div class='article__headline'&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I need to make <code>article__headline</code> different for <code>--yellow</code> from <code>--blue</code>, should I do a CSS selector like:</p>
  
  <p><code>.article--yellow .article__headline { ... }</code></p>
  
  <p>Or, in the practice of minimizing selection-depth, is it valid BEM syntax to change the markup to this:</p>
  
  <pre><code>&lt;div class='article article--yellow'&gt;
    &lt;div class='article--yellow__headline'&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because then I could select it using only 1 selector: <code>article--yellow__headline</code>.</p>
  
  <p>I know that technically it would work, but I can't figure out if this is valid according to BEM methodology or not.</p>