Improve Site Performance 
& Maintenance with OOCSS, Sass & Style Guides

Whether you are working independently or with a large team of developers, keeping your code clean and maintainable is a best practice we should all be striving for.  At a high level we can achieve this by setting in place processes about how our teams starts and follow through projects and creating standards we adhere to all while keeping discussions flowing about ways we can be improving. Object Oriented CSS has many advantages that make it an ideal method to adopt when executed the right way to helps teams stay organized and stay considerate of each others projects. Adopting this practice means that even as your team works individually they are trying to create work that considers the site as a whole and not the just the individual sections that make it up.

What is OOCS:

Object Oriented CSS is a way of writing CSS that helps us avoid duplicating our code. Originally this required you to add multiple classes to each element in your HTML in order to give it modular styles based on skin, structure, container and content. Nicole Sullivan, a pioneer of this topic has spoken on the effectiveness of partnering OOCSS with Sass to help reduce this excess markup.

How Does it Keep Our CSS DRY:

We avoid duplication by creating  styles that we can reuse because they are modular. This means you will create classes that keep skin, structure, content and container styles separate and use Sass @mixin and @extend to combine them. For beginners the Sass documentation is a great place to start learning how to set up your project.

Related: Commenting in Magento: PHPDoc + Requirements

How Do I Write OOCSS:

OOCSS is based on two main principles.

1. Separate Structure from Skin:

Write your styles for positioning and skin separately.  Floats and positioning should be separated from colour and font.

//positioning
.right{
  float:right;
}

//float and size
.one-third-column{
  width: 30%;
  float: left;
}

//colour
.message{
  padding: 20px;
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background: red;
}

2. Separate Container from Content:

An objects style should not be based on its position. When declaring a class start out with the least amount of specificity possible for the selector and then add only when necessary. For example: we should start by styling global elements and work our way to more specific ones.


//font-size
.page-title{
  font-size: 30px;
}

.promo-title{
  font-size: 20px;
  font-weight: 800;
}

.small-copy{
  font-size: 7px;
  color: black;
}

The goal for separating these four sections is so that as new content is added to the site, the least amount of new CSS needs to be added because these new elements should be able to pick up styles that are already in place.

What are the Advantages:

  1. Creating a smaller CSS files improves site performance
  2. DRY CSS makes our code more maintainable
  3. Adding new content to our site can be fast and easy because styles are already determined on a global level.
  4. Naming conventions and file set up make it easy for new members to jump in on a project and get up to speed quickly.

How to Start A Project with OOCSS :

Whether a designer supplies you with a style guide or you create one yourself, this piece of documentation it is a great way to start off a project because it makes the process of establishing the common elements easier. OOCSS is all about finding the style patterns that appear in our websites and creating multiple levels of styles through abstraction. Being able to find 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 reusing it when necessary.

UI Design + 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, you’re essentially writing the guide in small sections as you design it. A style guide is great but only as long as the site designs consistently reflect and adhere to it. In the end 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.

Brad Frosts Atomic Web Design article examines designing websites in modular way, which continues to build on the idea of starting with small elements and reusing them throughout the site. Planning ahead with a style guide will add time to the beginning of a project but you should be able to spot any red flags before you start coding and help save time in the future because a standard of styles has already been created. Nicole Sullivan’s slides on creating a living style guide again work towards the same goal of sites that are easier to maintain, have smaller code files and creating a more consistent UI for greater user experience.

Seeing the benefits from using OOCSS, Sass and style guides in the end comes down to your design and development teams implementing them together and being aware of common goals of the site. Every little bit counts but being able to start thinking about modular code from as early as the design stage will set up all teams for easier and more effective communication.

Related: Attention Designers: How to Optimize Your Files for Developers Building Responsive Websites