Visualizing CSS Documents

October 13 2006

CSS is often a convoluted mess, and can often be normalized into a smaller, more concise machine. However, there are many reasons why one would not want overly normalized CSS, due to the possibility of changes to layout, markup structure or anything else that would require you to target specific elements. Ideally, a tool could be created to create a balance in normalization, maintainability and file size, but we'll have to make due with things like CSS Tidy for now.

I've made a visualization that I think you might find interesting. I have taken OSWD.org's CSS and created a picture out of it. The picture shows the One to Many mapping of CSS selectors to properties defined within them. You'll notice that there are many curves whose right end-points intersect. This of course is the “many” side; it represents a possible normalization point.

Portion of CSS visualization of OSWD.org

The code used to create this visualization is a bit of a mess. Configuration variables are embedded some where in the middle (look for config =). If you're into it, feel free to submit patches.

Source: buildcssmap.py v.00001 (extreme beta)