Think of your CSS as a bicycle assembly line using individual objects like wheels, handlebars, brakes, and seats. Our assembly will produce the final product, a bicycle. There will be slight variations on some of the objects, for example size of the wheels or color of the frame, which are issues that can be handled along the assembly line.
In order to efficiently assemble the bicycle, the original prototype is broken down into its individual pieces and the assembly. These individual parts are analyzed and the assembly line is created in order to efficiently put together the bicycle. A very similar concept can be applied to CSS. The design is analyzed and broken down into its individual working pieces. These CSS Objects are created in order to be re-used on the site, or our assembly line. The final product, the implementation of the design, is the culmination of the individual CSS objects. The OOCSS wiki further explains CSS objects as:
"A CSS object consists of four things: HTML, which can be one or more nodes of the DOM, CSS declarations about the style of those nodes all of which begin with the class name of the wrapper node Components like background images and sprites required for display, and JavaScript behaviors, listeners, or methods associated with the object."
This can be confusing because each CSS class is not necessarily an object in its own right, but can be a property of a wrapper class.
Let's take a closer look at a section heading example. We can write the heading CSS like this:
#container h2 { /*IDs limit use of rules*/
/* Over-qualification with h2 tag restricts use to only this element */
font-size: 2em;
line-height: 1em;
margin: 0.25em;
color: #CFC35D;
font-family: Verdana, Arial, sans-serif;
}
An issue with the above code is that it is an over-qualified selector that is limited to a h2 element that is nested within #container. When the same or slightly similar style needs to be applied in another area, the footer for example, I will have to duplicate the CSS rules as such.
#footer h2 { /* Only difference between this and the previous style is the font-size and extra margins. */
font-size: 1.5em;
line-height: 1em;
margin: 0.25em 0.5em;
color: #CFC35D;
font-family: Verdana, Arial, sans-serif;
}
The following is an example of a repeating pattern that can be abstracted as one or several CSS objects to be used individually or as an assembly of styles. First I need to abstract some of the styles to the default globals section.
The following selectors will create CSS rules that are applied to base elements like the body and h2. These rules are no longer assigned to an over-qualified selector as before. However, more minute styling needs to be created in order to finalize the desired display.
body {
font-family: Verdana, Arial, sans-serif;
}
h2 {
font-size: 2em;
line-height: 1em;
}
At this time, it is prudent to have an understanding of what the style is supposed to be used for and what it will represent. In this case, we are trying to create a header style for a section on the site. This knowledge will help us not only create the style, but also give it a semantic class name.
/* The font-family, which is usually applied on the entire site, is applied at the body. */
body {
font-family: Verdana, Arial, sans-serif;
}
/* The <h2> element has CSS rules that will be applied anywhere the element is used. */
h2 {
font-size: 2em;
line-height: 1em;
}
/* The new semantic class .section-header reduces the font-size and increases margin-left and margin-right. This new selector can be applied anywhere, including the footer, which will override the <h2> base element rules. */
.section-header {
font-size: 1.5em;
margin: 0.25em 0.5em;
color: #CFC35D;
}
The above example is a simple implementation of OOCSS. As we can see, the design of a section header has been broken down into it's individual styles and CSS objects have been created accordingly. Continuing, I will look further into the OOCSS guidelines and how to properly implement them.