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

Update Readme

Browse Source
This commit is contained in:
Nicolas Cusan
2021-09-06 16:24:09 +02:00
committed by Nicolas Cusan
parent 067c52cdaa
commit 150e8852a2
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Readme.md
View File

@@ -31,28 +31,30 @@ Include `destyle.css` in the `head` of your HTML file before your main styleshee
### Recommended ### Recommended
Add your base font and color styles to the `body` element in your stylesheet, all other elements will inherit the style from the body. Add your base font and color styles to the `html` or `body` element in your stylesheet, all other elements will inherit the style from the body.
```css ```css
/* app.css */ /* app.css */
body { html {
color: #333; color: #333;
font: 16px/1.4 "Helvetica Neue", sans-serif; font: 16px/1.4 "Helvetica Neue", sans-serif;
} }
``` ```
### Styling generated content
It is discouraged to define styles for raw html tags apart from `body` and `html`, use classes (or any other selectors / system) for styling. It is discouraged to define styles for raw html tags apart from `body` and `html`, use classes (or any other selectors / system) for styling.
If you need to create styles for tags generated by a CMS or markdown wrap them in a class (e.g. `.type`). If you need to create styles for tags generated by a CMS or markdown wrap them in a class (e.g. `.type`).
```css ```css
.type h1 { .type h1 {
\* styles *\ /* styles */
} }
.type h2 { .type h2 {
\* styles *\ /* styles */
} }
``` ```
@@ -160,14 +162,6 @@ destyle.css resets buttons completely to make them usable as any other element <
</button> </button>
``` ```
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-09-03 - **v3.0.0.** 2021-09-03
@@ -185,6 +179,12 @@ Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.h
- Fixed border color inheritance for `table` borders in Chrome - Fixed border color inheritance for `table` borders in Chrome
- **v2.0.0.** 2020-10-15 - Add `border-style: solid` and `border-width: 0` to `*, ::before, ::after` selector. This change might affect how borders are used and therefor is considered a breaking change. The benefit is that simply adding a border-width to an element will display a border without the need to set the border-style explicitly. - **v2.0.0.** 2020-10-15 - Add `border-style: solid` and `border-width: 0` to `*, ::before, ::after` selector. This change might affect how borders are used and therefor is considered a breaking change. The benefit is that simply adding a border-width to an element will display a border without the need to set the border-style explicitly.
## 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).
## Credits ## Credits
This project is heavily inspired by [normalize.css](https://github.com/necolas/normalize.css) and the original [reset](https://meyerweb.com/eric/tools/css/reset/) by Eric Meyer. The source of the test page is from [html5-test-page](https://github.com/cbracco/html5-test-page) with some additions. This project is heavily inspired by [normalize.css](https://github.com/necolas/normalize.css) and the original [reset](https://meyerweb.com/eric/tools/css/reset/) by Eric Meyer. The source of the test page is from [html5-test-page](https://github.com/cbracco/html5-test-page) with some additions.