General Assembly logo

Lab 14: Creating Reusable Style Components

Introduction

In previous labs, you built functional and visually complete web pages using raw CSS. While those styles worked, they were often repetitive, tightly coupled, and hard to maintain. As projects grow, this approach quickly becomes brittle.

In this lab, you’ll refactor an existing project to use CSS variables, reusable style components, and modular design principles. You’ll also use AI as a code review assistant to identify redundancy and suggest optimization strategies as a facimile of real-life workflows.

By the end of this lab, your CSS will be more scalable, readable, and reusable, without changing the visual output of the site.

Learning Objectives

By the end of this lab, you’ll be able to:

  • Identify redundancy and tight coupling in existing CSS
  • Refactor styles using CSS custom properties (:root variables)
  • Create reusable “style components” (buttons, cards, layouts)
  • Apply modular CSS organization strategies
  • Use AI to analyze CSS and guide refactoring decisions
  • Evaluate tradeoffs between clarity, reuse, and over-abstraction

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

  • Completed prior labs with a multi-section HTML/CSS project

  • Working knowledge of:

    • CSS selectors and specificity
    • Flexbox or Grid
    • Classes vs semantic elements

  • A previously built project with:

    • At least 2 pages or
    • Multiple repeated UI elements (cards, buttons, navs, sections)

  • Access to an AI assistant (ChatGPT or equivalent)

Setup Instructions

  1. Open your previous project in your code editor

  2. Make a copy of the project folder:

    project-name/
project-name-refactor/

  3. You will work only in the refactor version

  4. Open the main CSS file and keep it visible throughout the lab

⚠️ Do not change HTML structure unless explicitly instructed

Exercise Overview

You will refactor an existing CSS codebase without changing the UI output.

Your goals:

  • Centralize design decisions (colors, spacing, typography)
  • Reduce duplication
  • Increase reuse
  • Improve readability and maintainability

AI will be used as a diagnostic and advisory tool, not as a replacement for reasoning.

Phase 1 - Baseline CSS Audit

Step 1: Identify Repetition

Scan your CSS file and write down:

  • Repeated colors (hex, rgb, named)
  • Repeated font sizes
  • Repeated spacing values (margin/padding)
  • Similar selector blocks (e.g., multiple .card-like styles)

Example notes:

#333 used for headings and footer
padding: 1rem appears 6 times
border-radius: 8px appears on cards and buttons

Step 2 - Group by Intent

Ask yourself:

  • Which values represent design decisions?
  • Which values are component-specific?
  • Which are accidental duplicates?

Do not refactor yet—this phase is observation only.

Phase 2 - Introducing CSS Variables

Step 1: Define Global Variables

At the top of your CSS file, create a :root block:

:root {
  --color-primary: #2c3e50;
  --color-accent: #3498db;
  --color-text: #333;

  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  --radius-sm: 4px;
  --radius-md: 8px;

  --font-base: 16px;
  --font-lg: 1.25rem;
}

Step 2 - Replace Hardcoded Values

Refactor existing rules to use variables:

.card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

✅ The page should look identical after this step.

Phase 3 - Creating Reusable Style Components

Step 1 - Identify Components

Look for repeating UI patterns such as:

  • Buttons
  • Cards
  • Section containers
  • Page headers
  • Navigation items

Step 2 - Extract Base Classes

Create reusable base styles:

.btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  cursor: pointer;
}

Extend them with modifiers:

.btn-primary {
  background-color: var(--color-accent);
  color: white;
}

Apply these classes to existing elements without changing layout.

Step 3 - Reduce Selector Complexity

Refactor overly specific selectors:

/* Before */
main .content .card h2 {}

/* After */
.card-title {}

Phase 4 - AI-Guided Optimization

Step 1 - AI CSS Review

Paste your refactored CSS into an AI assistant and ask:

“Analyze this CSS for redundancy, missed reuse opportunities, and overly specific selectors. Suggest improvements without changing visual behavior.”

Step 2: Evaluate Suggestions

For each AI suggestion, decide:

  • ✅ Improves clarity or reuse → apply
  • ⚠️ Over-abstracted → skip
  • ❌ Changes intent or readability → reject

You are the final decision-maker.

Step 3 - Final Cleanup

  • Remove unused rules
  • Group related sections with comments:
/* === Buttons === */
/* === Cards === */
/* === Layout === */

Reflection Questions (Answer in Comments or README)

  1. Which variables provided the most value?
  2. Where did reuse improve clarity vs hurt readability?
  3. Did the AI suggest anything you strongly disagreed with? Why?
  4. How would this refactor help a team of 5 developers?

Tips for Success

  • Refactor incrementally—refresh often
  • Avoid premature abstraction
  • Prefer semantic reuse over clever tricks
  • AI is a reviewer, not an architect
  • If unsure, prioritize readability

What to Expect

Before Refactor

  • Repeated values
  • Long selectors
  • Difficult global changes

After Refactor

  • Centralized design tokens
  • Clear component boundaries
  • Faster global changes
  • Cleaner diffs in version control

Common Issues and Troubleshooting

Issue: Page styling breaks after refactor → Check variable names and fallbacks

Issue: Too many variables → Consolidate and remove unused ones

Issue: AI suggests extreme abstraction → Remember this is not a design system (yet)

Lab Workflow Summary

  1. Audit existing CSS ↓
  2. Extract design tokens into variables ↓
  3. Create reusable component classes ↓
  4. Simplify selectors ↓
  5. Use AI to review and refine ↓
  6. Reflect on tradeoffs