CSS Best Practices:

  1. Follow a naming convention Follow a naming convention for naming IDs and classes. The most common naming conventions are: - PascalCase .NavBar - CamelCase .navBar - Kabob-case .nav-bar - Other .nav_bar
  2. Create logical sections in your stylesheet Adding comments or separate stylesheet to make stylesheet look reasonable and clean
  3. Avoid over-specific selectors Avoid over-specific selectors. Limit nesting to two or maximum three selectors.
  4. Avoid !important Avoid the !important keyword as much as possible. Instead, try to name different unique class
  5. Sort CSS properties Sort CSS properties. This makes it easier to read your code. To sort all properties:
    1. Select all preperties
    2. Open command palette i.e. cmd + shift + p
    3. Search sort
  6. Take advantage of style inheritance Take advantage of style inheritance and reduce duplication in your styles.
  7. Extract repetitive patterns This is part of Object-oriented CSS
  8. Avoid repetitive values (Keep it DRY) DRY: Don’t Repeat Yourself Use CSS variables, also called custom properties, to keep your code DRY.