CSS Specificity Filter

Question

This is a long shot, but is there a tool available that optimizes CSS selectors by removing unneeded specificity?

I find that when I write CSS, I deliberately make my selectors more specific than necessary to avoid conflicts and for quasi-documentation.

It would be great if there were a tool that could analyze a given group of rules, determine their "uniqueness" in terms of overlap with other rules, and then strip away any unnecessary specificity.

I can't even begin to imagine how a tool developer would approach all of the scenarios this would require, but I've been blown away by others' ingenuities in this area before and figured it was worth asking.

Update:

I've added a bounty to this question, and the more I think about it, the more I realize how valuable a CSS Specificity Filter would be.

For example, when working with Nested Rules/Selectors in Sass and LESS, excessive nesting is a common and well-known antipattern that can easily lead to overly specific selectors.

There's a good illustration of this in the excellent TutsPlus course Maintainable CSS with Sass and Compass:

body {     div.container {         p {             a {                 color: purple;             }         }     } } 

Sass will follow these nesting instructions and produce the following CSS output, raising no objection to any unneeded specificity:

body div.container p a {     color: purple; } 

If a Specificity Filter did/does exist, however, it would create potential benefits for CSS developers:

1. You could organize your stylesheets as a 1:1 mapping of the DOM, similar to what you see when you examine style rules in Firebug and Chrome Dev Tools. A smart editor/IDE could auto-populate styles for DOM elements with shared styles/classes. That redundancy would then, of course, be filtered out by the Specificity Filter/Optimizer.

2. Stylesheets could have their structure pre-populated by a tool that scans the DOM and translates it to CSS selectors/rules. This means a developer would only need to update the HTML; the CSS "tree" would be kept in sync to reflect the current state of the DOM. A smart editor would let you jump to the CSS definition for an element/class for styling -- or even make its style rules visible in a separate panel.

In a way, this almost seems like a step backward - like a feature you'd find in Dreamweaver or WebAssist to help newbs learn CSS. But the basic idea of a CSS selector optimization tool seems like a no brainer, and the type of workflow automation I've described would be the logical next step -- and the catalyst would be the Specificity Filter.

I looked into some of the better-known CSS editors and web IDEs, but haven't found anything offering this type of functionality beyond targeting a single element and generating a selector for it.

Update 2: CSS Selector Performance

In response to Spliff's comment, here are two great articles on CSS selector performance:

• Performance Impact of CSS Selectors by Steve Souders

• Efficiently Rendering CSS by Chris Coyier

Both agree that micro-optimizing CSS isn't worth the effort, but that over-qualified descendant selectors are "an efficiency disaster." I haven't benchmarked yet myself, but suspect that the kind of "DOM Mapping" approach I'm suggesting would cause a performance hit without an optimization step, either manual or automated.

Related Questions, Links, and Tools:

Points in CSS Specificity

Tool to See CSS Specificity

Tool for Cleaning Up CSS

Order by CSS Specificity

Top 5 Mistakes of Massive CSS

Google: Efficient CSS Selectors

Procssor

Clean CSS

CSS Tidy

Answer 1

You could attempt to take a different approach, try to write your selectors as small (low specificity) as possible. and only make them more specific when needed. With that way of working you don't need a tool.

Answer 2

Just going to throw this out there-- it doesn't 'answer' your question,but it's a tool I like to spread the word about for people who do a lot of css programming: Firebug.

If you're not familiar with it, it's a tool for web browsers. You pull up your page once it's installed, right click and select 'Inspect Element.' It will show you all css affecting different elements on your page, and is useful for creating clean, precise css code. Also it makes it easier to see instant updates on what your page would look like with slight modifications. It will inform you of useless css code that's being overridden by other css code.

ALSO! Firebug now is available for almost all browsers. Not just Firefox. Personally, I'm partial to using it in Chrome.