Utility

Utility CSS Stylesheet finding duplicate selectors and declaration differences

Occasionally we run into a style sheet which has not been managed well and has duplicate style block and style definitions.
When this happens it can be difficult to evaluate which style blocks are duplicated,  and which ones are still in use.

CSS Validators do not do a good enough job at identifying the duplicates and allowing me to make decisions on how to merge discrepancies.

So we came up with a utility that helps us to evaluate the duplicate selectors.  The utility is  here:

To use it we can simply paste in a giant style sheet block,  or type in the url of the css and it will download it. Downloading it can be useful as you fix your style sheet and want to know how it looks.

The output of the utility is an ordered list of all of the selectors,  in the case where there are duplicate selectors,  the duplicated attributes are highlighted,  if the value in the attribute is duplicated that shows red,  if it is unique,  it shows blue.

http://www.webuildplugins.com/css-stylesheet-evaluator/

The utility does not attempt to resolve the issues,  it simply highlights the duplicates to potentially help you identify the issues.

The utility does not attempt to recognize which classes may override each other.

Future enhancements to this tool may include

• the ability to download multiple style sheets – to help identify styles that may clobber eachother.
• the ability to paste in an html block or url which then extricates the css style blocks and linked style sheets to help identify clobbering or duplicated selectors
• a utility which combines unique attributes from multiple duplicated selectors and gives a copyable text block with the combined text.

 

In addition to the need we have while building websites or taking over other customer sites,   this too highlights our ability to build custom plugin utilities within WordPress.  We also sell this WordPress plugin to customers that may need it.