CSS Best Practices:
- 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
- Create logical sections in your stylesheet Adding comments or separate stylesheet to make stylesheet look reasonable and clean
- Avoid over-specific selectors Avoid over-specific selectors. Limit nesting to two or maximum three selectors.
- Avoid
!important
Avoid the !important
keyword as much as possible. Instead, try to name different unique class
- Sort CSS properties Sort CSS properties. This makes it easier to read your code. To sort all properties:
- Select all preperties
- Open command palette i.e.
cmd
+ shift
+ p
- Search
sort
- Take advantage of style inheritance Take advantage of style inheritance and reduce duplication in your styles.
- Extract repetitive patterns This is part of Object-oriented CSS
- Avoid repetitive values (Keep it DRY) DRY: Don’t Repeat Yourself Use CSS variables, also called custom properties, to keep your code DRY.