sanitize.css - A CSS reset developed alongside normalize.css

sanitize.css is a CSS reset library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults.

It is developed alongside and maintained in sync with normalize.css, which means every normalization is included, and every normalization and opinion are clearly marked and documented.

It corrects browser bugs while carefully testing and documenting changes. Its styles adhere to common developer expectations and preferences and has following features:

  • Box sizing defaults to border-box
  • Backgrounds do not repeat by default
  • Pseudo-elements inherit text decoration and vertical alignment
  • Cursors only change to hint non-obvious interfaces
  • Text has a comfortable line height in all browsers
  • Tabs appear the same on the web as in a typical editor
  • Words break to prevent overflow
  • Documents do not use a margin for outer padding
  • Navigation lists do not include a marker style
  • And many more features

Beside core sanitize.css stylesheet, there are also additional separate following stylesheets:

  • typography.css: normalizes typography using system interface fonts
  • forms.css: normalizes form controls without side effects
  • assets.css: applies a comfortable measure to plain documents
  • reduce-motion.css: restricts motion when the user has requested this at system level
  • page.css: applies a comfortable measure to plain documents
  • evergreen.css: exclusively support evergreen browsers

To get started just install sanitize.css npm package:

npm install sanitize.css --save

and then import needed stylesheets:

@import '~sanitize.css';
@import '~sanitize.css/forms.css';
@import '~sanitize.css/typography.css';