Write a CSS Refactoring Checklist

When you're working with Claude on a CSS refactoring project, the CSS Refactoring Checklist prompt is a practical tool designed for developers who need to systematically improve their stylesheets. Whether you're maintaining a legacy codebase, preparing for a redesign, or simply want to reduce technical debt, this prompt guides Claude to generate a comprehensive checklist tailored to your specific project. It's particularly useful for teams that want to establish consistent coding standards, improve page performance, and make their CSS more maintainable over time. Frontend developers, full-stack engineers, and teams with shared codebases benefit most from using this structured approach.

Using this prompt is straightforward. You fill in the [project] placeholder with your actual project name or description. For example, instead of the generic placeholder, you might write "Create a checklist for refactoring CSS in our e-commerce platform's checkout flow" or "Create a checklist for refactoring CSS in the customer dashboard redesign." Be specific about the scope, whether it's a particular component, feature section, or your entire stylesheet. The more context you provide about your project's size and goals, the more relevant Claude's output becomes.

When you run this prompt, expect Claude to deliver a detailed, actionable checklist organized by categories like naming conventions, CSS organization structure, performance optimization, and maintainability practices. The output typically includes specific techniques for reducing duplication, improving selector efficiency, and implementing scalable naming systems. Claude will often suggest tools and methodologies like BEM, utility-first approaches, or CSS-in-JS alternatives depending on your project context.

To get better results from this prompt, mention any existing frameworks or preprocessors you're using, such as Tailwind CSS, SCSS, or styled-components. This helps Claude generate recommendations that align with your current tech stack rather than suggesting a complete architecture overhaul. Include any known performance issues or maintenance pain points your team currently faces, which makes the checklist more targeted and immediately actionable.