Hi everyone, I’m here today to talk to you about writing better CSS. Firstly though, I should probably let you know who I am. I’m Toni.
If you’re a bit stalky and Googled me before you came here, you’ll know that I own and run Beauty Bliss, an online cosmetics store.
And that I used to work for these guys: Trade Me BBC Worldwide StarNow
And if you were super stalky and peeking in my bedroom window last night, you’d have seen that I’m currently building a new Jobs app, Limber Jobs. Limber is designed to smash the stigma around part time jobs being all about flipping burgers, and make it easier for professional people to find quality, professional jobs.
So, while I do a lot of things now that I’m at Beauty Bliss, a large chuck of my life is dedicated to writing CSS. And if there’s one thing I’ve learnt in the past 10 years of writing CSS, it’s that it’s really easy. But…
Writing really good CSS isn’t easy.
I guess before I start giving you my tips on how to write better CSS, I think we need to talk a little bit about what “Good” means. What constitutes “Good CSS”?
To me, good CSS is not necessarily:
Cutting edge New stuff is awesome and fun, but using a new feature just because it’s new, means you’re likely not picking the best tool for the job.
Overly optimized for performance Sure, performance should always be kept in mind when writing CSS, especially when you’re doing animations and things that are likely to make a real difference to the speed in which the page renders, but performance should never be the #1 priority.
Many of the tutorials and talks you’ll see preach performance as the road to writing great CSS. Having worked on large projects and big fat legacy code bases, I disagree.
Good CSS is:
We’ll come back to each of these points as we go through my 6 tips for writing better CSS.
There is more than one way to skin a cat and if you’ve ever worked in a team of developers you’ll know that everyone often has their own style.
Set the rules for how the CSS will be written before you start writing it. Make sure everyone is on the same page.
Some examples: - Don’t nest more than 3 levels deep
If you’ve done something weird, say why.
Chris Coyier did a FOWA presentation back in 2009 where he said that Big Fancy Style Guides are a bit of waste of time and that Global.css should be all the documentation you need.
I half agree, writing a document that says “All h1 tags should be red” isn’t going to be overly helpful.
However, while working at StarNow, I created a document that was half styleguide/half pattern library, which I attribute to being the best aide in helping us complete the redesign project on time.