Concept of Object Oriented CSS

Object Oriented CSS (OOCSS) is an approach for writing CSS that’s fast, maintainable, and standards-based. OOCSS is implementing the concepts of OOP in structuring and building CSS rules, which are easy to reuse, thereby reducing the loading time and increasing the performance of web pages incredibly. This is neither a framework nor a technology, but an approach adopted in building the rules, so as to make the code more reusable, maintainable and scalable

Other useful CSS articles:

Nicole Sullivan, user Interface engineer first used this term and she has done a number of presentations with accompanying slideshows. I recommend watching Nicole Sullivan’s presentation on Object Oriented CSS.

What is a CSS Object?

A css object is any repeating visual pattern, which can be abstracted into a snippet of html, css, and sometimes javascript. These visual patterns become objects or modules through css classes that can be reused throughout a project or projects.

Following are the two key aspects in object-oriented approach to CSS building:

Separate Structure and Skin

This means to define repeating visual features as separate ‘skins’ that you can mix-and-match with your various objects to achieve a large amount of visual variety without much code. Separating structure and skin can also mean using classes to name your objects and their components, rather than relying solely on the semantics of HTML.

By referencing these classes in your stylesheets (say, rather than directly styling the <img> element), your HTML can be flexible. For instance, if a new media  element were to take off in the next few years, it could be integrated into the HTML without having to touch the CSS.

Separate Container and Content

This means ‘rarely use location-dependent styles’. An object should look the same no matter where you put it. So instead of styling a specific <h2> with .myObject h2 {…}, create and apply a class that describes the <h2> in question, like <h2>.

This gives you the assurance that:

  • All unclassed <h2>s will look the same
  • All elements with the category class will look the same
  • You won’t need to create an override style for the case when you actually do want myObject h2 to look like the normal <h2>

Avoids in OOCSS

  • Avoid the use of IDs for styling
  • Avoid descendent selector
  • Avoid using !important
  • Avoid attaching classes to elements in your styleshee

Advantages

  • Less Duplication of Code
  • SEO friendly pages
  • Ease of Maintenance
  • HTML markup used in sensible class names and hierarchy
  • Better page optimization and most of the components are reused
  • As change the base object can completely change the whole presentation layer

Disadvantages

  • Object Oriented CSS is best for large websites
  • Documentation ia a must otherwise its become a difficult for other developers

In Closing

I think OOCSS has a bright future in CSS development, and it’s a concept that all developers should start incorporating into their projects. I really hope that this article is useful to you. If you have any questions regarding this article, let me know in the comments below.