CSS Best Practices: OOCSS & CSS Comb

Whether you are in a team or going solo, you should be aware of best practices and start incorporating them into your workflow as soon as possible. In this post, we will take a quick look at Object Oriented CSS and CSS Comb.

OOCSS – Object-Oriented CSS

Let’s start out with OOCSS, or Object Oriented CSS; OOCSS, first presented by Nicole Sullivan, comes from the principles of Object Oriented Programming. Don’t worry, it’s not a new syntax or language that you will have to learn. Rather, it’s a way of organizing your code and thinking in terms of objects. Let’s take a look at two examples:

Poorly formatted CSS/SASS:

#table-checkmark-admin {    
     padding: 10px 5px;
}

#left-header-text {
    color: green;
    font-size: 18px;
}

 OOCSS Style:

.button {
  padding: 10px 5px;
}

.header {
  font-size: 24px;
  color: #000;
}

As you can see, instead of creating a custom class for each element (#table-checkmark-admin, #left-header-text) on the screen, we just use the same classes on multiple tags (#left-header). That way the code becomes modular and all you need to do, if you would like to change the style, is change one line of code. Additionally, if you would like to add the same stylesheet to another page, all you will need to do is just attach and use the same classes.

Another important aspect is to keep structure and skins separate:

.button {
  width: 25px;
  height: 10px;
}

.header {
  font-size: 24px;
  color: #000;
}

.skin {
 background: #fff;
 border: 1px solid gray;
}

A good is to create subclasses for components. For example, let’s say you have two button styles: large  and small.

.button {
  width: 25px;
  height: 10px;
}

.large{
  width: 50px;
  height: 25px
}

.small {
 width: 25px
 height: 15px;
}

<!-- Then, in the HTML, it would look something like this, where the classes would be added -->

<!-- Large Button -->
<button class="button large">
 <span class="button-text">Submit</span>
</button>

<!-- Small Button -->
<button class="button small">
 <span class="button-text">Submit</span>
</button>

Twitter Bootstrap, to an extent, uses the OOCSS model, as you can see in this example:

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

As you can see, the first div has two classes: btn-group and btn-group large, which produces the following result:

You can find the Bootstrap Style guide in the documentation.

However, there are disadvantages to the Object Oriented CSS; one of them is that you can run into “classitis” in which there are so many classes added to HTML elements that it can get confusing.  Object-Oriented HTML, and OOCSS by Jens goes into detail about some of the problems that you can run into. During development, you might run into the question of whether you keep your HTML or CSS DRY (Don’t Repeat Yourself) or not use either at all. You might also have to consider the size of your project and come to a decision.

You can learn more from this Smashing Magazine article about OOCSS, or you can take a look at the GitHub Project. Want to learn even more? Then you can take a look at Stubornella’s post Object Oriented CSS, Grids on Github. Even more? This presentation by Stubbornella can help you out.

OOCSS or SASS?

Finally, Nicole Sullivan had a talk about some of the mistakes she made trying to incorporate OOCSS principles into SASS. One thing to take out of this presentation is that writing DRY Sass is not the same as writing DRY CSS.

One way to use it, as highlighted in the presentation to use the inheritance functionality to your advantage:

/* SCSS */

.button {
 border: 1px solid #000;
 border-relative: 10px;
}

.small-button {
 @extend .button;
 background-color: green;
}

.large-button {
 @extend .large-button;
 background-color: blue;
}

.small-button and .large-button are put of the button object / class. As mentioned in the video, you might want to be a little careful when writing in SASS because the CSS output can be very different (and messy). Let’s take a look at some of the other tools that you with CSS.

CSS Comb

CSS Comb is another tool that you can use to organize your stylesheets; You can use CSS Comb to do just that. CSS Comb also comes in Sublime Text and Grunt flavors. According to the author, the website version is outdated, so you should try it out in your favorite program.

!important Declarations

Avoid them whenever possible! Adding important to your declarations will just make things more difficult for you and your team. Instead of working with your CSS, you end up fighting it and that is not good, especially when working with others.

Other Resources

Google has their own CSS style guide that you can read and learn. You can also learn a lot from CSS-Tricks by  Chris Coyier.

I hope that this post has pointed you in the right direction and your stylesheets end up more maintainable than before.