Modern CSS Reset

A modern, opinionated CSS reset that provides sensible defaults for any web project. It is designed to be imported directly into a CSS cascade layer.

Installation

npm install @elrond25/modern-css-reset

Usage

This package is designed to be imported directly into a cascade layer. This gives you full control over the cascade and ensures the reset styles have the lowest precedence.

In your main CSS file:

1. Import the reset into a reset layer at the very top.
2. Define your full layer order, making sure reset is the first layer.
3. Add your project styles to the subsequent layers.

/* main.css */

/* 1. Import the package directly into a named layer. */
@import '@elrond25/modern-css-reset' layer(reset);

/* 2. Define your project's full layer order. */
@layer reset, base, layouts, components, utilities;

/* 3. Add your styles to the appropriate layers. */
@layer base {
  body {
    font-family: system-ui, sans-serif;
    color: #222;
  }
}

@layer components {
  .button {
    padding: 0.5em 1em;
    background-color: dodgerblue;
    color: white;
    border: none;
    border-radius: 0.25em;
  }
}

This setup ensures that your component and utility styles will always override the reset styles without needing to increase selector specificity.

This reset is heavily inspired by the work of Josh Comeau.