🧩 CSS Modules and Component-Based Styling

Why Component-Based Styling?

Modern UIs are built from small, reusable components rather than whole pages. Traditional CSS, where every selector is global by default, causes real pain at that scale:

• Global scope — a rule written for one component can affect every other one.
• Name collisions — two developers both write .card and quietly break each other.
• Style leaking — styles bleed into places you never intended.
• Specificity wars — you pile on ever-more-specific selectors just to win overrides.

Component-based styling fixes this by drawing a firm boundary around each component's styles — much like encapsulation in object-oriented programming hides an object's internals.

CSS Modules

A CSS Module is a normal CSS file whose class and animation names are scoped locally by default. It isn't an official spec — it's a build-step (webpack, Vite, Next.js) that rewrites each class into a unique identifier so it can't collide with anything else.

/* Button.module.css */
.button {
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}
.primary { background-color: #3498db; color: white; }

// Button.jsx — import the scoped class map
import styles from './Button.module.css';

function Button({ primary, children }) {
  const cls = primary ? `${styles.button} ${styles.primary}` : styles.button;
  return <button className={cls}>{children}</button>;
}

At runtime the DOM shows class="Button_button_1a2b3c Button_primary_4d5e6f" — guaranteed unique, so no other .button anywhere can interfere.

Composition

CSS Modules add a composes keyword so a class can inherit from another — even from another file:

/* typography.module.css */
.heading { font-weight: 700; line-height: 1.2; }
.largeHeading { composes: heading; font-size: 2rem; }

/* Card.module.css */
.actionButton { composes: button from './Button.module.css'; margin-top: 12px; }

CSS-in-JS

CSS-in-JS writes styles directly in JavaScript instead of separate .css files. Popular libraries include styled-components, Emotion, and Stitches. Its superpower is dynamic styling driven by component props.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#3498db' : 'transparent'};
  color: ${props => props.primary ? 'white' : '#3498db'};
  border: ${props => props.primary ? 'none' : '1px solid #3498db'};
  padding: 8px 16px;
  border-radius: 4px;
  &:hover { filter: brightness(0.95); }
`;

// <Button primary>Save</Button>

⚠️ The trade-off: Runtime CSS-in-JS generates styles in the browser, which adds a little JavaScript overhead and needs extra setup for server-side rendering. "Static" CSS-in-JS libraries and build plugins claw most of that back by extracting CSS at build time.

Utility-First CSS

Utility-first CSS — popularized by Tailwind CSS — flips the model: instead of writing component classes, you compose lots of tiny single-purpose classes right in the markup.

<!-- Traditional -->
<button class="btn btn-primary">Button</button>

<!-- Utility-first (Tailwind) -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

The usual worry — "the HTML gets cluttered" — mostly disappears in component frameworks, because you wrap the utilities inside a reusable component and never repeat them:

function Button({ primary, children }) {
  const base = "font-bold py-2 px-4 rounded";
  const variant = primary
    ? "bg-blue-500 hover:bg-blue-700 text-white"
    : "border border-blue-500 text-blue-700 hover:bg-blue-50";
  return <button className={`${base} ${variant}`}>{children}</button>;
}

Styling Architecture

Whichever tool you pick, a healthy system layers styles from shared foundations up to specific components. Start from design tokens (your colors, spacing, and type scale) and build outward:

Tokens are easy to express as CSS custom properties, which is exactly what the design system underneath this course does:

:root {
  --color-primary: #3498db;
  --space-3: 1rem;
}
.button { background: var(--color-primary); padding: var(--space-3); }

Performance Trade-offs

The approaches differ mostly in when the CSS is produced — at build time (fast at runtime) or in the browser (flexible but heavier):

Hands-on Exercise

import styles from './Button.module.css';
function Button({ variant = 'primary', size, children, ...props }) {
  const cls = [styles.button, styles[variant], size && styles[size]]
    .filter(Boolean).join(' ');
  return <button className={cls} {...props}>{children}</button>;
}

Summary & Quiz

📚 Further Reading

• CSS Modules — official readme
• styled-components documentation
• Tailwind CSS documentation

🚀 What's Next?

You've reached the end of the module's concepts. Next up is the weekend project, where you'll put modern layout and styling together into one polished, responsive page.