General Assembly logo

Advanced CSS and Modular Design

Session Time: 120 minutes

Table of Contents

  1. CSS Variables (Custom Properties)
  2. Modular Architecture and Scalability
  3. AI-Assisted Code Review and Refactoring
  4. Lab: Refactoring Modular CSS Architecture
  5. Wrap-Up and Reflection

Learning Objectives

Upon completion of this session, participants will be able to:

  • Construct modular CSS structures using variables and reusable patterns.
  • Evaluate CSS for scalability and efficiency.
  • Utilize AI to identify redundancy and suggest refactors.

Session Breakdown

Segment Topic Duration (minutes)
Concept I CSS Variables & Modular Systems 50
Concept II Scalability & Efficiency Evaluation 40
Practical Lab Lab: Refactoring Modular CSS Architecture 30
Total 120 minutes

1. CSS Variables (Custom Properties)

Learning objective: Construct modular CSS structures using variables and reusable patterns.

As websites grow, managing thousands of lines of CSS becomes difficult. If you decide to change your brand color from "Blue" to "Teal," you shouldn't have to find and replace it in 50 different places. This is where CSS Variables (Custom Properties) come in.

CSS variables, also known as custom properties, are a fantastic tool to help you write CSS that is clearer in its intent and more maintainable.

CSS Variables allow you to store specific values (like colors, fonts, or spacing) in one place and reuse them throughout your stylesheet.

Say we're working for a company that wants to use its primary brand colors repeatedly throughout a website. Without CSS variables, that may look like this:

h1 {
  color: #7289DA;
}

a {
  background-color: #7289DA;
  color: #FFFFFF;
}

button {
  background-color: #7289DA;
  color: #FFFFFF;
}

#comments {
  border: 2px solid #7289DA;
}

footer {
  background-color: #7289DA;
  color: #FFFFFF;
}

In other words, lots of repetition and lots of room for errors. It would be easy for us to make a mistake when applying this color. CSS variables let us avoid being repetitive with values.

Variables are inherited from ancestors. This means if you want a variable available everywhere in the <body> of a page, then you should define that variable in the <body> element. Applying it even higher, like on the html element, is also common. Let's define a variable:

body {
  --brand-color: #7289DA;
}

This syntax defines a variable called --brand-color. The -- at the start is required. You can't use special characters other than dashes - in the name of a variable. Lower kebab case is generally preferred but not strictly required.

The value #7289DA is assigned to this variable. Let's make use of it in our code from above!

h1 {
  color: var(--brand-color);
}

a {
  background-color: var(--brand-color);
  color: #FFFFFF;
}

button {
  background-color: var(--brand-color);
  color: #FFFFFF;
}

#comments {
  border: 2px solid var(--brand-color);
}

footer {
  background-color: var(--brand-color);
  color: #FFFFFF;
}

Here, we can see that to apply the variable in our CSS, we use a special function in CSS: var() and write the variable name inside of it.

💡 CSS functions are independent of other languages. Check out this MDN reference for more.

Now that we've done that, we can be sure that our brand colors are being used uniformly throughout the site, and we have autocomplete in CSS to help us not make errors.

Incoming rebrand

And it turns out we did that work just in time for an update to our brand colors - our new signature color is #5865F2. It's a good thing we set up our CSS variables. Now we only have to change this in one place.

body {
  --brand-color: #5865F2;
}

Just like that, our site is a slightly different shade of blue/purple, and the rebranding is complete. Cheers!

Syntax:

  • Defining a variable: Start with two dashes -- (e.g., --primary-color).
  • Using a variable: Wrap it in var() (e.g., color: var(--primary-color)).

The Global Scope (:root)

We typically define variables in the :root pseudo-class, which acts like the <html> tag. This makes the variables available globally across the entire document.

:root {
  /* Define variables here */
  --brand-blue: #007bff;
  --spacing-md: 16px;
  --main-font: 'Helvetica Neue', sans-serif;
}

