Specificity in Component Systems

Components and Specificity

Design systems keep component selectors at one class level and expose CSS variables for customisation, avoiding specificity conflicts.

Example

/* Component base — single class */
.alert { display: flex; gap: 0.75rem; padding: 1rem; border-radius: 0.5rem;
  background: var(--alert-bg, #d1ecf1); color: var(--alert-color, #0c5460); }
/* Variants — single extra class */
.alert-danger { --alert-bg: #f8d7da; --alert-color: #721c24; }
.alert-success { --alert-bg: #d4edda; --alert-color: #155724; }

CSS

Full Editor

Pro Tip

Expose customisation through CSS variables, not selector overrides.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned