Tuesday, April 19, 2011

CSS heuristics

As a developer I believe that styling web sites should be done by practiced design guru's. But that us developers should have at the very least a basic understanding of what those design guru's are up to.

Thus I have spent this last week wading through (and playing with) simple CSS experiments. It seems to my uninitiated eyes that the world of CSS is one of craftsmanship - knowledge gathered by bitter experience when bumping into the foibles of the various browsers.

So at the end of the week I have put what I have learned together and come up with the following list of heuristics for me to reach for and to try and follow whenever I have to touch CSS in future. Of course the trick is to keep this initial list up to date as I learn more...


  • Use external style sheets
  • Use a reset style sheet
  • Combine elements (don't repeat yourself, if at all possible)
  • Group your rules by location, ordering your style sheet from generic to specific. E.g.: Put generic classes first, then header, then navigation, etc...
  • Try to use composite (shorthand) properties and values where possible.
  • Alphabetise properties for easier reading.
  • Consider putting the colour scheme used, a version number and your name in a comment at the top of the style sheet.
  • Avoid browser specific hacks if at all possible. And if you have them in your CSS files, comment them so people understand why they are there!
  • Avoid unneeded selectors – but do consider sand boxing the affect of a selector by making sure it is bounded (i.e.: make sure that the application of a selector is restricted to only a specific area)
  • Specify units for non-zero values – don't specify units for zero values
  • Minimise the use of HTML element id's
  • Refactor often, removing unused rules and properties, and fusing rules where possible
  • Try to follow object oriented CSS principles (separate structure and skin, separate container and content).
  • For complex CSS consider using XCSS or Sass
  • Have (and follow) a naming and coding convention which avoids underscores (for reasons of browser incompatibility). For an example of one see: http://na.isobar.com/standards/#_css
  • Keep CSS files under version control (a no brainer for a software developer)
  • Consider sizing your text in ems and using Javascript to find the correct starting pixel size. Then your base text should be 1.0 em ( * { font-size: 1.0em })
  • Validate your and prettify your CSS.
  • Consider using CSS sprites
  • Code link pseudo-classes in this order: Link, Visited, Focus, Hover, Active (Leave Visitors Focused on Hoovering Activities)
  • During development use separate style sheets with lots of comments. For production, compress, minify and consolidate into one file!
  • Avoid using important! (treat its use as in indicator of something being wrong in your styling)
  • If designing for both mobile and large screen, consider starting with the mobile design. That way you will be aware of the assets the mobile shouldn't have to load.
  • Know that CSS3 "pays off when it comes to production, maintenance and load times"


  • If possible, give every page's body a unique descriptive class: this makes it easy to add page specific styling
  • Try not to make class names represent design i.e.: prefer “comment” over “right” - otherwise you are baking design decisions into the HTML
  • Try to avoid div and span soup in favour of meaningful HTML elements
  • Avoid style attributes in HTML tags
  • Use HTML 5's doctype: as it switches all modern browsers into standards mode – even if you aren't using HTML 5
  • Validate your HTML!

No comments: