mirror_css/destyle
1
0
Fork 0
mirror of https://github.com/nicolas-cusan/destyle.css.git synced 2025-08-30 08:20:18 +02:00
Code Issues Releases Wiki Activity

Update readme

Browse Source
This commit is contained in:
Nicolas Cusan
2021-09-06 16:02:44 +02:00
committed by Nicolas Cusan
parent ee119971f3
commit d02cf323e8
1 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
Readme.md
View File

@@ -4,21 +4,17 @@
Opinionated [reset stylesheet](https://cssreset.com/what-is-a-css-reset/) that provides a clean slate for styling your html. 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) - Ensures consistency across browsers as much as possible
- Removes spacing (margin & padding) and resets font-size and line-height - Prevents the necessity of reseting user agent styles
- Sets some sensible defaults (see [rules](#rules))
- Prevents the necessity of reseting (most) user agent styles
- Prevents style inspector bloat by only targeting what is necessary - 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 - 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, ... - Sets sensible default styles (see [rules](#rules))
- Well suited for utility class libraries and large codebases
## Why? - Supports modern browsers, therefor is small in size (~0.95kb, minified gzipped)
[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).
## Installation ## 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. - `textarea` maintains its default height.
- `meter` and `progress` elements are not reset. - `meter` and `progress` elements are not reset.
- Replaced content like `img`, `iframe` and `svg` use `vertical-align: bottom` to prevent alignment issues. - 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 ## 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. 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 ## Changelog
- **v3.0.0.** 2021-0903 - **v3.0.0.** 2021-09-03
- Remove IE support 🎉 - Remove IE support 🎉
- Bring back `outline` for focusable elements - Bring back `outline` for focusable elements
- Remove redundant `line-height: inherit` rule from headings reset - Remove redundant `line-height: inherit` rule from headings reset
@@ -200,3 +203,5 @@ Tested with:
[license-url]: LICENSE [license-url]: LICENSE
[npm-image]: https://img.shields.io/npm/v/destyle.css.svg?style=flat-square [npm-image]: https://img.shields.io/npm/v/destyle.css.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/destyle.css [npm-url]: https://www.npmjs.com/package/destyle.css
<!-- Outline -->