I Ain't No Multi-Line Girl

Update

I wrote this note in 2012, things have changed. A lot. Writing CSS the single-file, single-line way isn't feasible nor is it desirable to me anymore. That stuff just doesn't fly with responsive, component-based, version-controlled builds.

I have moved on. I am now a mutli-file, mutil-line CSS/Sass girl. And loving it.


Oh, forgive me CSS Lords, for I have tried!

Whilst working on a couple of pretty big sites (Easons and Unbiased - thanks Team Tangent), I acquainted myself with writing CSS the LESS way.

I set up global variables, magical mixins, nested and intended selectors, wrote every declaration on a new line, and broke styles down into seperate files. I worked closely with other developers and it went well.

Writing CSS is my favourite part of developing sites, but something didn’t seem right. I couldn’t put my finger on it.

Then, recently, I was asked to make some updates to a site I had built a while ago. I opened the stylesheet and the moment I looked at it my heart skipped a beat. All the declarations were together in one file, nicely ordered into sections. But most importantly selector names were repeated, on single lines, and with minimal indentation. Within an instant I knew exactly what I was looking at, what I needed to do and where to make the amends.

This was how I used to write CSS, and I didn’t realise how much I missed it until then.

By that time I had already started to code this site, but I went into an overhaul frenzy and immediately merged my stylesheets and separated nested selectors. As I progressed the build I found my way of making the best of what Sass has to offer (I moved on from LESS). I love variables and mixins, and I like to keep major chunks of fixed component declarations in seperate files - keeping the main stylesheet easily scannable.

I do, of course, understand the need to code CSS in such a way that it is easy for fellow developers to work with, particularly on big sites, but my heart will always go out to the humble single-file, single-line stylesheet:

Screenshot of a CSS file written in single lines
Previous note: Coding Is A Craft Next note: Roll to Your Own Base