OOCSS - Object-Oriented CSS

What is OOCSS? OOCSS is a methodology of writing modular, scalable CSS. It was pioneered by Nicole Sullivan (otherwise known as stubbornella) in 2008/2009. Much like BEM, OOCSS is built on a few straightforward concepts. First, separation of structure from skin, and second, separation of container from content.

Separation of structure from skin

This sounds more complicated than it actually is. The truth is, every web designer does this without even thinking. Let's just imagine I've asked you to create the header for a website about bananas. It will have a logo on the left and a search bar on the right, and following that, the navbar. Nothing new here, right?

You'll instinctively ask three important questions as you work out each component of this design feature. "What size is it, where does it go, and what does it look like?". For the header container you'll probably think, what width and height should this header be? So we'll make it 100% wide. As for the height...