analyze_unused_css – CSS Usage Analysis and Optimization

Comprehensive CSS usage analysis with performance optimization and unused selector detection

Perfect For

Website Performance Optimization
Identify unused CSS selectors and rules to reduce bundle sizes and improve page load performance with detailed impact analysis.

CSS Cleanup and Maintenance
Systematic removal of dead CSS code from legacy stylesheets with confidence scoring for safe removal recommendations.

Bundle Size Reduction
Optimize CSS delivery by identifying critical vs non-critical styles with performance impact estimates and loading strategy recommendations.

Design System Optimization
Analyze component usage patterns and identify opportunities for CSS consolidation and design token optimization.

Responsive Design Analysis
Media query usage assessment with breakpoint optimization recommendations and mobile performance insights.

Quick Start

Analyze live website CSS usage:

houtini-lm:analyze_unused_css with:
- url: "https://example.com"
- analysisType: "performance"
- includeMediaQueries: true

Local CSS file analysis:

houtini-lm:analyze_unused_css with:
- cssPath: "C:/project/styles/main.css"
- htmlPath: "C:/project/index.html"
- ignorePseudoSelectors: false

Analysis Output

Usage Statistics

  • CSS Utilization Percentage: Overall percentage of CSS actually used on analyzed pages
  • Selector Usage Breakdown: Used vs unused selectors with specificity analysis
  • File Size Impact: Potential savings in KB/MB with unused rule removal

Unused CSS Detection

  • Unused Selectors: Complete list of selectors with no matching HTML elements
  • Unused Rules: CSS rules and properties that can be safely removed
  • Dead Code Analysis: Orphaned CSS classes and IDs with line number references

Performance Recommendations

  • Critical CSS Identification: Above-the-fold styles for performance optimization
  • Loading Strategy: CSS splitting recommendations for improved rendering performance
  • Media Query Optimization: Responsive breakpoint usage analysis and consolidation opportunities

Analysis Example

CSS File Analysis

/* styles.css - 150KB total */
.header { background: blue; }           /* Used */
.old-navbar { display: flex; }          /* Unused */
.legacy-button { padding: 10px; }       /* Unused */
.footer { margin-top: 20px; }           /* Used */

@media (max-width: 768px) {
  .mobile-hidden { display: none; }     /* Unused */
  .responsive-text { font-size: 14px; } /* Used */
}

Analysis Results

  • CSS Utilization: 60% (90KB used, 60KB unused)
  • Unused Selectors: .old-navbar, .legacy-button, .mobile-hidden
  • Potential Savings: 60KB (40% reduction) with safe removal
  • Performance Impact: Estimated 200ms faster initial page load

Parameters

ParameterTypeDescriptionExample
urlstringWebsite URL for live analysis“https://example.com”
cssPathstringPath to CSS file for analysis“C:/project/style.css”
htmlPathstringHTML file to check CSS usage against“C:/project/index.html”
projectPathstringProject directory for comprehensive analysis“C:/my-website”
analysisTypeenumFocus area for analysis“performance” | “usage” | “comprehensive”
includeMediaQueriesbooleanInclude responsive CSS analysistrue
ignorePseudoSelectorsbooleanIgnore pseudo-selectors like :hoverfalse

Analysis Type Configuration

  • performance: Focus on bundle size reduction and loading optimization
  • usage: Detailed selector usage analysis with removal recommendations
  • comprehensive: Complete analysis including performance, usage, and optimization strategies

Advanced Configuration

Multi-Page Website Analysis: For comprehensive site-wide CSS optimization, analyze multiple pages to understand global usage patterns.

// Homepage analysis
houtini-lm:analyze_unused_css with:
- url: "https://example.com"
- analysisType: "comprehensive"

// Product page analysis
houtini-lm:analyze_unused_css with:
- url: "https://example.com/products"
- analysisType: "usage"

Development Workflow Integration:

  1. Run analyze_unused_css on production URLs
  2. Identify high-confidence unused selectors
  3. Create backup branch before CSS cleanup
  4. Remove unused CSS and test across devices
  5. Measure performance improvements

Pro Tips

Pseudo-Selector Handling: Set ignorePseudoSelectors to false for comprehensive analysis, but review :hover and :focus states manually to ensure user interaction styles aren’t removed.

Media Query Optimization: Use includeMediaQueries for responsive analysis, then consolidate similar breakpoints and remove unused responsive styles.

Progressive Cleanup: Start with highest-confidence unused selectors, then gradually work through medium-confidence recommendations after thorough testing.

Related Functions

  • find_unused_files – Complete file-level cleanup including unused CSS files
  • analyze_project_structure – Project organization analysis including CSS architecture
  • generate_responsive_component – Create optimized components with efficient CSS
  • count_files – Project overview including CSS file organization