Speaker: Jonathan Snook

CSS is easy? CSS is messy! And as a project grows, it only gets messier. You find yourself throwing !important at everything or fighting with long selectors just to get a style to overrule another. This session looks at a few quick tips to help bring things under control.

Notes:

Good examples of bad code.

Categorization

• base (resets, etc.)
• layout (where major elements live, buckets, grid system)
• module (content pieces inside a layout element, repeatable design components – buttons, alerts)
• state
• themes

Naming conventions

• Stick to class selectors when ever possible.
• Use nesting .btn, .btn-large, .btn-small
• Or use .root-module–submodule

Decouple HTML from CSS

• Use child selectors
• Make the HTML predictable