The Future of Writing CSS - OOCSS

Object oriented CSS was proposed by web developer Nicole Sullivan in 2008. Her goal was to make dynamic CSS more manageable by applying the principles of object oriented design popularized by programming languages such as Java and Ruby. Using the OOCSS framework results in CSS that is reusable, scalable and easier to manage.

OOCSS draws upon many concepts in object oriented programming including the single responsibility principle and separation of concerns. The goal is to produce components that are flexible, modular and interchangeable.

CSS Code


.button-white {
width: 150px;
height: 50px;
background: #FFF;
border-radius: 5px;
}


.button-black {
width: 150px;
height: 50px;
background: #000;
border-radius: 5px;
}


OOCSS Code


.button-white {
background: #FFF;

}


.button-black {
background: #000;
}


.button{
width: 150px;
height: 50px;
border-radius: 5px;
}


class="button button-white" for White button
class="button button-black " for Black button

The Benefits of Object Oriented CSS

1. Speed
2. Efficiency
3. Scalability