Object Oriented CSS - should you care?
Few last weeks I’m keep thinking about the concept of OOCSS (Object Oriented CSS, first presented by it’s author Nicole Sullivan at Web Directions North in Denver). It is aimed to make it easy to maintain huge projects with thousands of sites and to make it easy for even beginners to participate in the project.
It works like this: If something on the site looks and behaves somehow it will look and behave the same way anywhere on that site. If you want to change the way it looks you have to add a class to that. The name however comes from related concept of “extending” elements look with classes - in OOCSS is pretty common to add multiple classes to one element. That’s all. Pretty simple, wouldn’t you say?
First time I heard this idea was after a huge project which I have written with the classic coding style - containter element has some class and a look of the content inside depends on the class of this container. This allows you to use CSS selectors at max and produce really nice looking and clean code which is pretty maintainable - well, for coders.
Then the problem comes in - programmers. They are really nice guys but they mostly know only basics about CSS and HTML. So if they want to move something on the page they usually just use cmd+c and cmd+v. And than it’s not working, they want to fix it, you do it and than it all happens again and again and again.
OOCSS promises to set you free of this. But as always there’s a darkside..
You have to change the way you write and think about CSS and HTML. Your code is suddenly flooded with classes, some of them with not really semantic names (what is semantic on .size1of2?). I’m semantic kind of guy, I really love Microformats and RDFa, I think about the meaning of every HTML element, I WANT my classes to be semantic.
Despite that I decided to give OOCSS a try. I want to try if its really going to make a difference for programmers and I wonder how will it work with Microformats - will I need much more classes even after applying them? And what about the diference of the file size - will it be noticebly bigger? Or smaller? And how will it work with LESS CSS?
There’s too many questiong waiting for answers. And I’m really looking forward to explore these things and to share my thoughts. I hope you’re looking forward too.