Optimizing Codes with Object Oriented Cascading Style Sheets

Object Oriented Cascading Style Sheet (OOCSS) ensures that your code is reusable, fast, maintainable, scalable and efficient.  OOCSS style sheets are easy to add and maintain and helps us to avoid duplicating our code. To achieve this, you need to add multiple classes to each element in your HTML in order to give it modular styles based on Skin, Structure, Container and Content.

Benefits of OOCSS:

1. Faster
2. Flexible
3. Easy maintenance
4. Less duplication of code
5. Reuse of styles
6. Improves site performance

How to start a project with OOCSS:

OOCSS is all about finding the style patterns that appear in our websites and creating multiple levels of styles through abstraction. Finding out where your content has the same margin, font, float or width will allow you to write less CSS each time by containing it in one class and thus ensuring reusability when necessary.

The two main principles of OOCSS are:

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

Separate Structure and Skin:

The structure of the page revolves around the elements’ size and positioning. Structure properties are generally invisible and the elements of a website have a visual aspect which is repeated in different contexts:

1. Height
2. Width
3. Margin
4. Padding
5. Position
6. Display
7. Overflow etc.,

Skin properties are visual properties of already positioned elements. The Skin properties are:

1. Color
2. Font
3. Shadow etc.,

This essentially means we must not mix structure/positioning properties with skin/styling properties on the same class. Thus, properties can be reused on a variety of elements, preventing property duplication in our CSS.

An example: buttons. A Classic CSS would be like this,

CSS:

.button {
display: inline-block; 
text-decoration:none;
border-radius:5px;
padding: 4px 10px; 
color: #FFF; 
text-align: center;
cursor: pointer;
background-color: #0070c0;
}
.button-primary{
display: inline-block; 
text-decoration:none;
border-radius:5px;
padding: 4px 10px; 
color: #FFF; 
text-align: center;
cursor: pointer;
background-color: #D9D9D9;
}
.button-success{
display: inline-block; 
text-decoration:none;
border-radius:5px;
padding: 4px 10px; 
color: #FFF; 
text-align: center;
cursor: pointer;
background-color: #449D44;
}

HTML:

<div> <a href=”#” class="button">Default</a> <a href=”#” class="button-primary">Primary</a> <a href=”#” class="button-success">Success</a> </div>

If you factor this CSS with OOCSS principles, you will get something more flexible:

CSS:

.button {     
display: inline-block;
text-decoration:none; 
border-radius:5px;
padding: 4px 10px; 
color: #333333; 
text-align: center;
cursor: pointer;
background-color: #D9D9D9;
}
.button-primary{
color: #FFF;
background-color: #0070c0;
}
.button-success{
color: #FFF;
background-color: #449D44;
}

HTML:

<div> <a href=#" class="button">Default</a> <a href="#" class="button button-primary">Primary</a> <a href="#" class="button button-success">Success</a> </div>

.button defines the generic properties -the “defaults” ones – for our buttons. If you override it, you come with new classes that you can combine to get the expected result.

The CSS Selectors and files SEPRATE STRUCTURE AND SKIN can be included or applied independently.

Separate Container from Content:

The Separate Container from Content requires developers to modify content using CSS class extension rather than context. The Container and Content are meant to break components’ dependency on their containers. Any object placed in another container will still look and behave the same.

CSS:

header h1{ 
font-family: calibri;
font-size: 2em; 
background-color:#F7E5E9;
color: #F44; 
} 
footer h1{ 
font-family: calibri;
font-size: 2em;
background-color:#F7E5E9;
color: #F44;
opacity: 0.7;
filter: alpha(opacity = 50); 
}

HTML:

<header> <h1> Separate Container and Content </h1> </header> <footer> <h1 class=”h1-size muted”> Footer</h1>

The elements I defined here are simply not re-usable. They directly rely on a specific container. But it is quite clear that some properties are not specific to this container.

CSS:

h1 { 
font-family: calibri; 
background-color:#F7E5E9; 
color: #F44; 
text-align:center; 
}
h1, .h1-size { 
font-size: 2em; 
} 
.muted { 
opacity: 0.7; 
background-color:#F7E5E9;             
filter: alpha(opacity= 50); 
}     

HTML:

<header> <h1> Separate Container and Content </h1> </header> <footer> <h1 class=”h1-size muted”> Footer</h1>

 UI Design and Style Guides:

To take this concept one step further, before we even receive or create a style guide we can start by designing sites in the same modular way that we want to be writing our CSS. To simplify, you are essentially writing the guide in small sections as you design it.

A style guide is great but only as long as the site design consistently reflects and adheres to it. This document can help designers and developers create consistent work that results in less code because we can all decide on common reusable styles and classes. The style guide serves as:

• A tool for ensuring consistency across a product set
• A way to get groups to work together
• The repository for design guidelines and standards
• A training aid for new members of the product team

Conclusion:

The main premise is to follow object-oriented programming paradigms in regards to code reuse. The goal of OOCSS is simple: to build optimized code that allows us to quickly and easily improve on it. Thinking “objects” is the kind of skill that will help you create re-usable objects and stop writing redundant code. It becomes easy to maintain code base and make modifications to existing UI without harming different parts of an application.