CSS

Lesson 02

Cascade and specificity

Keep selectors scoped and low-specificity so styles are easy to override intentionally.

Good Code

profile-card.css
.profile-card {
  /* Low-specificity component classes keep ownership easy to review. */
  color: #172033;
  background: #ffffff;
  border: 1px solid #d8dee8;
}

.profile-card--featured {
  border-color: #2563eb;
}

.profile-card__title {
  color: #0f172a;
}

Bad Code

profile-card.css
#app main .profile-card.featured div h2.title {
  /* This selector wins by force instead of describing component intent. */
  color: #0f172a !important;
}

#app main .profile-card div h2.title {
  color: #475569;
}

Review Notes

What to review

Good Code

The good version uses explicit component classes and a modifier, so a reviewer can see which rule owns each state without tracing through the whole page.

Bad Code

The bad version depends on page structure, ID specificity, and !important, which makes future overrides harder and ties a reusable card to one DOM shape.

Takeaways

  • Prefer component classes and modifiers over deep selectors, IDs, and repeated !important fixes.