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...

CSS

• 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"

HTML

• 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!