Object Oriented CSS, Grids on Github

How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS 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.

I recently presented Object Oriented CSS for high performance web applications and sites at Web Directions North 2009. If you didn’t attend my talk, you are probably asking yourself “what in the world is OO-CSS?”

Object Oriented CSS: Two main principles

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

I’m writing a framework to demonstrate the technique, but more than anything, Object Oriented CSS is a different way of approaching CSS and the cascade. It draws on traditional software engineering concepts like extending objects, modularity, and predictability. Solutions are judged based on their complexity, in other words, “what happens to the size of the CSS file as more pages and modules are added?”

The answer, for most sites, is that it grows out of control and becomes an unmaintainable tangle of spaghetti code. People often complain about CSS, and rightly so — even though it inspired a rant, I understand their frustration.

Current methods for writing CSS require expert level ability just to get started. To become a CSS expert, you need to spend couple years coding away in your basement by yourself before you are remotely useful. Front-end engineering needs to accomodate entry level, mid level, and architect level developers, but our sites are too brittle. You may have a perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we’ve set.

We don’t trust each others code

Imagine a JavaScript developer wrote a function to return area, and every now and then it randomly returned the diameter instead. The function would never make it through a code review, and yet we tolerate the same thing from CSS, as if it were immune from normal programming best-practices. This is why CSS code reuse is almost nonexistent. An object should behave predictably no matter where you place it on the page, which is why Object Oriented CSS avoids location dependent styles.

What not to do

#myModule h2{...}
#myModule span{...}
#myModule #saleModule{...}
#myOtherModule h3{...}
#myOtherModule span{...}

Developers have tried to sandbox their CSS into individual modules, to protect against the cascade. But in doing so we’ve ended up with a mess.

Object Oriented CSS Grids on github

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.
  • Solution for sub-pixel rounding errors.

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

Check out template.css and grids.css and the docs on the github wiki.

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

What’s up next?

Template and grids are ready for rock and roll. Please be my alpha testers, put them through their paces. Let me know if you find bugs or want additional functionality. I’m also hoping to contribute some of this back to YUI since they now have a github repository. How cool is that?

Rounded Corner Boxes and Tabs

Next up, modules. There are a million cool ways to create rounded corner boxes. I’m going to take several of my favorites (like CSS Mojo and Arnaud Gueras blocks) and convert them to OO-CSS. This will make it super easy for newbies to create their own modules, without needing to understand the minutiae of browser differences.

Video / Podcasts

YDN will publish a video of my talk and Web Directions North is putting out podcasts. I’ll tweet and post when that happens. The audio contains a lot more detail than the slides, so check it out as they become available.

