diff --git a/Readme.md b/Readme.md index 88b0922..e7e0625 100644 --- a/Readme.md +++ b/Readme.md @@ -31,28 +31,30 @@ Include `destyle.css` in the `head` of your HTML file before your main styleshee ### 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 /* app.css */ -body { +html { color: #333; 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. If you need to create styles for tags generated by a CMS or markdown wrap them in a class (e.g. `.type`). ```css .type h1 { - \* styles *\ + /* styles */ } .type h2 { - \* styles *\ + /* styles */ } ``` @@ -160,14 +162,6 @@ 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-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 - **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 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.