Object Oriented CSS or OOCSS

Object-oriented CSS, at its core, is simply a framework or a methodology for writing cleaner, dryer, well formatted and light weight reusable CSS. It is just a paradigm shift. We can also say it is a simple pattern and form of best practices for writing the CSS. It allows you to write fast, maintainable, standards-based front end code and adds much needed predictability to CSS so that even beginners can participate in writing beautiful CSS.

What are the principles behind “Object Oriented” programming?

It is basically programming blocks of code that you can use over and over again. These reusable blocks of code, often called “objects” in other programming languages, are often referred to as “modules“in HTML/CSS. So for our purposes, OOCSS is basically a flexible HTML structure that you can apply sets of efficient and flexible CSS to.

Two main principles behind Object Oriented CSS:

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

How does OOCSS improve performance?

The performance benefits of OOCSS are twofold:

  1. Heavy reuse of CSS code, so less CSS code needed, which means:
    1. Smaller files, hence faster transfers
    2. A bigger percentage of the CSS code needed on most pages of your site is likely to be reused and possibly cached by the browser
  2. To a lesser degree, reduce repaints and layout calculations on the part of the browser. On a single page, the more CSS rules are reused, the less time the rendering engine spends calculating “computed values”

Benefits

Some of the benefits of using the OOCSS

  1. Modular- combinable, reusable, extensible,
  2. Light- one to many relationship between CSS and potential layouts.
  3. Fast– Minimal HTTP requests & minimal size.
  4. Future-proof- maintainable, semantic, standards oriented, prepared for future browsers, redesign compatible.
  5. Visually interesting and adaptable– respectful of UED and marketing constraints, Simplifies and speeds CSS development.
  6. Accessible– SEO Screen readers, etc.

Best Practices

  1. Create a component library
  2. Use consistent semantic style and minimize selectors
  3. Design modules to be transparent on the inside so that we can separate structure and skin, and container and content
  4. Learn to love grids.
  5. Extend objects by applying multiple classes to an element
  6. Use reset to set the initial point to zero.

Pitfalls

  1. Avoid specifying what tag a class applies and ids to style inside the main content areas.
  2. Avoid drop shadows and rounded corners over irregular backgrounds.
  3. User related images as sprite.
  4. Avoid height alignment and location dependent styles
  5. Avoid using image as text, redundancy and premature optimization.
  6. Location dependent styles

Getting Started

Download the file from http://oocss.org/velocity/velocity-download.zip

References

Add new comment