title: Child selector rule in CSS
body: <p>I read "<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS" rel="nofollow">Writing efficient CSS</a>"</p>
  
  <blockquote>
    <blockquote>
      <p>Tag category rules should never contain a child selector</p>
    </blockquote>
    
    <p>Avoid using the child selector with tag category rules. This will
    dramatically lengthen the match time (especially if the rule is likely
    to be matched) for all occurrences of that element.</p>
  </blockquote>
  
  <pre><code>BAD
  treehead &gt; treerow &gt; treecell {…}
  
  GOOD
  .treecell-header {…}
  </code></pre>
  
  <p>But in SCSS many people write something like this:</p>
  
  <pre><code>#main {
    width: 97%;
  
    p, div {
      font-size: 2em;
      a { font-weight: bold; }
    }
  
    pre { font-size: 3em; }
  }
  </code></pre>
  
  <p>In SASS documentation - <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html" rel="nofollow">http://sass-lang.com/documentation/file.SASS_REFERENCE.html</a></p>
  
  <p>Who is right? What better?</p>