Separate concerns with CSS rules

Owned by Eliot Muir
Last updated: Oct 22, 2021
1 min read

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.