iLearn | It assumes that coding is the goal. Software developers tend to be software addicts who think their job is to write code. But it's not. Their job is to solve problems.

OOCSS

Object Oriented CSS is to design a code to reuse for faster and more efficient stylesheets. It is easier to add and maintain.

Two principles of Object Oriented CSS

1. Separate structure and Skin

This means to define repeating visual features (like border and background styles) as separate “skins” that you can mix-and-match with your various objects in the webpage.

Example:
Repeating visual patterns

#box {
width: 75px;
height: 30px;
background: #eed;
border: 1px solid #000;
border-radius: 2px;
}

#block{
width: 250px;
height: 500px;
background: #eed;
border: 1px solid #000;
border-radius: 2px;
}

Instead we can add below style, to reuse with less code

.box {
width: 75px;
height:30px;
}.block {
width: 250px;
height: 500px;
}

.skin {
background: #eed;
border: 1px solid #000;
border-radius: 2px;
}

HTML

<div class=”box skin”>box content</div>
<div class=”block skin”>block content</div>

2. Separate container and Skin

The idea here is to consciously differentiate the rules of containers and the content that comes within them, so that content can be plugged into any containers irrespective of their parents. Avoid location dependent style.

For an example, instead of having sidebar class, we can have module class. By naming sidebar we are restricting to a certain position of our page. We are localizing it. Instead if we create module class, in future if we want to use same styling to some other position of our page. We can use it.