Understanding CSS Architecture: Part 1 - Foundations
CSS seems simple on the surface, but building scalable, maintainable styles for large applications requires careful architectural thinking. This series will guide you through modern CSS architecture principles.
The CSS Scalability Problem#
As applications grow, CSS tends to become:
- Bloated - Unused styles accumulate
- Fragile - Changes break unexpected parts
- Specific - Selectors become increasingly specific
- Duplicated - Similar patterns repeat
Foundational Principles#
1. Single Responsibility#
Each stylesheet or class should do one thing well:
CSS
/* Bad - multiple responsibilities */
.card {
padding: 1rem;
background: white;
border-radius: 8px;
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
/* Good - separated concerns */
.card {
padding: var(--space-md);
background: var(--color-bg-surface);
border-radius: var(--radius-md);
}
.flow > * + * {
margin-block-start: var(--flow-space, 1rem);
}
2. Open for Extension, Closed for Modification#
Design classes that can be extended without changing the original:
CSS
/* Base button */
.btn {
display: inline-flex;
padding: var(--space-sm) var(--space-md);
font-weight: 500;
border-radius: var(--radius-sm);
}
/* Variants extend, not modify */
.btn--primary {
background: var(--color-primary);
color: white;
}
.btn--ghost {
background: transparent;
border: 1px solid currentColor;
}
3. Composition Over Inheritance#
Build complex UIs by combining simple utilities:
HTML
<article class="card stack">
<header class="cluster">
<span class="badge">New</span>
<time>Dec 10, 2025</time>
</header>
<h2>Article Title</h2>
<p>Article excerpt...</p>
</article>
Layer Organization#
Modern CSS benefits from clear layering:
CSS
/* 1. Settings - Variables, tokens */
@layer settings {
:root {
--color-primary: oklch(0.6 0.2 250);
}
}
/* 2. Tools - Mixins, functions */
@layer tools { }
/* 3. Generic - Resets, normalize */
@layer generic {
*,
*::before,
*::after {
box-sizing: border-box;
}
}
/* 4. Elements - HTML element defaults */
@layer elements {
body {
font-family: var(--font-sans);
}
}
/* 5. Objects - Layout patterns */
@layer objects {
.stack > * + * {
margin-block-start: var(--space-md);
}
}
/* 6. Components - UI components */
@layer components {
.card { /* ... */ }
}
/* 7. Utilities - Single-purpose helpers */
@layer utilities {
.text-center { text-align: center; }
}
Coming Up Next#
In Part 2, we'll explore naming conventions and methodologies like BEM, CUBE CSS, and utility-first approaches.
