CSS selector optimization - html

Question

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.
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.
An exaggerated example of what I mean:
#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;
}
<div id="original">
<h1>Original CSS</h1>
<div class="nav">
<ul class="_ranClass2">
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</ul>
</div>
</div>
<div id="simplified">
<h1>Simplified CSS</h1>
<div class="nav _ranClass1">
<ul class="_ranClass2">
<li class="_ranClass3">Link 1
</li>
<li class="_ranClass3">Link 1
</li>
<li class="_ranClass3">Link 1
</li>
</ul>
</div>
</div>
Of course this would require heavy tweaking and may cause more headaches than good, but was wondering if something like this exists.
EDIT:
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
#original .nav ul li a {
text-decoration: none;
color: green;
}
simplified too
._ranClass4 {
text-decoration: none;
color: green;
}
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

Answer 1

I would avoid what you're doing in your example. Your selectors should not be too wordy, but it's also nice for them to have some level of description so you know what their intended purpose is.
You may want to read into BEM and other CSS methodologies that can help organize and speed up writing your CSS.
You're also probably looking for something like CSSO or another gulp/grunt task. CSSO has a feature you expressly desired, to parse your markup and remove useless selectors from your CSS. Be wary, if you have DOM modifiers in some JS scripts, you might run into issues where CSSO removes these selectors from your CSS because, at the time the task was run, they didn't exist in your markup.
Here is a good article on other methods of CSS optimization.