Resets, Reusable Components and CSS Organization

What Is It?

A small reset makes selected defaults predictable. Component classes and shared tokens help a growing stylesheet stay readable and reusable.

Properties, Tags and Attributes Explained

• universal selector *: Matches elements; combine with pseudo-elements for a box-sizing reset.
• box-sizing: border-box simplifies component width calculations.
• custom property: A shared design value such as --space or --accent.
• modifier class: An extra class expressing a component variation, such as button--quiet.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Small reset

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resets, Reusable Components and CSS Organization</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    button, input { font: inherit; }
    .demo { width: 100%; padding: 24px; border: 4px solid #2563eb; }
  </style>
</head>
<body>
  <div class="demo">A predictable full-width box</div>
</body>
</html>

What you see: The box fits the viewport while its padding and border remain included in its width.

Example 2: Reusable button variants

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resets, Reusable Components and CSS Organization</title>
  <style>
    :root { --accent: #1d4ed8; --space: 12px; }
    .button { display: inline-block; padding: var(--space); border: 2px solid var(--accent); background: var(--accent); color: white; border-radius: 6px; }
    .button--quiet { background: white; color: var(--accent); }
    .button:focus-visible { outline: 3px solid #ea580c; outline-offset: 3px; }
  </style>
</head>
<body>
  <button type="button" class="button">Start lesson</button> <button type="button" class="button button--quiet">Review notes</button>
</body>
</html>

What you see: Both buttons share a base class while the extra modifier creates a quiet variation.

When and Where to Use It

Use a small intentional reset, reusable component classes, and shared tokens as a site grows.

Common Mistake or Useful Tip

Do not reset every property blindly. Removing native list markers, focus indicators, or control appearance creates work to restore usable behavior.

Try It Yourself

Add a third button that reuses the same base class and a new modifier.