CSS Best Practices

Best Practices

Use meaningful class names that describe purpose, not appearance.

Organize CSS with comments and consistent formatting.

Avoid over-specific selectors and !important.

Use CSS variables for consistent theming.

Minimize redundancy with reusable classes.

Load CSS efficiently and minimize file size.

/* Bad: appearance-based names */
.red-text { color: red; }
.big { font-size: 24px; }

/* Good: semantic names */
.error { color: red; }
.heading-primary { font-size: 24px; }

/* Use CSS variables */
:root {
  --color-primary: #4CAF50;
  --color-error: #f44336;
  --spacing-unit: 8px;
}

.button {
  background: var(--color-primary);
  padding: calc(var(--spacing-unit) * 2);
}

/* Avoid over-specificity */
/* Bad */
div.container ul.list li.item a.link { }

/* Good */
.nav-link { }

/* Reusable utility classes */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.text-center { text-align: center; }

/* Mobile-first */
.card {
  padding: 16px;
}

@media (min-width: 768px) {
  .card {
    padding: 24px;
  }
}