title: CSS selector optimization
body: <p>I was looking into ways to optimize css performance and was wondering if their is an existing tool that converts complicated selectors to more simplistic ones. </p>
  
  <p>The tool would look at all css rules and create unique single-pathed selectors that would contain all the proper attributes. It would than looked at every dom node and search for any css matches, and if something is found it would add the simplified selector to the node. The css that is rendered only contains the simplified versions and the html would still have the original classes/ids so the existing setup wouldn't break.</p>
  
  <p>An exaggerated example of what I mean:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#original {
    padding: 5px;
    background: blue;
  }
  #original .nav {
    font-size: 24px;
  }
  #original .nav ul {
    background: black;
  }
  #original .nav ul li {
    list-style-type: none;
  }
  #original .nav ul li a {
    text-decoration: none;
    color: green;
  }
  
  #simplified {
    padding: 5px;
    background: blue;
  }
  ._ranClass1 {
    font-size: 24px;
  }
  ._ranClass2 {
    background: black;
  }
  ._ranClass3 {
    list-style-type: none;
  }
  ._ranClass4 {
    text-decoration: none;
    color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="original"&gt;
    &lt;h1&gt;Original CSS&lt;/h1&gt;
    &lt;div class="nav"&gt;
      &lt;ul class="_ranClass2"&gt;
        &lt;li&gt;&lt;a href="/"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="/"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="/"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="simplified"&gt;
    &lt;h1&gt;Simplified CSS&lt;/h1&gt;
    &lt;div class="nav _ranClass1"&gt;
      &lt;ul class="_ranClass2"&gt;
        &lt;li class="_ranClass3"&gt;&lt;a href="/" class="_ranClass4"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="_ranClass3"&gt;&lt;a href="/" class="_ranClass4"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="_ranClass3"&gt;&lt;a href="/" class="_ranClass4"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Of course this would require heavy tweaking and may cause more headaches than good, but was wondering if something like this exists.</p>
  
  <p>EDIT:</p>
  
  <p>I am not looking at a way to write more convenient CSS, SASS/SCSS exists for that reason. I am looking for a way to optimize CSS in terms of the browser. 
  EX: take the original selector</p>
  
  <pre><code>#original .nav ul li a {
    text-decoration: none;
    color: green;
  }
  </code></pre>
  
  <p>simplified too</p>
  
  <pre><code>._ranClass4 {
    text-decoration: none;
    color: green;
  }
  </code></pre>
  
  <p>Instead of the browser looking at every 'a' node, then checking to make sure the parents match, it just matches if the node has class ._ranClass4</p>