OOCSS - Object Oriented CSS

It's 2023 and we have a lot of methods and techniques that make CSS writing better and easier. But there's one method that was one of the first to tackle object-oriented CSS writing, and that laid a solid foundation for the other frameworks that followed.

This method is called Object Oriented CSS (OOCSS) and in this article, I will describe the basic principles and ideas of this methodology.

Table of Contents

1. Introduction
2. Principles
3. Separate structure and skin
4. Separate container and content
5. Takeaway
6. Future reading

Introduction

In 2008, Nicole Sullivan borrowed an object-oriented design concept to provide structure to CSS. She presented her Object Oriented CSS (OOCSS) concept at the Web Directions North to the world.

The focus of OOCSS is the idea of treating page elements as objects, giving all these objects classes, treating objects’ classes as single entities in style sheets, and taking it from there.

Object Oriented CSS is a methodology or framework (whichever you prefer) for organizing and extending your CSS in a way that is lightweight, highly performant, and easily used by developers at all skill levels. — Ben Nadel

The idea of OOCSS are timeless. Nicole Sullivan started with approach, that we use today when we create design systems. Take a look on Nicole's presentation, where she goes through the websites of a large companies such as Facebook or Salesforce, and points out to style inconsistencies in their interfaces.

It's quite possible that this approach also inspired web designer Brad Frost when he introduced the interface inventory method, which is based on the similiar principles, but in a wider context and without reference to technology.

We are still solving problem of inconsistent interfaces these days, and it will probably never be completely solved, because new challenges and problems will continue to arise.

Although we already know how important is to monitor consistency of the interfaces, we are still figuring out how to do it properly. This is also the reason why we build design systems these days.

However, this is an issue we need to solve, if we want to improve quality of our interfaces, save development costs, and speed up the entire design process.

Nicole Sullivan had the same goal and her work took CSS writing a step further. Let's take a look on the principles of her framework.

Principles

In short, this methodology defines a CSS object as a visual pattern that can be used throughout the site. It serves as a guideline when designing reusable code that is scalable, sustainable and easy to use.

There are two main principles of OOCSS:

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

Separate structure and skin

Structure is the basic core element, which is “invisible”. They are repeating elements that make up different page layouts and are not expected to change too much over time. This means properties such as width, height, padding, margin, overflow etc.

Skin is a decorative part and it's about everything related to the brand of the site. It is bits and pieces that make your website different from the competition. You can think about properties like colors, borders, typography, shadows, gradients etc.

Take a look at the following CSS below and focus on repeating styles.

.button-primary {
  /* Repeating styles */
  display: inline-block;
  padding: 16px 32px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  /* Decorative part */
  color: white;
  background: black;
  border: 0;
}
.button-secondary {
  /* Repeating styles */
  display: inline-block;
  padding: 16px 32px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  /* Decorative part */
  color: black;
  background: white;
  border: 1px solid black;
}

We can use the following HTML for this stylesheet.

In this example we are styling two buttons. If you look at the code carefully, you will see that there is quite a bit of code repetition here. This can clutter your stylesheet over time and lead to potential inconsistencies.

Based on the concept of OOCSS, you can abstract the above CSS into structures and skins.

If we abstract it out, it means that we can reuse the classes and change its visuals by using another class for skin. Here is the refactored CSS according to the OOCSS principle.

/* Repeating styles for button */
.button {
  display: inline-block;
  padding: 16px 32px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}
/* Decorative parts - visual variants */
.button-primary {
  color: white;
  background: black;
  border: 0;
}
.button-secondary {
  color: black;
  background: white;
  border: 1px solid black;
}

Then we can use the following HTML (notice how classes are used to change the appearance).

This way we can save code, use modularity and easily create other variants. If we change our mind that we want to increase the font size of the button, you can do it in one place and change all buttons at once.

Separate container and content

This recommendation tells us that we should avoid writing styles that are location-dependent. The main motivation is that objects should look the same regardless of their location and position.

Content refers to the objects as media, images, paragraphs, which are nested inside other elements that serve as containers.

Styles used for content objects (elements) should be independent of the container class so that it can be used without restrictions on their parent objects (elements). Take a look at the following example.

.widget {
  /* foo */
}
.widget .list {
  /* foo */
}
.widget .list .title {
  /* foo */
}
.widget .list .content {
  /* foo */
}

Now, let's separate content from container.

.widget {
  /* foo */
}
.list {
  /* foo */
}
.list-title {
  /* foo */
}
.list-content {
  /* foo */
}

Now these classes can be used in many situations without the restriction of having a parent with a class of .widget or .list.

It takes a little time to learn how to use this principle, but if you think about it in a way that makes you code better, it will definitely pay off.

Takeaway

This method helps us to think about styles more modularly and object-wise. It also sets our mindset to try to write less code than necessary and helps us understand that extending selectors rarely leads to writing better code.

If you try to use or understand this methodology, you will gain a basic understanding of the issues related to the specificity and selectors structure, and you will understand how fragile CSS is.

There are still many presentation resources from Nicole Sullivan that you can check out.

Future reading

• Nicole Sullivan - Object Oriented CSS
• Louis Lazaris - An Introduction To Object Oriented CSS
• Nicolas Carlo - Dive into OOCSS principles