@acab/reset.css

reset.css

A style reset that embraces modern CSS features to give you a better base to start off with.

Features

• Designed for cascade layers while still using :where to keep a low specificity for unlayered setups.
• Auto dark mode using color-scheme.
• system-ui font pre-applied.
• Accessible, consistent focus outlines.
• .visually-hidden class baked in.

See the source code if you're curious about the full set of rules.

Usage

Install and import the package (requires a bundler):

npm install @acab/reset.css

/* in a CSS file or <style> tag */
@import '@acab/reset.css';

// or in a JS file
import '@acab/reset.css';

Or use it directly from a CDN:

@import 'https://unpkg.com/@acab/reset.css';

Cascade layers

It is recommended to import this reset into the very first layer.

Ideally, you should predefine your layers as the first thing in the first stylesheet.

@layer reset, page, overrides;

And then apply the first layer name while importing this reset.

@import '@acab/reset.css' layer(reset);

Visually hidden (aka SR only)

Every project needs "visually hidden" styles for screenreader-only text, so this reset has it built in.

It's available through the .visually-hidden class and all the declarations in it use !important so that they can't be overridden by a higher-priority layer.

When a visually-hidden element is focused or an element inside it is focused, then these styles will automatically be undone.

Focus outlines

By default, focus styles can be very inconsistent (and even inaccessible) across browsers. This reset normalizes them to a dual color outline that uses system colors which adopt with the color-scheme. Depending on the background within a particular section, you might want to set the color-scheme property to maintain enough color contrast.

To override the focus styles, you can specify your own outline (or just outline-color).

@layer globals {
  :focus-visible {
    outline-color: var(--my-brand);
  }
}

Acknowledgements

This project was inspired by some of the existing, popular CSS resets:

• Andy Bell's modern CSS reset
• Josh W Comeau's custom CSS reset
• Jen Simmons's CSS remedy