Inspect CSS for specificity, duplicate declaration blocks, repeated colors, unit usage, custom properties, important declarations, selector depth, and maintainability concerns.
Inspect CSS for specificity, duplicate declaration blocks, repeated colors, unit usage, custom properties, important declarations, selector depth, and maintainability concerns.
Processing is performed locally. Advanced language edge cases may require a full standards-based parser or project-specific toolchain.
Input:
.title { color: #8b5cf6; margin: 16px; }
.heading { color: #8b5cf6; margin: 16px; }
#app .nav ul li a.active { color: #8b5cf6 !important; }Output: Run the included example to see a real result generated by this tool.The inspector normalizes declaration blocks and groups selectors that use identical property-value sets.
Specificity is estimated as ID, class-like, and element-like counts for each selector.
The color report counts repeated HEX, RGB, and HSL tokens and highlights candidates for variables.
The report combines rule count, selector depth, specificity, important usage, and duplication into a relative score.
Repeated color and spacing values are reported as potential custom-property candidates.
| Module | Purpose |
|---|---|
| Structure | Protect strings and comments before scanning. |
| Processing | Apply the selected conversion, parser, validator, viewer, inspector, checker, or generator logic. |
| Reporting | Return output, status, measured size, lines, and practical notes. |