Is your CSS easy for another person to deal with? If they want to add a new element to the design, would they find it easy to build on your work, or would they have to create brand new class or ID declarations for each addition?

I’m sure we can all agree that none of these outcomes are much fun, and the less painful it is to deal with someone else’s CSS, the better. So let’s see how Object Oriented CSS have benefits on your project.

Object Oriented CSS isn’t really a framework … but a way of writing scalable, sane, maintainable CSS.Object Oriented CSS (OOCSS) is making a mental shift towards easy maintenance and reuse of your styles, even if it means writing extra HTML markup.

Object Oriented CSS methodologies help you to look beyond your immediate design goals and organize your code so that adding new site content that reuses the same styles in the future becomes trivial. With OOCSS, adding a new type of page to your site should mean that there’s no need to create additional CSS styles or selectors. New page types should be able to reuse existing CSS styles as much as possible.

An Example in Code

Let’s say every page of your site had a sidebar, the code for which looked like this:

Traditionally, your approach to this might be to add a class to your page’s

<body>

tag:

<body class="onsale">

Then you would set about writing a bunch of style rules like this one:

body.onsale .sidebar {
background-color: #FFA500;
}

The approach recommended by Object Oriented CSS is quite different
In OOCSS, instead of a single class applied to the body of your page, you would create a new class for each type of element that you wanted to change for the sale. Here’s what the sale style for the sidebar might look like:

.onsalesidebar { /* extends .sidebar */
background-color: #FFA500;
}

This class is said to extend the existing class that describes the standard style for the element. You then apply it in addition to the existing (base) class:

If you’re lucky enough to be the only front-end developer working on a project, you might like to take the OOCSS principles for a spin. Where the reusability benefits of OOCSS really shine, however, is when working in a team environment.

Senior front-end designers can define the reusable structures for the site. Visual designers can apply attractive CSS skins to those structures. Content editors can write the content that slots into those structures with confidence, knowing that only the styles they expect will be applied to the content they write.

Advertisements