Object Oriented CSS

/ / Blog, Thinking

OOCSS (Object Oriented Cascading Style Sheets), it seems new also quite a mouthful name but, it is a half a decade old concept that makes visuals in front of the web page more robust and dynamic, in another way this concept helps to implement styling on web pages, much larger scale with more efficient manner.

As a term “object” is something that consist, a state and a related behavior to that particular state, if we relate it to more practical way, an object stores its state in “fields” (variables in some programming languages) and reveal its behavior through “methods” (functions in some programming languages).

So what is a CSS Object? Simply a CSS “object” more of a repeating visual pattern, that can be applied into an independent part of HTML, CSS and “quite possibly” JavaScript. That object can then be reused across the website. Similarly, in the OOP, a pattern abstracting into an isolated block of code.

There are two principals to follow in this OOCSS, firstly “Separating the structure and the skin”. What this thing mean is to define repeating visual features such as background and border effects/styles as separate “skins” that we can combined or modified with various objects to achieve a large amount of visual data without putting too much code. There is another side, the separation of the skin and the structure means the classes to name the objects and their components, rather than depending just on the semantics of HTML. Referencing these kind of classes in our stylesheets, let’s say rather than directly styling the “<p>” (paragraph element). Its also flexible, for instance, when a new type of an element is about to introduce (e.g. ), it could be integrated into the HTML without having to touch the CSS.

Second principle is the “separation of container and content” this means “rarely use location-dependent styles”. An object should look the same no matter where we put it, instead of styling a specific element with a class, create and apply a class that describes the element.

This will give us an assurance that, all unclassed elements will look the same, all the elements with that category class(mixins) will look the same, also we don’t need to create a override style for the case when we actually do want that element with the class look like the normal element.