What is OOCSS ? (Object Oriented CSS)

Object Oriented CSS is a method of development as it pertains to the HTML and CSS relationship designed to reduce redundancy in CSS, primarily to make manageable code. The idea is (basically) to take reused styles and assign them to individual classes, then the elements that use those styles take on that class, plus additional classes for the remaining .

INTRO

Object Oriented CSS breaks up CSS into reusable objects which creates faster & more efficient style sheets.

The two main principles are to separate structure from skin and Containers from content.

STRUCTURE

Structure classes are the overall structural shape of the object.

These are usually object specific and paired with a skin class to achieve the final result.

SKIN

Skin classes are the look and feel of an object. Colors, backgrounds

and brand specifics can be reused, so they are separated into their Own classes.

REUSABLE OBJECTS

Content should not rely on its container for styling so nested elements need to be separated out for maximum re usability.

Example CSS (without 00CSS):

***

.button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #ccc;
background: linear-gradient (#ccc, #222);
box-shadow: rgba (0, 0, 0, .5) 2px 2px 5px;
}

.card {
width: 400px;
OverfloW: hidden;
border: solid 1px #ccc;
background: linear-gradient ( #ccc, #222);
box-shadow: rgba (0, 0, 0, .5) 2px 2px 5px;
}

Example HTML:

***

<div class= "card gradient-skin">
. . .
</div>

<button class= "button gradient-skin" type="button">
Button Label
</button>

FINAL THOUGHTS

Object Oriented CSS is a great way to break up style sheets into reusable chunks but requires a little planning in advance.

Consider combining with a naming convention for better code consistency.