Reusable Styles and Component CSS

If you copy a block of CSS and change two values, you are probably missing a reusable piece.

Think in components

A component is a small, self-contained piece of interface: a button, a card, a form field, an alert. Each gets one block of CSS that styles it wherever it appears.

1
2
3
4

.alert { padding: 12px 16px; border-radius: 6px; border-left: 4px solid; }
.alert--info    { background: #e8f4fc; border-color: #1a5276; }
.alert--success { background: #eafaf1; border-color: #27ae60; }
.alert--error   { background: #fdecea; border-color: #c0392b; }

1
2
3
4
5
6
7
8
9

<style>
  .alert { padding: 12px 16px; border-radius: 6px; border-left: 4px solid; margin-bottom: 8px; }
  .alert--info    { background: #e8f4fc; border-color: #1a5276; }
  .alert--success { background: #eafaf1; border-color: #27ae60; }
  .alert--error   { background: #fdecea; border-color: #c0392b; }
</style>
<div class="alert alert--info">Your order is on its way.</div>
<div class="alert alert--success">Payment received.</div>
<div class="alert alert--error">That card was declined.</div>

One base style, three small variations. No repeated padding or border code.

Variables for shared values

Colors, spacing, radii and shadows used across components belong in variables, so changing the design means changing one line.

Utility classes: small, single-purpose helpers

Some teams add a few tiny classes for common one-off needs:

1
2
3

.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

They are handy for spacing and alignment, and the visually-hidden helper is important for accessibility: it hides text visually but keeps it available to screen readers. Do not overdo them. A page where every element has ten utility classes is as hard to read as inline styles.

Do not over-abstract

Do not create a component for something that appears once. Wait until it appears twice or three times, then extract it. Premature abstraction produces confusing, overly generic CSS.

Reuse spacing with a scale

Instead of random pixel values, use a small scale: 4, 8, 16, 24, 32, 48. The result looks more consistent and your CSS is easier to remember.