CSS Restructure

I recently watched "The top 5 mistakes of massive css" and got to thinking about how to structure css. For a while I've been separating structure and chrome and enjoying small helper classes. I'd been drawn away from delving too deeply into helper classes by the idea that single declaration specificity was a way to optimise page drawing time (i.e. div.className over .className).

The idea I took from the video above was that my page drawing savings would be lost against the page weight savings. Another big draw for me was the idea of maintainability. I am really enjoying working on a product at present, one of the main advantages is that maintainability is much more relevant and worthy of additional investment. So i decided to restructure and after looking at the "oo css" code, I decided to restructure on 3 main principles.

1. Uniformity (reducing complexity)
2. Using small helper classes
3. Managing specificity

Conclusion
I found the process quite challenging, but very rewarding. I was shocked when I saw the results though, a reduction in the unzipped css file sizes from 47K to 26K. That's a pretty big saving, there was cruft in the files from the constant process of change during a build cycle, but even so...

I am convinced that my current method of working is advantageous, but I have not finished experimenting or optimising yet. What I like most about this process is that you provide yourself with a series of tools to build future interface objects without adding more css.

I found myself simply combining helper classes to great effect, for example, when it came to creating the paging list, I realised that I could even design it myself. All I needed was to make a list display inline, the li's should have the primary colour as a background and have rounded corners. Well, all of those styles already existed, 2 classes on the ul and one on the li.

One concern I had initially was that multiple helper classes on each li of a long list would be a real pain. But I found that I rarely needed that, 4 was the most classes on any particular element and that was never a repeated element. However, it may just be that this particular site didn't require too much granularity of helper classes.

I also decided to obfuscate my class names somewhat for the sake of optimisation. Hence rounded corners class name became rc, list styling one became ls1 and so on. I have written documentation to define these classes, but time will tell if this is a good idea.

My theory is that the application of any methodology must be directly relevant to project. I really like this way of working and it seems to be ideal for my current project. I will continue using it until I either find a better way or until I find a project on which this methodology is non optimal. This article is simply an explanation of how I worked with the cssfor my project, not an endorsement of this as standard practice.