A CSS audit examines the amount of CSS, how it is used and selector specificity. “Unused” means a rule was not used in the state that was tested. It may still be needed when a menu opens or the viewport changes.
Choose the pages and interactions to test
Select pages that represent different styling patterns, such as a shared header, a product list and an input form. Include opening menus, displaying validation errors and switching tabs. Use the same viewport widths and interactions before and after a change.
Use Milten CSS Scanner to inspect a public page. Record the stylesheet and each finding. List any states the scan does not cover for manual testing.
Do not remove CSS based on the unused percentage alone
Consider an illustrative example: a menu is closed when the page loads. Its styles may be unused initially but required when it opens. Test the interaction before deciding that a rule is unnecessary.
The Chrome DevTools Coverage documentation explains how to record CSS and JavaScript usage while interacting with a page. A rule unused during one recording is not necessarily unnecessary across the site.
For each removal candidate, find the source file or build step that produces it. Change the source, rebuild and verify the result rather than editing a minified output file directly.
Check duplicates and selector specificity
Repeated declarations do not always apply under the same conditions. Check media queries, interaction states and cascade order. After merging rules, verify that the same elements still receive the intended styles.
Another illustrative example is repeatedly adding !important to change a button's colour. First inspect the conflicting rules and their specificity. Use MDN's specificity guide to express the intended priorities in the source.
Check appearance and behaviour after publishing
Scan the URL again after the change. Check buttons, forms and menus as well as file size. Test text wrapping and visible focus indicators on mobile devices and larger screens.
Use Design Tokens to examine shared colour and spacing values. If a display issue involves markup, follow the HTML checking guide.
Does removing unused CSS always make a page faster?
Loading order, resource transfers and JavaScript also affect speed. Use Speed Scanner under comparable conditions to find out what changed.
Is automated analysis enough?
You also need to test relevant interactions and viewport widths. Record the automated scan's scope separately from the states checked manually.
Analyse a public page's CSS. Save the original conditions and findings before making changes.