Find unused CSS with houtini-lm

Quick Start

Start cleaning up your CSS immediately with these ready-to-use prompts:

Analyze Live Website

Please check my website for unused CSS: https://mywebsite.com

Local CSS File Analysis

Analyze this CSS file for unused styles: C:/project/css/main.css

Project-Wide CSS Cleanup

Find unused CSS across my entire project at C:/website-project

Performance Boost

Removing unused CSS can reduce your stylesheet size by 30-70%, significantly improving page load times and user experience.

What It Does

Your websites are probably shipping tons of CSS that never gets used. find_unused_css acts like a performance detective, analyzing your stylesheets to identify exactly which rules are redundant and safe to remove.

This intelligent analysis works in three powerful ways:

🌐 Live Website Analysis

Point it at any URL and it'll analyze the live website using browser automation, checking which CSS rules are actually applied to visible elements.

📁 Local File Analysis

Compare CSS files directly against HTML files to identify unused selectors and rules without needing a live website.

🗂️ Project-Wide Discovery

Analyze entire projects automatically, discovering CSS and HTML files and performing comprehensive usage analysis across your codebase.

The analysis is thorough yet practical - it understands media queries, pseudo-selectors, and complex CSS patterns whilst providing actionable recommendations for optimization.

Parameters

Configure the analysis to match your specific needs:

Parameter	Type	Required	Default	Description
`url`	string	Yes*	-	Website URL to analyze for CSS usage Example: `"https://mywebsite.com"`
`cssPath`	string	Yes*	-	Path to CSS file to analyze locally Example: `"C:/project/styles/main.css"`
`htmlPath`	string	No	-	Path to HTML file to check CSS usage against Use with cssPath for local file comparison
`projectPath`	string	Yes*	-	Path to project directory for comprehensive analysis Automatically discovers HTML and CSS files
`analysisDepth`	string	No	"detailed"	Analysis depth: "basic", "detailed", "comprehensive" Comprehensive includes media query analysis
`ignorePseudoSelectors`	boolean	No	false	Ignore pseudo-selectors like :hover, :focus Set true if you want to keep interactive styles
`includeMediaQueries`	boolean	No	true	Include media query analysis for responsive styles Essential for mobile-responsive websites

*Choose one: url for live analysis, cssPath for local files, or projectPath for full projects

Real-World Examples

Here's how to use CSS analysis in different scenarios:

🌐 Live Website Performance Audit

Production Website Analysis

houtini-lm:find_unused_css with:
- url: "https://mywebsite.com"
- analysisDepth: "comprehensive"
- includeMediaQueries: true

📄 Local File Comparison

CSS vs HTML Analysis

houtini-lm:find_unused_css with:
- cssPath: "C:/project/css/styles.css"
- htmlPath: "C:/project/index.html"
- analysisType: "performance"

🗂️ Complete Project Cleanup

Project-Wide CSS Optimization

houtini-lm:find_unused_css with:
- projectPath: "C:/website-project"
- analysisDepth: "comprehensive"
- ignorePseudoSelectors: false
- includeMediaQueries: true

🎨 Design System Cleanup

Component Library Analysis

houtini-lm:find_unused_css with:
- projectPath: "C:/design-system"
- analysisType: "usage"
- ignorePseudoSelectors: true
- analysisDepth: "detailed"

What You Get Back

The analysis delivers actionable insights that help you optimize your CSS immediately:

🎯 Unused CSS Selectors

Specific unused rules with exact line numbers and file locations
Selector categories - classes, IDs, elements, complex selectors
Risk assessment - safe to remove vs. investigate further
File impact analysis - which stylesheets have the most bloat

📊 Usage Statistics

Overall usage percentage - how much of your CSS is actually used
File-by-file breakdown - which stylesheets are most bloated
Selector type analysis - unused classes vs. IDs vs. elements
Size impact estimates - potential byte savings from cleanup

⚡ Performance Impact Analysis

Bundle size reduction potential with specific byte estimates
Performance scores - how cleanup affects loading times
Critical path impact - effects on above-the-fold rendering
Browser parsing benefits - reduced CSS parsing time

📱 Media Query Analysis

Responsive breakpoint usage - which media queries are active
Mobile vs. desktop styles - unused responsive rules
Print stylesheet analysis - often completely unused
Device-specific optimizations - target unused responsive styles

🔧 Optimization Recommendations

