CSS bloat happens to all of us. Sometimes it’s our own fault, sometimes it legacy code. Whatever the reason, bloat is a diseas that needs cureing.
At the moment, I’m trying to clean up a some large css files and an easy cure is not in sight. As I’m planning on doing this thorough, I’ve been reading up on some best practices and tricks for the past few days. Setting up a system that is both clean and future proof is a very hard thing to do. I came across some tools and tricks that I like to share with you all (it’s also a personal reminder to myself)

1. Grep script

First up is a grep script to analyse CSS files. I found this on the web and augmented upon it to satisfy my needs.

Different CSS techniques and their performance

mkdir css-stats
# caching the find command for better speed
find . -name "*.css" > css-stats/files.txt
cat css-stats/files.txt |xargs grep "float" > css-stats/float.txt
cat css-stats/files.txt |xargs grep "font-size" > css-stats/font-size.txt
cat css-stats/files.txt |xargs grep "color" > css-stats/color.txt
cat css-stats/files.txt |xargs grep "line-height" > css-stats/line-height.txt
cat css-stats/files.txt |xargs grep "h1" > css-stats/h1.txt
cat css-stats/files.txt |xargs grep "h2" > css-stats/h2.txt
cat css-stats/files.txt |xargs grep "h3" > css-stats/h3.txt
cat css-stats/files.txt |xargs grep "h4" > css-stats/h4.txt
cat css-stats/files.txt |xargs grep "h5" > css-stats/h5.txt
cat css-stats/files.txt |xargs grep "h6" > css-stats/h6.txt
cat css-stats/files.txt |xargs grep "width:" > css-stats/width.txt
cat css-stats/files.txt |xargs grep "margin: 0" > css-stats/margin0.txt
cat css-stats/files.txt |xargs grep "padding: 0" > css-stats/padding0.txt
cat css-stats/files.txt |xargs grep "!important" > css-stats/important.txt
# omit quotes
cat css-stats/files.txt |xargs egrep "url\('|url\(\"" > css-stats/url.txt
# search for ids (only lines beginning with #)
cat css-stats/files.txt |xargs egrep "^#[a-zA-Z]?" > css-stats/ids.txt
cd css-stats
#print the summary
wc -l *

What this script does, is generate a list of all the rules I ask it to search for + the amount of occurances.
For example: how many times do we declare the font-size, h1,width,… in a css file.
(The above script was tested in OS X 10.7 terminal)

2. CSS stress test

Second is a nice little bookmarklet by Andy Edinborough. It parses your page and inspects the css bottlenecks.

bookmarklet: CSS Stress Test. (on Github)

3. Dust me selectors

Another great tool to battle bloat is the “dust-me selectors”plugin by Sitepoint. It’s a tool to inspect unused selectors in your CSS. At the time of writing the bookmarklet didn’t work in FireFox (FF10) due to settings in the plugin.

firefox addon: dust me selectors by sitepoint

Dust me selectors

You can fix this by making the folllowing changes:

  1. download the source code
  2. open the install.rdf file and change the <em:maxVersion>xxx</em:maxVersion> to <em:maxVersion>*</em:maxVersion> (this bypasses the check for a max version.)
  3. Save the file
  4. Zip the content of the folder
  5. rename the zip file to dustmeselectors.xpi
  6. open it with Firefox

4. CSSReviewr

CSSReviewr is an online tool to inspect CSS files. At the time of writing this tool was in beta. It offers a lot of settings for testing your code. This tool is a lot like the better known CSSLint.

5. CSSLint

CSSLint is the result of a collaboration between Nicholas C. Zakas & Nicole Sullivan. Both used to work at Yahoo on performance optimisation. If you havent already, you should check out Nicole’s talks about CSS performance. She also has a small CSS framework called OOCSS. More on this in late posts.

6. Yslow

Also from this yahoo group comes the great Yslow tool. It’s not pure for CSS but offers some features that you should be aware of when creating CSS files. What is the size of my CSS file, is it gzipped, does in have the correct expire headers,… It also offers a good explanation of what goes wrong when you don’t get an A grade for something.

7. CSS browser support

Quirksmode is about the only site I know that has an overview of css features and browsersupport.
When some CSS is not working as expected, this is the one of the first sites I run to for guidance.

8. Pretty CSS

While writing CSS that needs to be used by a lot of people, it’s good to have some coding guidelines. Tings like: what indentation to use, how to write selectors, how to place bracers etc… Processor.com can help you with this. You paste your css or provide a url, select your prefered options and download a pretty css file. Eazy as pie!

Related Blogs