WV13: Your CSS is a Mess

Friday, May 24th, 2013

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.


Good examples of bad code.


  • 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



Leave a Reply

You know you want to...