Safe removal candidates - styles you can delete immediately
Investigation needed - selectors that might be used dynamically
Refactoring opportunities - consolidate similar unused rules
Build process improvements - suggestions for automated cleanup

Performance Insights

Each recommendation comes with estimated performance improvements, helping you prioritize which CSS cleanup will have the biggest impact on your website's speed.

Perfect Use Cases

Here's when CSS analysis becomes your performance optimization secret weapon:

🚀 Performance Optimization

Before launching or when Core Web Vitals need improvement. Identify the quickest wins for reducing bundle size and improving First Contentful Paint scores.

🧹 Legacy Code Cleanup

Inherited a project with years of accumulated CSS? Find out which styles are actually needed before refactoring or migrating to a new design system.

📐 Design System Audits

When building or cleaning up component libraries. Ensure your design system CSS only includes styles that are actually used across your projects.

🏗️ Framework Migration

Moving from Bootstrap to Tailwind? Or cleaning up after removing a CSS framework? Identify which framework styles can be safely removed.

📱 Responsive Optimization

Optimize mobile performance by identifying unused desktop-only styles or vice versa. Essential for mobile-first optimization strategies.

🔍 Pre-Deployment Audits

Before going live, ensure your CSS is as lean as possible. Part of your performance optimization checklist alongside image optimization and JS minification.

JavaScript-Generated Content

Be careful with single-page apps or sites with lots of dynamic content. Some "unused" CSS might actually be needed for JavaScript-generated elements.

Best Practices

Get the most accurate and useful CSS analysis with these expert tips:

🎯 Choose the Right Analysis Method

Live URLs - Best for production sites with dynamic content
Local files - Perfect for development and static sites
Project analysis - Ideal for comprehensive cleanup projects

📱 Consider All Breakpoints

Always include media query analysis for responsive sites:

Set includeMediaQueries: true for comprehensive analysis
Test different viewport sizes if analyzing live sites
Consider mobile-first vs. desktop-first approaches
Don't forget print stylesheets - they're often completely unused

🎨 Handle Interactive Styles Carefully

Keep pseudo-selectors - :hover, :focus, :active are often needed
Consider user interactions - modals, dropdowns, tooltips
Test with user scenarios - logged in/out states, different content
Check JavaScript-dependent styles - dynamic class additions

⚡ Incremental Cleanup Strategy

Don't try to clean everything at once:

Start with high-confidence deletions
Test thoroughly after each cleanup phase
Use version control to track changes
Consider automated CSS purging tools for ongoing maintenance

🔧 Development Workflow Integration

Run analysis before major releases
Include CSS cleanup in performance optimization sprints
Use findings to improve CSS architecture
Document which styles are safe vs. risky to remove

Pro Tip

For the most comprehensive analysis, run the function on your live production site AND your local development files. This catches both static and dynamic usage patterns.

Troubleshooting

Resolve common issues and get better results from CSS analysis:

Analysis shows too many false positives

The analysis is flagging CSS that you know is being used.

For dynamic content, analyze live URLs instead of static files
Set ignorePseudoSelectors: false to keep interactive styles
Consider JavaScript-generated content that may not be visible during analysis
Test different pages of your site - some styles may only be used on specific pages

Live website analysis fails or times out

Can't analyze live websites or getting timeout errors.

Ensure the URL is accessible and not behind authentication
Check if the site has anti-bot protection that blocks automated browsers
Try analyzing local files instead if you have access to the source
Consider using simpler page URLs rather than complex application routes

Media query analysis is incomplete

Not getting comprehensive responsive CSS analysis.

Ensure includeMediaQueries: true is set
Use "comprehensive" analysis depth for detailed breakpoint analysis
For live sites, the browser viewport affects which media queries are evaluated
Consider analyzing at different screen sizes or use local file analysis

Project analysis isn't finding CSS files

Project-wide analysis isn't discovering your stylesheets.

Ensure CSS files have standard extensions (.css, .scss, .sass)
Check that files are within the project path and not in ignored directories
Try specifying cssPath directly for non-standard file structures
Verify file permissions allow reading CSS files

Analysis results seem inaccurate

The usage statistics don't match your expectations.

Increase analysis depth to "comprehensive" for more thorough checking
Consider that CSS frameworks often have low usage rates
Check if you're analyzing the right files - ensure HTML and CSS paths are correct
For SPAs, consider analyzing multiple routes or use live URL analysis