A CSS library providing consistent cross-browser default styling with useful defaults and zero-specificity selectors.
sanitize.css is a CSS library that provides consistent, cross-browser default styling for HTML elements alongside useful developer-friendly defaults. It builds upon normalize.css by adding opinionated improvements and wrapping all styles in zero-specificity selectors using `:where()` to prevent specificity conflicts. The library includes modular components for forms, typography, assets, and reduced motion preferences.
Frontend developers and web designers who need a reliable CSS foundation that normalizes browser inconsistencies while providing sensible defaults for modern web projects.
Developers choose sanitize.css because it combines the reliability of normalize.css with practical developer preferences, uses zero-specificity selectors to prevent style conflicts, and offers modular components for specific needs like forms and typography normalization.
A best-practices CSS foundation
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Uses :where() to wrap all styles, keeping specificity at zero and preventing conflicts with custom CSS, as highlighted in the README's usage section.
Builds directly on normalize.css to fix inconsistencies and bugs across all major browsers, ensuring a consistent starting point for development.
Offers separate stylesheets for forms, typography, assets, and reduced motion, allowing developers to include only what they need, as shown in the modular components section.
Includes ARIA role cursor hints and a reduce-motion stylesheet that respects user preferences, enhancing accessibility out of the box, documented in the features.
The reliance on :where() selectors means styles may not apply correctly in browsers like IE9 and 10, despite the README claiming IE9+ support, as :where() is unsupported there.
To use features like forms and typography normalization, developers must import multiple CSS files, complicating setup and potentially increasing HTTP requests if not bundled.
The forms.css module applies specific borders and padding to form controls, which can clash with custom designs and require extra CSS overrides, as seen in the forms features.