SXSW 2012: CSS for Grown Ups: Maturing Best Practices

Andy Hume (@andyhume)
The Guardian

Presentation Description

In the early days of CSS the web industry cut its teeth on blogs and small personal sites. Much of the methodology still considered best-practise today originated from the experiences of developers working alone, often on a single small style sheet, with few of the constraints that come from working with large distributed teams on large continually changing web projects.

The mechanics of CSS are relatively simple. But creating large maintainable systems with it is still an unsolved problem. For larger sites, CSS is a difficult and complex component of the codebase to manage and maintain. It’s difficult to document patterns, and it’s difficult for developers unfamiliar with the code to contribute safely.

How can we do better? What are the CSS best practises that are letting us down and that we must shake off? How can we take a more precise, structured, engineering-driven approach to writing CSS to keep it bug-free, performant, and most importantly, maintainable?

Presentation Notes

CSS was originally created to slim down markup and remove the need for design elements.

ZenGarden is a website where users could collaborate and create beautiful CSS designs running on top of fixed HTML DOM.

There’s too much flexibility and power in CSS, and the best of things are the simplest.

“Nobody is really smart enough to program computers.” – Steve McConnell
“Nobody is really smart enough to style web pages.” – Andy Hume

Code Quality can be measured by: correctness, reliability, reusability, web 2.0 compliance, performance, extensibility, etc. But the one thing we need to optimize code the most for is: change. Having simple code, it is easier to maintain a code base. If you don’t have maintainability then you’re not in a position where you can easily make these changes. You wont be able to fix apparent bugs.

“Very few people (only professional designers, it seems) write style sheets longer than a hundred lines.” – Bert Bos, 2008

Pre processors can help out in managing complexity:
Sass – http://sass-lang.com
Less – http://lesscss.org
Stylus – http://learnboost.github.com/stylus/

But rather than making changes and additions to the language, why not use a tool that just makes what we currently have better?
OOCSS – http://oocss.org
SMACSS – http://smacss.com
CSS Lint – http://csslint.net

Layers of CSS
Base Styles: applied to element selectors such as font sizes, line heights.
Module Styles: product list, main navigation
Layout Styles: provide a grid or set up columns

One of the worse things you can do is apply a class name as “green” and then have the CSS markup: .green { color: green; } as if your design changes to “red” then your class is still labeled as “green.” Instead you should make the class name whatever it is (header, navigation, etc), and not based on the color or style it is.

A convention of applying to class names to an element, for instance “promo-box” and “promo-box-alert” is to make it “promo-box–alert” with the two “–“s.

Selector Queries – http://github.com/ahume/selector-queries

  • Allows you to apply rules like, “if the width of element X is smaller than Ypx, then apply a certain class to it”
  • This gets away from having to base CSS @media queries on the size of the browser, and instead the size of the element.

Base Style Sheets

There are many available, such as Bootstrap by Twitter, but you too can create one for your organization. It’s basically guidelines and standards created by your company.

Posted in SXSW 2012.

2 Comments

Leave a Reply to David Cancel reply

Your email address will not be published. Required fields are marked *