Separate concerns with CSS rules

I think this is another key design concept to apply. Rather than mixing concerns with CSS I think it’s worth exploring the idea of separating classes based on what concern we are targeting. These are what I think of as separate concerns:

• Layout

  • Positioning of elements

• Appearance

  • Color

  • Shadow and curved corner effects

  • Borders

It’s also key to keep CSS rules very flat - avoid using nested CSS rules etc. since it makes it difficult to manage them.