OOCSS

I’ve been working with OOCSS on a few projects and I’ve been really impressed with the concept so far.

For those who don’t know of the concept, OOCSS stands for Object Oriented CSS — @stubornella can explain it better than me on the GitHub repo: https://github.com/stubbornella/oocss/wiki

I had previously considered this sort of approach to only be suitable for prototyping frameworks, such as Zurb Foundation. I was originally hesitant of the presentation naming of the classes (I was never a fan of presentational grids to begin with) but I have understood that this approach is much easier to understand when multiple people are working on a project, without any documentation.

The idea of potentially using multiple classes for each element struck me as bloating the file, but it makes sense.

So, my concerns:

Grids. Name them how you like: “.size2of3, .col1″ but they work. If it were using those, or using “#primary” I know which I’d go with now.

The idea in the past has been that we could restyle #primary and change the width, padding, everything. But when has that happened? Restyling a website with JUST CSS?

I like presentation grids now.

The next thing, whether to go presentational on anything else? Colours, sizes? In some previous projects I used classes like “.orange”. This I feel is wrong. I now define primary, secondary and tertiary colours. Not only does this keep a sense of order through the whole project, but if you change the brand, the colours can change with no HTML amends (sounds a bit contradictory I know).

The next thing. Responsive. I’ve been a massive advocate of responsive, but the issue I have with presentational grids is that they no longer make sense when you want to change the view.

Some systems decide to revert to a 1 column approach. Whilst this might be OK for mobile, the tablet could be different. Zurb actually have phone class names that you can use. e.g. (“.size2of5 .phone1of1 .tablet1of2″) but that seems to require a lot of extra thinking, and extra bloat that is unnecessary.

I’m still thinking about this one. It also doesn’t cater for the ‘mobile first’ approach.

So, there are lots of things to think about, but I do feel like it is the way to go.

Want to know more. Well, follow @csswizardry and @stubornella and check out the following pages:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>