I am reading quite a few comments on mailing lists about how they’d like to improve the markup but show what we were doing many years ago. Ahem. When we were NOT yet doing HTML5.
I would like to remind that OOCSS as far as I recall is to use CSS selectors in an Object Oriented approach.
Nicole Sullivan, who coined the term made it pretty clear.
Separate CSS effects and assemble afterward.
Namely, separating:
- Structure and Skin
- Container and Content
Just think of things for their use, more than the specifics:
- helper link beside input
- placeholder where form buttons are
- Region where there is call to action
- Label is beside input/label over input
- Error message in any case possible
With the following requirement:
- Same HTML markup
- consistent look
- Easy to add javascript “behaviors”
- Not uslessly (imprisoning) specific (see: Our best practices are killing us)
All this and more are the benefits of imementing OOCSS
I recommend to have a look at markup libraries such as Twitter bootstrap, jQuery UI Bootstrap (jQuery UI, writing Twitter Bootstrap markup), Kickstrap, Zurb Foundation, Pea.rs, and others. I have a list on my delicious account tagged as css+framework
As an example of this concept, I wrote a plugin to create a form confirmation window using only two class names.
References
- Nicole Sullivan’s slides on Object Oriented CSS
- Natalie Downe’s CSS Systems
- Jonathan Snook’s SMACSS Scalable and Modular CSS