HTML/CSS - 21

HTML/CSS - 21: CSS Architecture & Custom Properties

As a stylesheet grows, keeping it organized becomes just as important as knowing individual CSS properties.

In an earlier lesson, you used CSS custom properties to store reusable values. Now you will use them as part of a simple design system so colors, spacing, and borders stay consistent across a page.

Instead of writing the same value again and again, you can define it once inside :root and reuse it with var().

Your challenge: Create a small themed interface using reusable variables for colors, spacing, and rounded corners.

What should you notice?

Custom properties become especially useful when the same design value appears in several places. For example, the same accent color might be used for borders, buttons, headings, and links.

Instead of writing #8A8A8A in every rule, you can define: --accent: #8A8A8A;

Then reuse it with: var(--accent)

Experiment: Change only the value of --accent. If you use that variable throughout your CSS, every element connected to it should update together.

Variables are not only for colors: You can also store spacing, border radius, widths, font sizes, and many other CSS values.

For example: --spacing: 20px; can be reused for both padding and gaps.

And: --radius: 10px; can give several different elements the same rounded-corner style.

Why does this help?

Imagine a page with ten cards. If every card uses the same border radius and you later decide to change it, editing ten separate rules would be repetitive.

With a variable, you can change the shared value once.

Organize CSS by purpose:

As stylesheets grow, it can help to keep related rules together. A simple stylesheet might be organized in this order: variables first, then general page styles, layout rules, reusable components, and finally special states such as :hover.

You do not need a complicated architecture for a small site. The goal is simply to make your CSS predictable and easy to change.

Try a mini theme switch: Change these values:

--page-bg, --surface, --text, and --accent.

You should be able to give the whole example a noticeably different appearance without rewriting the individual card rules.

Good CSS habit: Create variables for values that genuinely repeat or belong to the same visual system. You do not need to turn every single number into a variable.

<style>

  :root {
    --page-bg: #000;
    --surface: #111;
    --text: #ffffff;
    --accent: #8A8A8A;
    --spacing: 20px;
    --radius: 10px;
  }

  body {
    background-color: var(--page-bg);
    color: var(--text);
  }

  .card {
    background-color: var(--surface);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
  }

  .card h2 {
    color: var(--accent);
  }

  button {
    background-color: var(--accent);
    color: var(--page-bg);
    border: none;
    border-radius: var(--radius);
    padding: 10px 18px;
  }

</style>

<h1>Theme Workshop</h1>

<div class="card">
  <h2>First Card</h2>
  <p>This card uses values from the shared theme.</p>
  <button>Explore</button>
</div>

<div class="card">
  <h2>Second Card</h2>
  <p>Both cards reuse the same CSS variables.</p>
  <button>Continue</button>
</div>