Component-Oriented CSS
Component-oriented CSS organizes styles around reusable UI units rather than pages alone. A component should ideally own its structural styling while global styles establish foundations such as typography, tokens, and resets.
Good boundaries reduce accidental dependencies between unrelated components.
Component-Oriented CSS
Component Structure
.card {
display: grid;
gap: 1rem;
padding: 1.5rem;
border: 1px solid var(--border-color);
}
.card__title {
margin: 0;
}
.card__actions {
display: flex;
gap: 0.75rem;
}💡 The component owns its internal layout rather than relying on unrelated page selectors.
Key Takeaways
- Keep component styles locally understandable.
- Avoid accidental dependencies on distant selectors.
Knowledge Check
What is an advantage of component-oriented CSS?