Most of the people in the web development industry consider those who can exactly replicate the mock-up as good front-end designers. These designers may use a pile of unorganized CSS code to get the final result.
This may give the result that they wanted but it is not the smart way of coding CSS.
After a few months later, when the same designer or a colleague wants to modify the code or want to scale up the website, they may have a hard time managing the website if the CSS is unorganized.
When they change some lines of code in the CSS, it may make unexpected changes on the website and they would have to write another few lines of code to fix that.
If you have ever tried to modify a website that you have created a few months back or a website developed by your colleague, you might have come across this terrible moment at least one time in your career.
In large websites, managing stylesheets can be quite challenging. For those who are struggling with maintaining stylesheets, OOCSS can be the best solution.
What is OOCSS?
OOCSS is not a new technology built up on CSS. It is pure CSS.
It is a methodology, proposed and popularized by Nicholas Sullivan, of writing and organizing the CSS code to make the CSS modular and reusable. It reduces unnecessary repetition of same styles in different places in a stylesheet. This is achieved by separating repeated styles into particular modules or objects using classes which can be reused again and again on multiple page elements.
CSS becomes object-oriented when it depends on modules that can be reused.
The purpose of OOCSS is to make the stylesheet lighter and easier to be maintained.
Why should You Care about it?
New pages can be added to a website without writing a single line CSS code when the OOCSS is done perfectly. The modules used in the existing stylesheets can be applied on to the elements on the new page.
In every website, there might be a particular style that is common to different elements. It can be the color, background color, font-family, font-size, drop shadow or border etc. We identify the common styles required for different elements and abstract them and create a separate object.
Here is a small example of how we separate common styles from different elements and make it into a module.
#sidebar {
background-color: #232323;
color: #fff;
border-radius: 5px;
box-shadow: (0, 0, .5) 2px 2px2px;
min-width: 30em;
}
#box{
background-color: #232323;
color: #fff;
border-radius: 5px;
box-shadow: (0, 0, .5) 2px 2px2px;
margin-top: 20px;
}
In the above example, both the #sidebar and #box have a few common styles like background color, text color, border radius and box shadow.
These common styles are repeated or duplicated multiple times. In this example, it is two times but in a real website, same lines of styles may be duplicated numerous times.
This repetition makes the CSS document longer and modifying the style difficult. When the designer wants to change the border radius, he/she would have to change it in both places to keep consistency in the design. In this case, it is two but in a real project, it would be a pain in the neck.
It doesn’t have to be like that.
The repetition can be avoided if the common style is separated from the elements and applied to a new class selector. This class can then be used to style both elements.
Here is how the CSS code would look like when the common styles are separated and used as a module.
.skin {
background-color: #232323;
color: #fff;
border-radius: 5px;
box-shadow: (0, 0, .5) 2px 2px2px;
min-width: 30em;
}
.box{
margin-top: 20px;
}
.sidebar {
min-width: 30em;
}
You might have noticed that we have used classes instead of IDs here. It makes it possible to reuse the same style on multiple elements.
Look, we have created a new class called with the name skin and we have applied all the common styles on that class. This class is a module or object now. It can be used on any elements if we want to apply the same skin.
This is how OOCSS method makes CSS modular. Repeating styles are abstracted or separated into a module and these modules are used to style multiple elements. It avoids repeating the same lines of CSS code again and again.
Moreover, we don’t have to edit multiple lines of CSS lines when we want to make modifications to the border-radius or box shadow.
This is one way how OOCSS makes writing and managing CSS easier. There are many more benefits I want to share with you but we will get into it after taking a quick look at the basic principles of OOCSS. Having knowledge of these principles will help you understand the concept or methodology better and write better code.
Fundamental Principles of OOCSS
The OOCSS methodology of writing CSS is invented by the Nicole Sullivan and she says this revolves around two principles: separating structure from the skin and separating container from the content.
These two concepts were not new but it was Nicole who gave formulated it and created a framework.
Separationof Structurefrom the Skin
The structure is composed of framing properties of the elements like
- Height
- Width
- Padding and margin
On the other hand, skin refers to the visual properties like
- Color
- Font
- Gradient
- Shadow
In most websites, the same skin can be applied to different elements. If we create a module for those repeating skin, we can use that same module on multiple to get that particular skin whenever we want.
Since the properties related to the structure are not included in the skin modules, applying the skin module on different elements will not make any unexpected structural changes.
.button {
background-color: #232323;
padding: 5px 10px;
color: #fff;
box-shadow: (0, 0, .3) 4px 4px4px;
font-family: Helvetica;
height: 50px;
width: 100px;
}
.widget {
background-color: #232323;
padding: 10px;
color: #fff;
box-shadow: (0, 0, .3) 4px 4px4px;
font-family: Helvetica;
height: 250px;
width: 250px;
}
In the above example, both elementshave almost similar skin. Therefore, we can abstract that style and make it module. Here is how to do that.
.skin {
background-color: #232323;
padding: 10px;
color: #fff;
box-shadow: (0, 0, .3) 4px 4px4px;
font-family: Helvetica;
}
.widget {
padding: 10px;
height: 250px;
width: 250px;
}
.button {
padding: 5px 10px;
height: 50px;
width: 100px;
}
Here we have created a separate module for the common styles. This module can be reused on any element in the HTML Markup and it will give the same result.
Separation of Containers Content
The content or element should be styled independently of its parent or container. Location dependent styling may make the code impossible to be reused. It would force us to duplicate the code when we want the same style for another element in another location.
For example,
.sidebar h3 {font-size: 20px; color: #232323; font-family: Arial;}
This style can’t be reused for any h3 element outside the .sidebar container. Most of the time, we may want to apply the same style for h3s in the footer or another section. In that situation, we would have to write the same line of code again targeting the h3 element outside the .sidebar.
Another common example is the ul in the navigation.
Navul {
padding: 0;
list-style: none;
}
This style is only applied to the ul in nav container. We would have to duplicate the above style when we use ul in another section on the website.
This code duplication can be avoided if we didn’t use the child descendant selector to style the h3 or ul. If we have used a class selector to style the ul, we can use that class wherever we want. This approach can reduce duplicate lines of code considerably.
How to Implement this in Your Projects
Avoid using IDs for styling
You should always use classes instead of IDs in your HTML for styling purposes. IDs should be limited to only bookmarking.
Don’t use HTML tag as a selector
If we use HTML tags as selectors to style the elements, the same style can’t be applied to other tags. For example, you may want to have the same color, font style, font weight for different heading elements.
You can avoid duplicating the style by grouping the selectors in the stylesheet but that is not the best practice.
It is recommended to use a class selector and apply common styles to that class. You can add this class name to the elements in the HTML document to control the style.
Divide skin styling and structure styling
This is the first principle of the OOCSS. When you want to style an element, don’t include styling properties for both structure and skin under one selector.
You need to divide them and create separate class selectors for styling the skin and structure.
The structure is controlled by the height, width, position, padding margin etc. which controls the framing, positioning, and layout of the elements.
Skin is controlled by the color, gradient, shadow and font family etc.
Never use child descendant selectors to style elements
navul {…}
You should avoid location-based styling like this. It would prevent you from reusing them style outside the specified parent or container.
Apply structure before skin
You may have different classes to control the structure and skin of an element. When you use those classes, you need to use the class that controls structure first and then uses the class for the skin.
Combine Nearly Identical Modules
While creating the modules that can be reused, sometimes you may have nearly identical modules. For example, you have two different modules for heading with almost similar style. In such cases, it is better to combine them and use it as one. You don’t have to use similar elements in a website with almost same styling when you can choose one style for both elements.
Benefits of using OOCSS
We need to put some forethought into identifying the common styles and creating the modules that can be reused. However, the efforts and time you put into it worth it because it would make the job a lot easier. Here is a list of some of the benefits of following OOCSS methodology in writing CSS.
- Maintaining the website becomes easier
The layout and design of the website may break if we change the HTML markup when the CSS is written in the regular or traditional way.
In OOCSS this is not a problem at all. We can take any HTML element and paste it somewhere else on the HTML document and the element will look the same since the modules separate the container from the content.
- Build website faster
You can quickly style elements using the predefined modules. Once you spend the time to create the modules, later you can use it for multiple elements. This reduces the time required for styling elements which improve your productivity.
- Website load faster
The modules are reused on multiple elements and therefore we don’t have to create separate styling for each element in the HTML markup. This reduces the file size of the stylesheet and helps the website to load faster.
- Scalability
This is one of the biggest benefit OOCSS. The modules can be reused when you need to expand the website. Sometimes, you can create a web page without writing a single line of CSS.
The modules can also be used by new developers managing the website.
Criticism
Although the concept behind OOCSS is greatly appreciated, it is not something without drawbacks.
- Bloating of HTML with Classes
One criticism against the OOCSS is that it may clutter up the HTML document. Well, it is true to an extent. When we spate structure from the skin and container from the content, we would have to use multiple classes for an HTML element to give the structure and skin.
However, most of us already do this when we use front-end frameworks like Bootstrap. We apply lots of classes to an HTML element to style it easily. Therefore, bloating the HTML elements with lots of class names is not something peculiar about the OOCSS. Moreover, when we come to the benefits of OOCSS, it can considerably reduce the lines of code which makes the page load faster. Additionally, new pages can be created using the same stylesheet.
- Require HTML Markup Editing to Modify the Style
Another criticism leveled against OOCSS is that we need to make changes in the HTML markup (changing the class names) to change the design.
Moreover, it would be difficult to add modules to the elements generated by JavaScript.
OOCSS + SASS: Beyond the Limits of OOCSS
We have seen that OOCSS bloats the HTML markup with lots of class names and require making changes in the markup to control the style.
We want to modify the appearance of web pages without manipulating the HTML markup. It is not possible in OOCSS because it requires us to add classes to the HTML elements.
The @extend feature in the SASS can be for rescue here. It helps us to enjoy the power of OOCSS without its downsides.
Author Bio:
Hashim Puthiyakath is an SEO Analyst for Spidergems, a web design company in Chennai. He regularly contributes blog posts and articles to several industry-specific blogs on web design and digital marketing.