css-homogenizer

css-homogenizer copied to clipboard

Base CSS encouraging proper HTML semantics and the use of custom design tokens

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 for 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 modern-normalize is optional but recommended to fix common browser inconsistencies.

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

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

   Embed the snippet or parts of it according to your framework/workflow documentation.

   Plain <link> tags may also be used, but make sure to review performance guidelines carefully.

What's included?

reset.css

Nullifies spacings, borders and several typography-related settings:

• The default line height is reduced to match each element's own font size.
• Heading (h1–h6), th and address elements inherit their font properties and text alignment from parents.
• Lists (ul, ol, menu) are unstyled to promote proper HTML semantics over misleading visuals.

Form element styles are kept intact, maintaining the native look on each platform. Obsolete and deprecated HTML elements are ignored, as their usage is strongly discouraged.

opinionated-base.css

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

Browser support

• Latest Chrome
• Latest Firefox
• Latest Safari

Contributors

Thanks goes to these wonderful people (emoji key):

Kristóf Poduszló 🚧 💻 📖 🤔 🚇

Acknowledgements

This project was primarily inspired by Reset CSS, sanitize.css and CSS Remedy. 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.