Home

Awesome

<p align="center"> <img src="https://raw.githubusercontent.com/kripod/css-homogenizer/main/assets/logo.svg" alt="css-homogenizer logo" width="524" height="96"> </p> <p align="center"> Base CSS endorsing semantic HTML and design token usage </p> <p align="center"> <a href="https://www.npmjs.com/package/css-homogenizer"><img src="https://img.shields.io/npm/v/css-homogenizer" alt="npm version"></a> </p>

Backstory

Browsing through the issues of CSS Remedy, I came across an important observation by Jen Simmons:

Why don’t people use <fieldset> far more — instead of divs in their forms?

Perhaps it’s because fieldset comes with ugly default styling.

This made me question common HTML rendering suggestions. Each design is different, so there isn’t a single set of sensible defaults for every website.

Style normalization is crucial for a consistent user experience among browsers. With the emergence of various design systems, however, CSS normalizers and resets should coexist and complement each other.

Catering to the needs of token-based theming systems, this project was born.

Usage

  1. Install the library and a normalizer with your package manager (or use a CDN):

    npm install css-homogenizer modern-normalize
    

    Using either modern-normalize or @csstools/normalize.css is optional but recommended to fix common browser inconsistencies.

  2. Include the following styles in the order below, before any custom CSS:

    import "modern-normalize/modern-normalize.css";
    import "css-homogenizer/reset.css"; // or "css-homogenizer/reset-scoped.css"
    import "css-homogenizer/base.css";
    

    You may adopt each stylesheet one by one.

    Please refer to your framework’s guidelines for importing CSS files at the top level. Plain <link> tags may also be used, but be aware of the performance costs.

What’s included?

reset.css

Nullifies spacings, borders and several typography-related settings.

Obsolete and deprecated HTML elements are ignored, as their usage is strongly discouraged.

reset-scoped.css

A scoped variant of the reset, targeting classes instead of element types.

Usage with React

When using a compiler like Babel, the underlying JSX runtime may be overridden. This allows for auto-injecting scoped reset classes to plain HTML elements on the fly:

// babel.config.json
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic",
        "importSource": "css-homogenizer/reset-scoped/react",
      },
    ],
  ],
}

Usage manually

You may attach a scoped reset class to an element on your own, e.g.:

<p class="_p">Hi</p>

To see all the classes available, execute the following snippet:

import { getResetClassName, resetElements } from "css-homogenizer/reset-scoped";

console.log(resetElements.map((element) => getResetClassName(element)));

Helper methods also come in handy when dealing with third-party libraries, e.g.:

import { Listbox } from "@headlessui/react";
import { getResetClassName } from "css-homogenizer/reset-scoped";

function Select(/* … */) {
  return (
    <Listbox /* … */>
      <Listbox.Button className={getResetClassName("button")}>
        {/* … */}
      </Listbox.Button>
      {/* … */}
    </Listbox>
  );
}

base.css

Provides a minimalistic set of generally useful rules. Please refer to the file’s inline comments for further details.

Browser support

Acknowledgments

This project was mainly inspired by Reset CSS, CSS Remedy and sanitize.css. It wouldn’t have been possible without the long-standing efforts of the authors behind those predecessors.

The logo’s test tube emoji is courtesy of Twemoji and the font in use is Lobster.