Writing Kick-Ass Sass With OOSass

I write a lot of CSS. If you’d have come to me a few years ago and asked me how to write good CSS I wouldn’t have been able to tell you — I’d have told you to come back in a couple of years and ask me again, I’d probably have an answer for you by then.

Well, up until recently, I still didn’t have an answer. Now, however, I might be one step closer.

The Problem

Writing clean, reusable, and maintainable CSS is difficult. New projects always begin with the best intentions; classes are reused, everything is clean, and everyone is happy. Over time, however, those classes get tweaked, instances of those classes require overrides, a few # selectors and !importants creep in and, before you know it, you’ve got another jumbled, unmaintainable mess that just works.

I don’t think I’m alone in writing CSS like this; I might be, but I don’t believe I am. Projects start well, however as time goes on it’s far too easy to get lazy and add a quick fix.

I decided to tackle this problem head-on and set about to see how others were approaching it. After a bit of reading on the topic, I came across a few suggestions of CSS methodologies which claim to help you structure your code through the use of naming-conventions and standardised style structure. Disappointingly however, they all felt a bit lacking. The most common methodologies suggested were:

• BEM — The most popular. Feels like a messy workaround for the lack of scope support in CSS.