Is there a tool available that can simplify complicated CSS selectors to improve performance?
This tool would analyze all CSS rules and generate simplified single-pathed selectors with all the necessary attributes. It would then scan each DOM node to find any matches in the CSS, and if found, add the simplified selector to the node. The rendered CSS would only contain the simplified versions while the HTML would still retain the original classes/IDs to ensure existing setups remain intact.
Here is an exaggerated example:
...
While this may require thorough adjustments and could potentially cause complications, I am curious if such a tool already exists.
EDIT:
I am not seeking a more convenient way to write CSS; tools like SASS/SCSS serve that purpose. My goal is to optimize CSS for browser performance. For instance, converting the original selector
#original .nav ul li a {
text-decoration: none;
color: green;
}
to a simplified version like
._ranClass4 {
text-decoration: none;
color: green;
}
eliminates the need for the browser to check every 'a' node and its parent elements, instead simply matching nodes with class ._ranClass4.