It’s not like I don’t have enough on my plate and I need to find new stuff to keep busy with. Despite that, my list of things I want to check out seems to grow each week. Two things I’ve been wanting to look closer into are 960 Grid System, and Object-Oriented CSS.

960 Grid System (960gs) is a CSS framework that’s – not surprisingly – based on a grid system with a width of 960 pixels. Why 960?

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

I’ve been using 960 or 970 pixels as a recommended width for sites for the past two and a half years or so, but I’ve never tried working with a grid system. Although I tend to do the development side of things and not so much the design, when I get site comps they’re very often based on a grid of some sorts. That makes me curious to try something like 960gs to see if it speeds up development any, or at the very least, facilitates cleaner, more uniform CSS.

Two of the biggest things that have stopped me from using a CSS framework in the past are extra bloat from unused rules, and having to resort to non-semantic class names. 960gs currently has their CSS file down to 5.4kb, so I guess that trade-off depends on how much CSS it actually saves you from writing.

Object-Oriented CSS (OOCSS) was first presented by Nicole Sullivan at Web Directions North 2009. The first thing that caught my attention was the name, “Object-Oriented CSS.” Definitely not something I had heard of before, I read her slides on the subject and have been interested in pursuing it further ever since.

As stated on her post about it (linked above), OOCSS has two main principles:

1. Separate structure and skin
2. Separate container and content

Hang on, isn’t separating structure and skin exactly what CSS is in the first place? Yes, but she’s not referring to HTML (structure) and CSS (skin). Instead, it’s about having one class that handles the complexities of presentation, then building on that class with additional ones that provide the skin: colors, borders, background images, etc. For further explanation of these two principles, read her follow-up comment, as well as her response to another good question.

Edit: There’s also a great OOCSS FAQ over at GitHub.