HTML/CSS - 26

HTML/CSS - 26: Component Libraries & Reusability

As websites grow, you often need the same kinds of elements again and again: buttons, cards, navigation links, badges, and content boxes.

Instead of styling every copy separately, you can create reusable CSS classes. This lets several elements share the same base design while small modifier classes create different versions.

This is the basic idea behind a component library: build a small collection of reusable patterns that can be combined across a website.

Your challenge: Create reusable button and card components, then make different versions without duplicating all of the CSS.

What makes something reusable?

A reusable component has a predictable structure and a class that can be applied in more than one place.

For example, instead of creating completely separate CSS for every button, you can put the shared rules in: .btn

That class might control padding, border radius, font weight, and the pointer cursor.

Then a second class can control only the differences.

For example: .btn-primary might create a filled button, while .btn-secondary creates an outlined version.

Combining classes:

An element can have more than one class: class="btn btn-primary"

The button receives the shared styles from .btn and the special appearance from .btn-primary.

This avoids repeating the same padding, border radius, and font rules in several places.

Create the primary button:

Try: background-color: var(--accent);, color: #000;, and border: 2px solid var(--accent);.

Create the secondary button:

Try using a transparent background with the same accent-colored border.

Because both buttons already use .btn, you only need to define what makes each version different.

Build the card component:

Your .card class can contain reusable rules for background color, border, padding, margin, and rounded corners.

Once it exists, every element using class="card" receives the same basic design.

Experiment: Add a third card.

You should not need any new CSS. Just reuse the existing card, btn, and button modifier classes.

That is the main benefit of reusable components: once the pattern exists, you can build new content more quickly and keep the design consistent.

Try changing the component globally:

Change the border-radius of .card. Every card should update at once.

Then change the padding in .btn. Both primary and secondary buttons should update because they share the same base class.

Base classes and modifier classes:

A useful pattern is to think of classes in two groups:

Base class: describes what the component is.
Examples: .btn, .card

Modifier class: describes a variation.
Examples: .btn-primary, .btn-secondary

This keeps the differences small and prevents large blocks of duplicated CSS.

Components are not only visual:

A reusable component should also use appropriate HTML. A clickable action should normally use a real <button>, while a link to another page should normally use <a>.

Reusability should not come at the expense of meaningful HTML or accessibility.

Good component habit: Create components for patterns that genuinely repeat. If something appears only once and has no reusable purpose, it may not need its own component class.

<style>

  :root {
    --accent: #8A8A8A;
    --surface: #111;
    --text: #dddddd;
    --radius: 8px;
  }

  .btn {
    padding: 12px 22px;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
  }

  .btn-primary {
    background-color: var(--accent);
    color: #000;
    border: 2px solid var(--accent);
  }

  .btn-secondary {
    background-color: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
  }

  .card {
    background-color: var(--surface);
    color: var(--text);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: 25px;
    margin: 20px 0;
    max-width: 500px;
  }

</style>

<div class="card">

  <h2>Signal Recorder</h2>

  <p>
    A fictional tool for collecting mysterious signals.
  </p>

  <button class="btn btn-primary">
    Open Project
  </button>

  <button class="btn btn-secondary">
    Details
  </button>

</div>

<div class="card">

  <h2>Cloud Notebook</h2>

  <p>
    Another fictional project using the same components.
  </p>

  <button class="btn btn-primary">
    Open Project
  </button>

</div>