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.
## 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
<!-- Outline -->