.button {
  /* Use them here */
  background-color: var(--brand-blue);
  padding: var(--spacing-md);
  font-family: var(--main-font);
}

Benefits of Variables

  1. Maintainability: Change a value in one line, and it updates everywhere.
  2. Readability: color: var(--danger-red) is easier to understand than color: #d9534f.
  3. Theming: You can easily swap themes (Light Mode vs. Dark Mode) just by redefining variables.

2. Modular Architecture and Scalability

Learning objective: Evaluate CSS for scalability and efficiency.

Writing CSS is easy; maintaining it is hard. Modular Design is the practice of breaking your UI into independent, reusable pieces (components) rather than writing unique styles for every single page.

The "Spaghetti Code" Problem

Without a system, CSS often suffers from:

  • Specificity Wars: Using !important to override other styles.
  • Redundancy: Copying and pasting the same code for a button on five different pages.
  • Dependencies: Changing the style of the "About" page accidentally breaking the "Home" page.

Component-Based Thinking

Instead of styling a specific HTML tag, we style a Class that represents a component.

Example: The Button Component Don't style <button>. Create a class .btn that handles the structure, and modifier classes for variations.

/* Base Component */
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* Modifiers */
.btn-primary {
  background-color: var(--brand-blue);
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: white;
}

This approach is Scalable: You can add new buttons without breaking old ones, and Efficient: You reuse the base .btn styles.

3. AI-Assisted Code Review and Refactoring

Learning objective: Utilize AI to identify redundancy and suggest refactors.

Refactoring (cleaning up code without changing what it does) is a perfect task for AI. It can scan patterns faster than a human eye.

Detecting Redundancy

You can paste a block of messy CSS into an AI tool to audit it.

Prompt Example:

"I have pasted my CSS file below. Analyze it for redundant code. Are there repeated hex codes that should be turned into variables? Are there duplicate style blocks?"

Evaluating Maintainability

AI can also critique your class naming and structure.

Prompt Example:

"Review this CSS snippet. I am using div div p span selectors. Explain why this is bad for modularity and scalability, and suggest a better class-based alternative using BEM naming conventions."

4. Lab: Refactoring Modular CSS Architecture

Learning objective: Refine existing styles using CSS variables and component-based organization. Use AI to assess maintainability, identify redundancies, and recommend improvements for scalability and clarity.

Overview

In this lab, you will take a "legacy" website (a project with messy, repetitive CSS) and modernize it using CSS Variables and a modular structure.

Part 1: The Audit

  1. Open the provided style.css file (or a previous project).
  2. Identify repeated values. Look for:
    • The same Hex color codes (e.g., #333) appearing multiple times.
    • The same pixel values for padding (e.g., 20px).
  3. AI Step: Copy the entire CSS file and paste it into your AI assistant.
    • Prompt: "Extract all unique colors and font sizes from this CSS and list them. Suggest variable names for them."

Part 2: Implementing Variables

  1. At the top of your CSS file, add a :root { ... } block.
  2. Define your variables based on the AI's suggestions (e.g., --text-dark: #333;).
  3. Replace the hard-coded values in your CSS with var(...).

Part 3: Component Refactor

  1. Find a UI element that is styled inconsistently (like buttons or cards).
  2. Create a standardized .card or .btn class.
  3. AI Step: Ask the AI to help you merge conflicting styles.
    • Prompt: "I have three different styles for 'cards' in my CSS. Can you combine them into one flexible .card component with modifier classes for the variations?"

Deliverable: The Refactor Report

Submit a summary that includes:

  • A screenshot of your :root block showing your new design system.
  • Before-and-after code snippets of a component you refactored.
  • The AI's feedback on your original code's "Specificty" or "Redundancy."

5. Wrap-Up and Reflection

Discussion Questions:

  1. How do CSS Variables help when working in a team of developers?
  2. Why is it dangerous to style HTML elements directly (like h2 or button) instead of using classes?
  3. How did the AI help you identify patterns you might have missed manually?

Resources