How to Write Object Oriented CSS

Tetris video game cover

* Image taken from the cover art of the world-famous Tetris video game.

Objects Shmobjects.

The first time I heard about Object Oriented CSS was from a tutorial on NetTuts. At the time, I viewed OOCSS as just another random framework somebody was imposing on the web community. I had not given it much thought since then, until I listened to Nicole Sullivan‘s interview on The Big Web Show. She’s a CSS pro who started OOCSS.org and the open-source OOCSS project on github. Nicole has been hired by mega-sites like Facebook to optimize their CSS files. FACEBOOK! That must have been insane!

Oh, OOOOOOOOOh CSS!

Having spent a chunk of the last 4 years of my life learning and working with CSS on a daily basis, I was intrigued to hear the thoughts of an elite CSS Ninja. Half way through the interview I found myself inspired to become an Object Oriented CSS-er.

I started browsing the Google tubes and found a nifty presentation created by Nicole. Enjoy:

The Fast And The Fabulous
http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=velocity-thefastandthefabulous-090622131645-phpapp01&stripped_title=the-fast-and-the-fabulous

If you didn’t have time to click through the slideshow here is a super tiny break down:

Two main principles

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

Applying these principles creates efficient CSS code. This means cleaner smaller CSS files that load faster.

What does it look like?

Well, kinda like this…

[html]

</div>
</div>
[/html]

This basic structure is very flexible. By adding classes you can “extend” the object class to fit each scenario the design requires. For example:

[html]<div class="object simple half"> …[/html]

Extending the object class is faster to write and to load.

I’m extremely guilty of writing overly specific CSS, thinking that everything has to have its own ID. Trying to be too semantic, I guess. I’ve confused myself by listening to too many different theories about how to structure your HTML and how to reference selectors in your CSS files.

I’m realizing that all I’ve needed was a little objectivity.

Advertisements

Published by

parisvega

Earth rider. Product Manager/Designer guy by day. Dirt, plants, wood and concrete by night. #permaculture

11 thoughts on “How to Write Object Oriented CSS”

  1. Pingback: How to Write Object Oriented CSS | ParisVega.com | Graphic … | My Blog
  2. Pingback: Mother died today. Call me Ishmael. Marley was dead. It was the best of times… | Conor Maguire's Blog
  3. All of the principles sound great but almost no examples. I came across this concept, and Nicole’s ideas, several months ago, and thought the same thing then. Why not a tutorial, maybe some examples?

    Like

    1. I had the same problem. The only example I could find is the one she references about her experience working with Facebook. Since then I’ve attempted to apply OOCSS principles and use the OOCSS framework on a big project. The results were mixed. Some of the basic elements of the framework were great at saving time writing code & space in the files. However, there was a bit of chaos when it came to figuring out when to use a “module” how to organize module skins. In the end, I regretted using the framework on that specific project because it actually took much longer to write the code than normal. Granted, much of my time was spent studying OOCSS and trying to gain an understanding of the principles involved. A more savvy coder would probably have more success than myself.

      Like

  4. What You Need To Know About Payday Loans: The Real Drawbacks.
    When you learn how to budget your earnings, you could find you will not must use advance loan loans online
    or cards as often. If individuals borrowed responsibly then there would
    not certainly be a concern.

    Like

  5. Most with the Fp Franking Machine Ink are delivered which has a
    complete warranty and also backed by 100% customer satisfaction promise.

    The recommended DC system should have a very starter motor using a battery-charging
    alternator having a solid-state voltage regulator. There are lots of world-class bars, restaurants, night spots, malls,
    as well as other tourist destinations that contribute on the positive development of property values inside area.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s