Last week I gave a talk at MinneWebCon along with Ken Loomis and Ethan Poole. My section of the talk dealt with the CSS we use at work. One of the main problems I’ve come to have with using CSS frameworks is that they put presentation back into the markup. Every CSS framework I’ve seen has classes like these:
- ez-50 (ez-css)
- container_12 (960GS)
- grid_1 (960GS)
- span-4 (Blueprint)
After years of adopting standards that keep presentation separate from the markup, frameworks like these (and others) put it right back into the code. Not only is that a bad practice, but it removes one of the chief benefits of CSS: the ability to change your presentation without touching the markup.
The most common problem these frameworks solve is laying out columns. So I came up with a handful of CSS classes that solve the same problem, but do so in a way that will allow you to alter the appearance of the pages without altering the markup.
These classes are applicable in a general way (i.e., within the content), so it’s useful to keep them named as they are for that purpose. You can also copy these same styles to your ids to get the desired widths and column layout. I encourage you to write these styles into page ids whenever possible as that will make your page markup more semantic. You should think of these classes more like scaffolding than a framework. You can get started quickly, then modify them to meet your needs. The minified file is only 412 bytes. (more…)