General Assembly logo

Type-Safe Styling and LLM Code Reviews

Session Time: 120 minutes

Table of Contents

  1. Code Quality and Standards Compliance
  2. AI-Driven Code Reviews
  3. Iterative Refactoring and Revision
  4. Lab: Creating Reusable Style Components
  5. Wrap-Up and Reflection

Learning Objectives

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

  • Evaluate HTML/CSS code for clarity, consistency, and standards compliance.
  • Employ AI for code review and structured feedback.
  • Revise projects based on AI and peer evaluation.

Session Breakdown

Segment Topic Duration (minutes)
Concept I Evaluating Code Quality & Standards 40
Concept II AI-Assisted Code Reviews 30
Practical Lab Lab: Creating Reusable Style Components 50
Total 120 minutes

1. Code Quality and Standards Compliance

Learning objective: Evaluate HTML/CSS code for clarity, consistency, and standards compliance.

Writing code that "works" is only half the battle. Professional developers must write code that is maintainable, readable, and compliant with web standards.

The Pillars of Clean Front-End Code

  1. Clarity: Can another developer (or you, six months from now) understand what this code does immediately?
  2. Consistency: Does the code follow a strict style guide (e.g., indentation, naming conventions)?
  3. Standards Compliance: Does the HTML use semantic tags? Is the CSS valid and compatible across browsers?

Visualizing Code Maturity

graph TD
    A[Draft Code] -->|1. Analysis| B{Meets Standards?}
    B -->|No| C[Messy / Hard to Maintain]
    B -->|Yes| D[Clean / Modular]
    
    C -->|Refactor| A
    D -->|Ready for Review| E[Peer/AI Review]
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style D fill:#9f9,stroke:#333,stroke-width:2px

Example: Clarity via Naming

CSS often becomes messy when class names are vague.

Poor Clarity:

.box {
  background: red;
  padding: 10px;
}

High Clarity (BEM Naming Convention):

.card__alert--error {
  background-color: var(--color-error);
  padding: var(--spacing-md);
}

In the second example, the class name clearly indicates the component (card), the element (alert), and the modifier (error). Using CSS variables (--color-error) introduces a layer of "type-safety" by ensuring values are defined in one place and reused strictly.

2. AI-Driven Code Reviews

Learning objective: Employ AI for code review and structured feedback.

Large Language Models (LLMs) act as an "always-available" senior developer. They can scan your code for errors, redundancy, and deviations from best practices that user eyes might miss.

The Role of AI in Review

Instead of just asking AI to write code, you can ask it to critique code.

Review Type What to ask the AI
Redundancy Check "Analyze this CSS file. Are there repeated properties that could be combined into a class or variable?"
Accessibility Audit "Review this HTML snippet. Are there missing ARIA labels or semantic issues that hurt accessibility?"
Consistency Check "Does this code follow standard BEM naming conventions? Point out any deviations."

Simulation: The Feedback Loop

sequenceDiagram
    participant D as Developer
    participant AI as AI Assistant
    
    D->>AI: Submits Code Snippet
    Note right of D: "Review for modularity<br/>and redundancy."
    
    AI-->>D: Provides Structured Feedback
    Note left of AI: 1. Duplicate colors found<br/>2. Non-semantic div used
    
    D->>D: Refactors Code
    D->>AI: Submits Revision
    AI-->>D: Confirms Improvements

Pro-Tip: When using AI for reviews, explicitly ask for the reasoning behind the feedback. This turns the review into a learning moment.

3. Iterative Refactoring and Revision

Learning objective: Revise projects based on AI and peer evaluation.

Refactoring is the process of restructuring existing computer code without changing its external behavior. It improves nonfunctional attributes of the software.

Strategies for Revision

  1. Isolate Changes: Do not try to refactor the entire website at once. Focus on one component (e.g., the Navbar or Footer).
  2. Test Often: After applying AI suggestions, check the browser. AI might suggest "cleaner" code that accidentally breaks a specific layout behavior.
  3. Document Changes: When you change a hardcoded pixel value to a CSS variable based on AI feedback, note why in your commit message.

"Type-Safe" Styling with CSS Variables

While CSS isn't a typed language like TypeScript, we can simulate type safety using Custom Properties (Variables).

  • Unsafe: color: #ff4500; (Hardcoded magic number)
  • Safe: color: var(--primary-brand-orange); (Defined constant)

AI is excellent at identifying "Unsafe" hardcoded values and suggesting a "Safe" variable mapping structure.

4. Lab: Creating Reusable Style Components

Learning objective: Refactor previous projects using CSS variables and modular design. Use AI to analyze the CSS for redundancy and guide optimization strategies.

Overview

In this lab, you will revisit a project you built in a previous session. You will treat your past self as a "junior developer" and use AI to help you refactor that code into a professional, modular, and "type-safe" system.

Part 1: The Audit

  1. Open your previous "Portfolio" or "Landing Page" project.
  2. Select the main CSS file.
  3. Action: Copy the entire CSS content.
  4. AI Prompt:

    "I am refactoring this CSS to use a modular design system. Analyze this code and list all hardcoded colors, font sizes, and spacing values. Group them so I can turn them into CSS variables."

Part 2: Refactoring for Modularity

  1. Based on the AI's output, create a :root selector at the top of your CSS file.
  2. Define your variables (e.g., --main-bg, --text-primary, --spacing-lg).
  3. Replace the hardcoded values in your code with these variables.
  4. Action: Ask the AI to check your work:

    "Here is my refactored CSS with variables. Did I miss any hardcoded values? Is the naming convention consistent?"

Part 3: Component Abstraction

  1. Identify a repeated UI element (e.g., buttons, cards).
  2. Ensure specific styles (width, specific margins) are separated from the base component styles (colors, padding).
  3. Deliverable: A "Before and After" code snippet comparison.

Deliverable: Optimization Report

Create a markdown document named refactor-report.md containing:

  • Summary of Redundancy: What the AI found (e.g., "The color #333 was used 12 times").
  • Variable Dictionary: A list of the new CSS variables you created.
  • Reflection: One specific instance where the AI caught an inconsistency you missed.

5. Wrap-Up and Reflection

Discussion Questions:

  1. Why is "refactoring" considered a development step and not just "fixing mistakes"?
  2. How did the AI assist in identifying patterns that were difficult to see with the naked eye?
  3. In the context of "Type-Safe" styling, why are CSS variables preferred over raw hex codes?

Resources