The CSS Specificity Auditor is a developer tool designed to demystify the CSS cascade, reduce technical debt, and prevent style conflicts. Based on user research, the MVP focuses on automated specificity calculation, conflict visualization, and enforcement of best practices (like banning `!important`). The product will be delivered primarily as a CLI tool for integration into CI/CD pipelines (for Marcus and Sarah) with a companion web viewer for visual debugging (for Elena).
Scans CSS files to calculate the specificity score of every selector. Generates a report highlighting selectors with high scores (>0.3) and potential conflicts.
A simple web interface or CLI output that maps 'Cascade Wars', showing exactly which selector wins, why it wins, and the specific score difference.
Flags usage of `!important` and deeply nested selectors as high-risk warnings. Provides immediate feedback to prevent accidental overrides.
Allows the tool to be run via npm/yarn scripts or GitHub Actions. Fails builds if high-risk specificity rules are introduced.
Analyzes the impact of changing a class name or structure, warning developers if it will inadvertently override styles in other parts of the codebase.
AI-driven suggestions to rewrite high-specificity selectors into BEM or CSS Modules patterns.
Specifically checks if component styles are overriding global utility classes or vice versa.
A browser extension that overlays specificity scores directly in the DevTools panel while Elena works.
Automatically proposes CSS overrides that resolve conflicts without using `!important`.
A shared dashboard where Marcus can assign 'Cascade Debt' tickets to developers, and Sarah can track theme consistency across the team.
Direct integration into VS Code to show warnings as developers type, preventing the 'Cascade Mystery' before code is even saved.