OOCSS & CSS Preprocessors (pt.1)

The relationship between OOCSS and
CSS preprocessors #

Recently I wrote a post (Scalable and maintainable CSS architecture) discussing object oriented CSS and Jonathan Snook’s SMACSS. There ensued a
conversation thread on Hacker News questioning whether OOCSS was really necessary given the existence of CSS preprocessors such as SASS and LESS. As a result of the conversation and as a supporter of preprocessors, I thought it would be worth writing a follow-up exploring OOCSS and preprocessors.

I’ve broken this into 2 parts. In part 1, I briefly explain and define how I view the relationship between preprocessors and OOCSS. In part 2, I will dive into the practicalities of using preprocessors and OOCSS together.

OOCSS and CSS preprocessors solve
different problems #

At their core, I believe that OOCSS and CSS preprocessors solve different problems. Preprocessors extend the CSS language. They primarily offer a solution to perceived shortcomings of CSS. Preprocessors are primarily about making CSS more dynamic and increasing convenience. They allow you to write less code, reuse variables and mixins, and perform calculations. OOCSS is a methodology encouraging separation of skin and structure as well as separation of container and content. OOCSS is primarily concerned with scalability and maintainable code. That’s not to say that preprocessors can’t help with scalability (see Refactoring > 14,000 lines of CSS into SASS ) or that OOCSS doesn’t help with convenience. They complement each other. I would formulate the relationship as follows:

The goal is clean, scalable and maintainable CSS. Object oriented CSS is an approach and methodology used to achieve the goal while a preprocessor is a tool to support the system.

Keeping this hierarchy in mind, along with the differences in what problems each solves, paves the way for successfully combining the two. In fact, whether you embrace OOCSS fully or not, the final criteria for judging the successful use of a CSS preprocessor is the maintainability of the final system and the quality of the compiled CSS.

Note: Part 2 of this post can be found at Guidelines for Using CSS Preprocessors Responsibly in an OOCSS Context