As of late I’ve been very adamant about DRY CSS principles. Not so much the descriptive ID and class selectors that some folks wrap their other selectors in, but the focus on not repeating the properties and grouping like selectors. I’ve even taken it a step further and have been dropping properties that are too similar and reducing code further. Border radius of 8px and 10px? It’s too miniscule to matter and I end up consolidating.
So with the rework of the SceneKids.com CSS to be mobile-first responsive, I’ve been doing as much refactoring and consolidating as I can. Like anything, I’ve still found myself slipping up and creating duplicate styles because the process of finding duplicate properties is simply a manual search for the style in the file. I am exceptionally consistent with how I define properties (single space after the colon, tabs not spaces, et cetera) but that doesn’t matter because I have to search for each new property either before I add it or after I paste in the styles from the old CSS file (reads: this isn’t a ground up rewrite).
Like just about anything else, I hit Google up to see if there was a program out there that would process a CSS file and report on any duplicate properties. No dice, so I hit up my Twitter followers. @norcross suggested CSSTidy but I didn’t see any options to simply report on the dupes instead of optimizing / minifying. I’m also unsure if it handled consolidating properties, if so that would be cool (and if not, would be another tool I’d like to build in the future) but I really just wanted to see the offending properties.
Because of my control freak tendencies and wanting to be able to maintain a optimized LESS file I set out to build the script I had in mind. Yes, I’m a LESS freak and have been using it to exploit the fuck out of @imports and @vars, that’s for another post though ;). The script I wrote is called wetness and it detects how wet or DRY your CSS is (or LESS or SASS). I had originally planned to code it in node then decided it would be fun to code in go and ultimately settled on building a shell script. At one point in my life PHP was my go to language for just about anything. Python started to take over any of my CLI endeavors and from what I can tell 2014 will be the year of the shell script for me.
That all being said, wetness is a simple shell script that takes a CSS file as it’s only argument. The script will read in your file, run through every line of CSS and spit back the properties that occur more than once (if any). The output has pretty colors and I set up a personal Homebrew tap for easier installation on OSX. You can check out the source and install steps on GitHub released under the MIT License. Full diclosure, you will need Bash 4 which can be installed with brew install bash on OSX which still ships with Bash 3.
I think the bugs are worked out but if not, open an issue or better yet, fork it, fix it and send me a pull request! I’m unsure how much more development this will see moving forward as it does everything I need it to do already. One suggestion (from Geoff Oliver) was to include line numbers for the duplicates. Probably will add that in as an option argument, unsure when though. Oh, and here’s what the output looks like:
