CSS Naming Conventions

/* ❌ BAD: Generic, unclear names */
.box { }
.item2 { }
.red { }
.big { }
.new { }

/* ✅ GOOD: Descriptive, specific names */
.user-profile-card { }
.navigation-menu-item { }
.error-message { }
.header-logo-large { }
.product-featured { }

/* ❌ BAD: Style-based (what if design changes?) */
.red-button { }         /* What if it becomes blue? */
.left-sidebar { }       /* What if it moves to the right? */

/* ✅ GOOD: Purpose-based */
.button-danger { }      /* Still makes sense if color changes */
.sidebar-navigation { } /* Describes what it is, not where it is */

/* ❌ BAD: Too generic */
.title { }              /* Which title? */
.image { }              /* Which image? */

/* ✅ GOOD: Specific */
.article-title { }
.product-thumbnail { }

/* Base button */
.button {
  padding: 10px 20px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Button states */
.button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.button.is-loading {
  position: relative;
  color: transparent;
}

.button.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Dropdown states */
.dropdown {
  position: relative;
}

.dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.dropdown.is-open .dropdown__menu {
  display: block;
}