nextwebgen.com

Sometimes I’m so focused on JavaScript that it becomes a bit of a hammer for me that I try to use it on all problems. I forget about the power of CSS and what it can do. I recently met Nicole Sullivan at Web Directions North who is a CSS guru, especially around performance. She told me about an idea she’s been working on called Object Oriented CSS, and she’s just released open source code and documentation on the idea on github. From Nicole:

My [Object Oriented CSS] grids and templates are open sourced on github.  They have all the functionality of YUI grids plus some important features.

* Only 4kb, half the size of YUI grids.  (I was totally happy when I checked the final size!)
* They allow infinite nesting and stacking.
* The only change required to use any of the objects is to place it in the HTML, there are no changes to other places in the DOM and no location dependent styling. Eases back-end development and makes it a lot easier to manage for newbies.

http://wiki.github.com/stubbornella/oocss

…My prediction is that you’ll be writing complex layouts in less than 24 hours without adding a line to the CSS file.

More on Object Oriented CSS:

How do you scale CSS for millions of visitors or thousands of pages? Nicole first presented Object Oriented CSS at Web Directions North in Denver. Since then, the response has been overwhelming. OOCSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

Two main principles

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