diff --git a/Readme.md b/Readme.md index 125be99..c5993f9 100644 --- a/Readme.md +++ b/Readme.md @@ -4,21 +4,17 @@ Opinionated [reset stylesheet](https://cssreset.com/what-is-a-css-reset/) that provides a clean slate for styling your html. -## What it does +## Benefits -- Ensures consistency across browsers (thanks normalize.css) -- Removes spacing (margin & padding) and resets font-size and line-height -- Sets some sensible defaults (see [rules](#rules)) -- Prevents the necessity of reseting (most) user agent styles +- Ensures consistency across browsers as much as possible +- Prevents the necessity of reseting user agent styles - Prevents style inspector bloat by only targeting what is necessary +- Removes margins & paddings +- Removes default font styles and ensures proper inheritance - Contributes to the separation of presentation and semantics -- Works well with all kind of styling approaches, atomic libraries like [tachyons](https://tachyons.io/), component based styling like css-in-js in [React](https://reactjs.org), good 'ol css, ... - -## Why? - -[Eric Meyer's reset](https://meyerweb.com/eric/tools/css/reset/) resets properties on elements that do not need it, are unused or even deprecated, this creates bloat in the browser's style inspector which makes developing and debugging less efficient. [Normalize.css](https://github.com/necolas/normalize.css) makes elements look consistent across browsers and it does it well, but it does not remove the user agent's assumptions about how things look. Destyle.css targets both reseting & normalization. - -Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.html). +- Sets sensible default styles (see [rules](#rules)) +- Well suited for utility class libraries and large codebases +- Supports modern browsers, therefor is small in size (~0.95kb, minified gzipped) ## Installation @@ -79,6 +75,7 @@ If you need to create styles for tags generated by a CMS or markdown wrap them i - `textarea` maintains its default height. - `meter` and `progress` elements are not reset. - Replaced content like `img`, `iframe` and `svg` use `vertical-align: bottom` to prevent alignment issues. +- Focusable elements retain a focus outline, style depends on browser. ## Caveats @@ -169,9 +166,15 @@ destyle.css resets buttons completely to make them usable as any other element < How to create the styles is up to the author, it can be by creating classes, compose style using functional classes, styling inside a react component, etc. In any case the author always gets a clean slate for styling each element and it is up to him/her to reuse the styles or start from scratch for every instance. +## Why? + +[Eric Meyer's reset](https://meyerweb.com/eric/tools/css/reset/) resets properties on elements that do not need it, are unused or even deprecated, this creates bloat in the browser's style inspector which makes developing and debugging less efficient. [Normalize.css](https://github.com/necolas/normalize.css) makes elements look consistent across browsers and it does it well, but it does not remove the user agent's assumptions about how things look. Destyle.css targets both reseting & normalization. + +Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.html). + ## Changelog -- **v3.0.0.** 2021-0903 +- **v3.0.0.** 2021-09-03 - Remove IE support 🎉 - Bring back `outline` for focusable elements - Remove redundant `line-height: inherit` rule from headings reset @@ -200,3 +203,5 @@ Tested with: [license-url]: LICENSE [npm-image]: https://img.shields.io/npm/v/destyle.css.svg?style=flat-square [npm-url]: https://www.npmjs.com/package/destyle.css + +