Store reusable values in CSS custom properties and use built-in functions like calc(), clamp(), min(), max(), and attr().
Custom properties store values in --name and retrieve them with var(). Define on :root for global access. They cascade and inherit — redefine inside any selector for scoped overrides. This makes theming trivial.
<!DOCTYPE html>
<html><head>
<style>
:root {
--color-primary: #3b82f6;
--color-danger: #ef4444;
--radius: 8px;
--space: 16px;
}
.btn {
padding: calc(var(--space) / 2) var(--space);
border-radius: var(--radius);
border: none; font-size: 14px; cursor: pointer; color: white; margin: 4px;
}
.primary { background: var(--color-primary); }
.danger { background: var(--color-danger); }
.dark {
--color-primary: #1e40af;
background: #1e293b;
padding: var(--space);
border-radius: var(--radius);
margin-top: var(--space);
}
</style>
</head><body style="font-family:sans-serif;padding:16px">
<button class="btn primary">Primary</button>
<button class="btn danger">Danger</button>
<div class="dark">
<p style="color:white;font-size:14px;margin:0 0 8px">--color-primary overridden locally</p>
<button class="btn primary">Darker Primary</button>
</div>
</body></html>calc() mixes units in one expression. clamp(min, preferred, max) constrains fluidly. min()/max() pick the smallest/largest value. attr() reads HTML attributes into CSS content.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
div { padding: 8px 12px; border-radius: 4px; font-size: 13px; }
.calc { width: calc(100% - 32px); background: #dbeafe; }
.clamp { font-size: clamp(12px, 3vw, 22px); background: #d1fae5; }
.min { width: min(280px, 100%); background: #fef3c7; }
.max { width: max(120px, 40%); background: #fce7f3; }
[data-label]::before { content: attr(data-label) ": "; font-weight: bold; color: steelblue; }
</style>
</head><body>
<div class="calc">calc(100% - 32px)</div>
<div class="clamp">clamp(12px, 3vw, 22px) — resize preview pane</div>
<div class="min">min(280px, 100%)</div>
<div class="max">max(120px, 40%)</div>
<p data-label="Author" style="font-size:14px">attr() pulls from the HTML attribute</p>
</body></html>