Clean, Maintainable CSS

• CSS best practices
• CSS variables
• object-oriented CSS
• BEM

CSS Best Practices

• follow a naming convention
  • kebab case: .nav-bar
  • camel case: .navBar
  • Pascal case: .NavBar
  • BEM: Block Element Modifier
    • block__element
    • block–modifier: indicate different versions
• create logical section in your stylesheet
  • Basic styles
  • Typography
  • Forms
  • etc
• avoid over-specific selectors
• avoid !important
• sort CSS properties
• take advantage of style inheritance
• extract repetitive patterns
  • object-oriented CSS
    • separate container and content
    • separate structure and skin

• avoid repetitive values (keep it DRY)
  • use variables