107 thoughts on “Object Oriented CSS, Grids on Github”

  1. I just gave a presentation about this very topic to my company. I wish I had seen your presentation before I did mine. Lots of great stuff in here.

    I am curious though. One challenge that we have is that we use thirdparty libraries/frameworks that use their own CSS. How do you handle these types of challenges?

  2. It’s incredible your theory about Object-Oriented CSS but I don’t understand very well how to apply this on my projects mostly about the organization of files and what these files need to contain and please, do a more complex oocss layout example.

    Can you talk more about the UML diagram that you did? Will be fine!

    Thanks very much.

  3. Thanks for all your work on this. When I look at all your information, it was like a light went on in the attic! This was the same thing that happened when I started using the YUI CSS for the first time. Good job figuring this all out, because I see how it’s not easy.

    Now with the questions. I am in the process of implementing this on our website and things are doing pretty good so far, however, I am starting to run into bumps along the way and I am wondering if you still have any working examples floating out there on the web? I found this css and was wondering if I am close?

    http://www.borsaitaliana.it/media/css/styleContent.css

    Much thanks!

  4. Just like to say thanks for putting the OOCSS idea out! I’ve recently started utilising and embracing it in my development and I have to say that there’s no turning back for me. This approach just seems right and awesomely powerful.

    Cheers!

  5. Nicole,

    I need to leave this comment just to say thank you A LOT !

    I’m recovering from a health problem that took me off my web development learning program, just when I start to focus on CSS.

    Last week I restart my research and have seen your Object Oriented CSS presentation video. It put me back on the track.

    The concepts are awesome, the implementation is cute and you are GREAT !

    Will start re-factoring my page ASAP.

    Really really thanks.

  6. Hi Nicole,
    I really like this. I have one question though. When my boss, who seems to love saying this sort of thing, says “The b tags don’t have any semantic purpose.” What do I say to that?

    1. @Murray – Rounded corners are presentational fluff, so I use a presentational fluff tag to mark them up. It keeps the code clean and means I can do getElementsByTagName and quickly access all my corners. That said, if your boss insists, you can use whatever tag you like with a few simple modifications.

  7. Hi there,
    I guess there is a tiny bug in your code at github:
    in mod.css line 9 it states
    .hd,.bd,.ft,{overflow:hidden;_overflow:visible; _zoom:1;}
    it should be
    .hd,.bd,.ft{overflow:hidden;_overflow:visible; _zoom:1;}
    remove the extra comma sign.after ft

    Keep up the outstanding work!

  8. Hi Nicole,

    I’m a css newbie and am having a hard time getting the second tenet: Seperate the container from the content.
    I get the first tenet…basically use a grid system for the windows then a seperate css for dressing them. Could you define, positively, what this second tenet means?

    Thanks!

  9. The presentation is very smart and true. However, it is feasible only in cases where a website is designed, created and maintined by the same person, not by 4 webmasters in 11 years (+ their rotating superiors). Or, where a front-end team is lead by a solid man who knows how to talk to current bosses. Hope Nicole’s vision will become a standard some day soon.

  10. Just came across this looking at the speakers for AEASF2009, which sadly I cannot attend this year. When it was still a possibility I was looking forward to your presentation the most!

    I just wanted to tell you though, that you are now one of my Web Dev Heroes. :)

  11. Very interesting, but I think you exaggerated. CMSs allow us to build unlimited pages and reuse base CSS. They also have widgets/blocks/etc with the same styling that is repeated to every widget we add.

    WordPress is taking another step on this idea. With child themes, we can develop a base theme only with strucuture styles and then develop as many child themes as we want applying colors and so on. Coincidently I’m doing it ATM, I’m developing a theme that has Semantic XHTML and CSS that structures positions and sizes, and 2 or 3 child themes that apply different colors to it.

    Children can be as visually different as webdesigner’s criativity allows, while back strucuture and text formatting is the same, allowing me to have many sites and manage them as if they were only 1. I can use the same plugins with the same configs, and everytime I wanna implement a new feature I add it to base theme, style it, and when it is updated all sites instantly show this new feature with their respective colors without needing to touch children.

    The situation would be as bad as you say if for each post we’d need a new custom template, with more styles and stuff.

  12. Hello,

    I was wondering if you could answer a complaint and one additional question I may have for You.

    a) Having your code on github is a bit problematic for me because whenever I decide to download the source code, as I live outside the U.S. the pop-up for the download opens up but does not load completely – it is almost impossible for me to download your stuff.

    b) Can I use your code, as in OOC, in any projects that I might sell on Theme Forest as website templates?

    1. @Robert a) fork the code using github on the command line b) yes, of course. Just keep my attribution comment in the code.

  13. Hello Nicole and thx for your great job about OOCSS !
    I have a question. Why do you set this property in your template.css :
    main{
    *display:block; width:auto;
    }
    Is it necessary ? IE 6 & 7 don’t understand table-cell property so they automatically switch the main div into a block element. Isn’t it ?

    Thanks a lot :)

  14. @Nicole – Of course :) I’m testing OOCSS before to use it in a big project. So i’ll be very happy to contribute to your project.

  15. @Nicole – I tested it on IE6&7&8 / FF3.6.8 / Safari 5 / Chrome 5 under Win 7 and FF3.6.8 / Safari 4 under Mac OS X and it work well :)

    I also deleted this properties :
    body{ _text-align:center; IE5.5 }
    .page{ _text-align:left }

    Because i consider that IE 5.5 is too much older for me :)

    ++

  16. Hi all

    Nicole, I’m thrilled with your very formal approach to css. For a an inexperienced frontend developer I think oocss gives me a jump start towards producing better html/css.

    A quick question. Is it possible to achieve equal height columns in both oocss- grids and templates (one of many none oocss solutions can be seen here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks)?

    Heres an example of ‘template.html’ where a possible requirement would be, that ‘Left column’ and ‘Main colulmn’ had equal height (defined by the cell with the most/heighest content) and different background colors.
    http://img808.imageshack.us/img808/4241/oocssequalheighttest.jpg

    Is this possible with to do this without beding oocss out of shape?

    thanks / a

  17. First – outstanding. I’m also surprised and impressed that you keep up with these posts! I came to your site after watching the youtube vid “The Top 5 Mistakes of Massive CSS” and I’ve been playing around with your grid system a bit. Its really wonderful.

    Only one bit baffles me — why is it if I create a class like .size1of10 and set it to 10% width, it doesn’t behave as the other classes? 10 in a line break for me unless they have 0 border and padding — while your default sizes are fine with padding. I tried both a 1of10 @10% and a 1of8 @ 12.5%. I know I could make two 1 of twos containing 1of5s, but that’s not really the point :-)

    I guess I’m not enough of an expert to understand why its failing. If you have a moment to provide any insight, I’d appreciate it.

  18. Really sorry, please delete this post and either the entire other one I made or the last 2 paragraphs. I’m apparently both blind and a little dumb, and padding broke your basic included widths also, which is what i expected but somehow failed to see.

    1. @erik – do you mind if I leave your question and answer? Others have had the same trouble, so your process will help them figure it out. :) The other two culprits when grids break are oversized content and forgetting to use the class “lastUnit”

  19. Nicole,
    this is a nice way to structure the CSS stuffs, but you use too many files and many hacks for IE5.5 etc.
    What do you think about performance and CSS compliance (W3C)?
    Do you do something to take over this issues?

    All the best,
    Bruno

  20. Now you all know Im a css novice :) I appreciate you took found time to answer my question. Will post in the google group from now on.

    Thanks / a

Comments are closed.