CSS

Formatting & Naming

• Use 2 spaces for indentation
• One selector per line in multi-selector rules
• Use kebab-case for class names: .main-header, .btn-primary
• Prefix component classes: .card-title, .nav-item
• Use meaningful, descriptive names over abbreviated ones

Organization & Structure

• Group related properties together (positioning, box model, typography, visual)
• Use comments to separate major sections
• Keep specificity low - avoid deep nesting
• Mobile-first approach with min-width media queries
• Separate layout, components, and utility classes

Best Practices & Tools

• Avoid !important - use higher specificity instead
• Use CSS custom properties for repeated values
• Prefer classes over IDs for styling
• Use Prettier for consistent formatting
• Lint with stylelint for error checking

References

• CSS-Tricks
• MDN Web Docs – CSS
• Smashing Magazine – CSS