Lightweight CSS Reset & Normalizer – reseter.css

reseter.css is a CSS reset and normalizer that reduces default styling differences between browsers.

It includes a full stylesheet for typography, forms, links, and dialogs, plus a mini reset for projects that already style these elements.

Features

• Universal border-box sizing with reset margins and padding.
• Browser-style heading sizes and readable list indentation.
• Logical properties for spacing and element dimensions.
• Responsive sizing for images, video, canvas, and SVG elements.
• Reset declarations inside @layer reset for predictable overrides.

How to use it:

1. Load reseter.css from a CDN

Load the latest full reset before your site stylesheet on a regular HTML page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.css">
<link rel="stylesheet" href="/css/style.css">

2. Install with npm or pnpm

For projects using a bundler, install the CSS package and import it before your application styles.

# npm
npm install reseter.css
# pnpm
pnpm add reseter.css

import "reseter.css";
import "./style.css";

3. Use the mini reset

The mini build is useful when your project already styles typography, forms, links, and dialogs. It retains box sizing, heading sizes, list indentation, and responsive media defaults. Choose one build per page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css/dist/mini.min.css">
<link rel="stylesheet" href="/css/style.css">

In a bundler-based project, import the mini build directly:

import "reseter.css/mini";

4. Use a local CSS file

For a site that loads local CSS, download reseter.css and copy index.min.css or mini.min.css into your CSS directory. Unminified index.css and mini.css files are available too.

<link rel="stylesheet" href="/css/index.min.css">
<link rel="stylesheet" href="/css/style.css">

5. Override the default CSS rules

Most reseter.css declarations belong to @layer reset. Normal, unlayered author rules override normal declarations in this layer regardless of selector specificity. Load your own CSS after the reset. Two visibility rules are unlayered: closed dialogs and elements with the hidden attribute. Show a dialog through its native API, and remove hidden when revealing a hidden element.

h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin-block: 0 1rem;
}
button {
  padding: 0.65rem 1rem;
}
input[type="text"] {
  border-color: #777;
  border-radius: 0.375rem;
}

Full vs. Mini Builds

The full build normalizes text, forms, media, and dialogs. The mini build retains box sizing, headings, lists, and media. Mini sets heading font weight to normal and line height to 1.5.

CSS Rules Reference

reseter.css applies fixed CSS defaults. It has no JavaScript initialization, public options, methods, events, or CSS theme variables.

Box Model, Typography, and Text

Forms and Lists

Media, Dialogs, Tables, and Visibility

Upgrading from Version 2.x

Version 3 changes the cascade and several default element styles. Check existing forms, headings, lists, images, and dialogs before deploying the new CSS. Sass-based source files have been replaced with plain CSS processed by Lightning CSS.

• @layer reset changes CSS cascade precedence. Normal declarations outside cascade layers override normal layered declarations.
• Logical properties such as margin-block and max-inline-size replace many physical-direction rules.
• text-size-adjust: none replaces the earlier mobile text-adjust behavior. Check text readability on narrow screens.
• Forms inherit typography. Text input borders no longer affect button, color, file, range, radio, and checkbox controls.
• Heading sizing and margins, list indentation, and responsive media defaults have changed.
• The previous Sass, SCSS, Less, and Stylus examples are obsolete for v3. Use the compiled CSS files or one of the published npm import entries.

FAQs

Q: Why are headings no longer bold when I use the mini build?
A: The mini build sets font-weight: normal on h1 through h6. Set heading weights in your stylesheet if you want bold headings. This rule is not part of the full build.

Q: Why doesn’t display: block reveal an element with the hidden attribute?
A: The full reset applies an unlayered [hidden]:not([hidden="until-found" i]) visibility rule. Remove the hidden attribute when the element should be shown. The hidden="until-found" state is excluded from that rule.

Q: Why is a closed <dialog> invisible even after I style it?
A: The full reset hides dialogs that lack the open attribute through an unlayered rule. Use the native show() or showModal() method to open the dialog rather than forcing its display through CSS.

Q: Can I use reseter.css with React, Vue, or Next.js?
A: Yes. For a bundler-based React or Vue project, import reseter.css before your application CSS. In Next.js App Router, import the stylesheet in app/layout.tsx, before ./globals.css.

Alternatives & Related Resources

• Small CSS Reset Library – modern-normalize
• Clean CSS Reset Library – destyle.css
• Modern CSS Reset Under 1KB for Clean Code – defaults.css
• The New CSS Reset
• 20+ Best CSS Reset Libraries for Modern Web Dev

Changelog:

v3.0.1 (10/10/2026)

• Trim the :root system font stack so dist/index.min.css is 951 B Brotli (was ~1008 B); set bundlewatch max to 1000B

v3.0.0 (10/09/2026)

• Introduced @layer reset, logical properties, and the updated Full/Mini builds.
• Updated fonts, form controls, heading spacing, lists, images, SVG, and dialog defaults.
• Switched the CSS build pipeline to Lightning CSS and replaced the old preprocessor sources.
• Published explicit dist/ entry points and current npm export mappings.

v2.1.0 (10/07/2026)

• Updated system font stack and package layout during the Gardevoir to reseter.css transition.
• Fixed line-height behavior and disabled-button cursor styling.

v2.0.0 (07/18/2021)

• Introduced opinionated and mini builds.
• Added normalization rules and reduced the size of the CSS.

v1.2.0 (06/25/2021)

• Updated documentation, build scripts, contributor fixes, and CI setup.

v1.1.4 (06/24/2021)

• Maintenance update.

v1.1.3 (05/01/2021)

• Fixed scrolling, word-break differences, and emoji styling.

v1.1.2 (04/13/2021)

• Fixed a margin regression and updated dependencies.

v1.1.1 (04/11/2021)

• Reduced CSS length, updated browser rules, and fixed normalization issues.

v1.1.0 (04/08/2021)

• Maintenance update.

v1.0.9 (04/07/2021)

• Bug fixes.

v1.0.8 (03/27/2021)

• Bug fixes.

v1.0.7 (02/28/2021)

• Fixes and code cleanup.