The Modern CSS Reset 🚀

🤓 Benefits

• No need to start from scratch. reseter.css doesn't remove all the browser styles, but instead redefines the useful ones
• Never find yourself fixing browser issues. Includes browser fixes for a wide range of browsers.
• No need debugging load time for reseter.css. It's sized ~0.8kb (Brotli-compressed dist/index.min.css). Moreover, we are consistently trying to reduce it.
• Get all the benefits of normalize.css. It includes all normalizations!
• Get a better box sizing for a better experience. box-sizing: border-box set
• Completely production ready code with browser support testing and source build ci

❓ Why do I use a css reset

There are many inconsistencies between browsers. Like Firefox 3 has a margin on top of paragraphs but Internet Explorer 7 doesn't have any margin. There are thousands of browsers with hundreds of versions. Each version at least has 500+ inconsistencies with different browsers' different versions. How to keep up? This is an easy to use solution called reseter.css

🆚 There are other resets, why reseter.css?

Feature	reseter.css	Normalize.css	Sanitize.css	Reset.css
Normalizations	✅	✅	✅	❌
Basic elemental styles	✅	Partial	✅	❌
Size (by bundle phobia)
Minified version		❌ (Minify yourself)	❌(Minify yourself)	❌(Minify yourself)
Box sizing	✅	❌	✅	❌
Browser support	Browsers with >3% global usage	Last 3 versions	Last 3 versions	Unknown

🚀 Get It Running Quick

1. Create A HTML File

   <!DOCTYPE html>
   <html>
     <head>
       <title>reseter.css Quick Start</title>
     </head>
     <body>
       <h1>reseter.css Quick Start</h1>
       <p>
         Hey fella! Don't forget to change the title text an remove this
         paragraph and the heading
       </p>
     </body>
   </html>

2. Call reseter.css

   <!-- To be placed in the head tag -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />

3. Star this repository, if you like the project! It means a lot to the development team, Those stars a boosting happiness for our team

4. How about reading a guide for best performance? Here's the link to optimizing reseter.css for production

5. Lastly you can view our GitHub Discussions for best practices and performance guides

6. 🥳 All Set Now

🌟 Installation

There are various ways to install reseter.css. Like package managers, content delivery networks, local copies...

📦 Package Managers

💝 NPM

npm install reseter.css

🐱Yarn

yarn add reseter.css

⚡ CDN

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

✨ Usage

reseter.css as said, is a zero-dependency project and excels in integrating with all kinds of usage options! These are a few easy guides for people to start

<head>
  <link rel="stylesheet" type="text/css" href="path/to/css/reseter.min.css" />
  <link
    rel="stylesheet"
    type="text/css"
    href="path/to/your-custom-stylesheet.css"
  />
</head>

Warning

Make Sure To Link Your Custom Stylesheet After reseter.css Else Your Custom Styles Might Not Be Implemented

Framework usage

• Django
• ReactJs
• VueJs
• Next.js
• Styled Components

🐍 Django

1. Download reseter.css into the static directory

2. Find your template file

3. Call reseter.css with a link tag

   <link rel="stylesheet" href="{{ STATIC_URL }}/path/to/reseter.css" />

⚛ ReactJs

1. Install reseter.css

   npm i reseter.css

2. Import in your main file

   import "reseter.css";

✌ VueJs

1. Install reseter.css

   npm i reseter.css

2. Import in your main file

   import "reseter.css";

⏭ Next.js

1. Install reseter.css

   npm i reseter.css

2. Import in your _App.js file

   import "reseter.css";

💅 Styled Components

1. Install reseter.css

   npm i reseter.css

2. Create a global style

   import { createGlobalStyle } from "styled-components";
   import resetercss from "node_modules/reseter.css/src/styled-components/js/reseter.js";
   
   export const GlobalStyle = createGlobalStyle`
   ${resetercss}
   
   // You can continue writing global styles here if you want.
   `;

🚅 Optimize

Note

These guidelines are for static sites. For frameworks, see Framework usage above.

• Never import reseter.css via css, though this a option, it is not recommended for website loading, rather use html link tags

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

• Use this easy loading trick to make your life a lot easier

  <link
    rel="preload"
    as="style"
    href="https://cdn.jsdelivr.net/npm/reseter.css"
    onload="this.rel='stylesheet';this.onload=null"
  />
  
  <noscript>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />
  </noscript>

• Purging CSS — drop unused rules with a tool like PurgeCSS if you only need a subset of the reset in production.

• Minification — release builds ship minified (dist/index.min.css).

❤️ Thanks to our supporters