Introduction

If you’re like me, maintaining a clean and efficient codebase can feel like a never-ending battle, especially in larger projects. Over time, our files accumulate unused code, duplicated logic, inconsistent styles, and other things that slow down development and introduce bugs. Thankfully, the new GitHub Copilot Edits (GCE) lets us handle these issues across the board.

Whether it’s cleaning up CSS, refactoring functions, standardizing components, or even optimizing entire folders… and it only takes a few clicks.

In this article, I’ll walk you through using GCE to:

1. Automatically identify and remove unused CSS classes
2. Extract repeated color values to CSS variables
3. Reorganize your stylesheets for better maintainability

Let’s dive in!

What is GitHub Copilot Edits?

Copilot Edits is a new powerful new feature in VS Code that allows you to leverage AI to make comprehensive code changes across multiple files simultaneously. It goes beyond just suggesting code snippets—it can understand your codebase at a deeper level and apply complex transformations based on your natural language instructions.

Unlike regular Copilot completions or chat, Copilot Edits operates in two modes:

• Edit mode: You select which files to edit and provide a prompt
• Agent mode: Copilot autonomously determines which files need changes and can even suggest terminal commands to implement your request

I’ll be making CSS examples throughout this article because it’s easier to understand the concept visually, but the same principles can be applied to functions, components, and other parts of your codebase.

1: Removing Unused CSS Classes with Copilot Edits

Let’s start with one of the most common CSS maintenance tasks: removing unused classes. Here’s how you can do it in just a few clicks:

1. Open the Copilot Edits view using Ctrl+Shift+I
2. Add the necessary files to your working set (CSS and TSX/React component files)

3. Issue a simple prompt like: "Delete the CSS classes that are not used at all in the TSX files"

Here’s what happened behind the scenes:

1. Copilot analyzed both the CSS and TSX files
2. It identified classes that don’t appear in any TSX files
3. It suggested precise edits to remove those classes
4. (extra) It even grouped the changes by how close the html elements are in the TSX files, this will make reviewing the changes easier.

You can then review the suggested changes and accept them with a single click (Ctrl+Enter).

📢 Make sure you have committed your previous changes, going back from changes can sometimes still be a bit of a hassle if you change 5+ files. 📢

Real Example Results

In my project, Copilot Edits identified and removed several unused classes:

.container, .container h1, .container-hero-feedback
.highlightSectionContent, .highlightSectionTitle
.highlightSectionParagraph, .highlightSectionButtonContainer
.highlightButton, .contentWidth .processGrid

The result? My CSS file went from 209 lines to just 64: a 70% reduction in code size in about 5 seconds!

2: Better Color Management with CSS Variables

Another common issue in CSS is having repeating color values scattered throughout the codebase. Copilot Edits can automatically identify these patterns and refactor them into CSS variables.

Here’s how to do it:

1. Open Copilot Edits
2. Use the special #codebase tag to let Copilot search across all files:

   #codebase take all hex color values in the codebase that are repeated and add them to the root variables with a sensible name
   

This simple prompt triggers Copilot to:

1. Scan your entire codebase for repeated hex colors
2. Create appropriate CSS variables in your :root selector
3. Replace all occurrences with the new variables

The Result

Before:

.header { background-color: #1a2b3c; }
.footer { border-top: 1px solid #1a2b3c; }
.button { background-color: #ff5500; }
.callToAction { color: #ff5500; }

After:

:root {
  --primary-color: #1a2b3c;
  --accent-color: #ff5500;
}

.header { background-color: var(--primary-color); }
.footer { border-top: 1px solid var(--primary-color); }
.button { background-color: var(--accent-color); }
.callToAction { color: var(--accent-color); }

Not only is this more maintainable, but it also makes theme switching much easier in the future!

3: Reorganizing Files for Better Structure

As projects grow, CSS files often become unwieldy. Copilot Edits can help you reorganize your CSS into a more logical structure with minimal effort.

Use this prompt:

reorganize this folder into subfolders, and adjust the imports

Copilot will:

1. Analyze your CSS organization
2. Suggest a logical folder structure (like components, layouts, utilities, etc.)
3. Move files to appropriate folders
4. Update all import statements throughout your codebase

This saves hours of manual work and reduces the risk of breaking your application.

Working with the Entire Codebase

One of the most powerful features of Copilot Edits is its ability to work across your entire codebase using the #codebase tag. This is particularly useful for large-scale refactoring tasks.

Example:

#codebase convert all CSS to use a mobile-first approach with media queries

This single prompt can transform your entire styling approach!

Best Practices

Based on my experience, here are some tips for getting the most out of Copilot Edits for CSS work:

1. Be specific in your prompts: “Remove unused CSS classes in the marketing pages” works better than “clean up CSS”
2. Review changes carefully: While Copilot is smart, always check its suggestions before accepting, especially for critical code or large-scale changes
3. Use agent mode for complex tasks: For major refactoring, let Copilot plan the changes and suggest terminal commands
4. Commit before major changes: Make sure you have a clean Git state before applying major transformations

The Bigger Picture: AI-Powered Code Maintenance

GitHub Copilot Edits is more than just a convenience, it signals a shift in how developers interact with their codebases. Instead of manually hunting for unused CSS, restructuring files, or standardizing variables, AI-powered tools allow us to work at a higher level of abstraction.

The implications go beyond CSS: imagine dynamic refactoring across multiple files, automatic dependency resolution, and even AI-driven debugging. As AI agents become more advanced, we may reach a point where maintaining large projects isn’t about writing every line of code ourselves, but about curating and guiding AI to make optimal changes.

However, this also raises questions:

• How much should we trust AI to make large-scale code changes?
• Where is the balance between automation and developer oversight?
• Will AI-powered development shift the focus from coding to architecture and problem-solving?

As Copilot and similar tools evolve, developers will need to adapt. Not just by learning how to use AI effectively, but by rethinking workflows, best practices, and even the skills that define software engineering. Today, it starts with CSS cleanup. Tomorrow, who knows?

Additional Resources

• Official GitHub Copilot Edits documentation
• VS Code Extension for Copilot
• More CSS optimization techniques

Have you tried Copilot Edits for CSS cleanup? Share your experiences in the comments below!