# destyle.css
[![npm][npm-image]][npm-url] [![license][license-image]][license-url]
Opinionated [reset stylesheet](https://cssreset.com/what-is-a-css-reset/) that provides a clean slate for styling your html.
## What it does
- 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
- Prevents style inspector bloat by only targeting what is necessary
- 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).
## Installation
```shell
$ npm install --save destyle.css
```
Download: https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css
## Browser support
- Chrome
- Edge
- Firefox ESR+
- Internet Explorer 10+
- Safari 8+
- Opera
## Usage
Include `destyle.css` in the `head` of your HTML file before your main stylesheet.
### 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.
```css
/* app.css */
body {
color: #333;
font: 16px/1.4 "Helvetica Neue", sans-serif;
}
```
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 *\
}
.type h2 {
\* styles *\
}
```
```html
{{ generatedMarkup }}
```
## Examples
### Headings
An `h1` might need to be bold & large in some context (e.g. at the top of a text page) but might be small and inconspicuous in others (e.g. on a settings page in an app).
Creating two different styles for `h1` is made easy, only the properties for the respective desired visual results have to be applied, there is no need to overwrite default styles, all while maintaining semantics.
```css
/* No reseting of the user agent styles necessary,
* just take care of making things look how you want to. */
/* Bold, large title */
.main-title {
font-size: 3em;
margin-bottom: 20px;
font-weight: bold;
}
/* Just some padding and gray color, otheriwse looks like normal text */
.secondary-title {
color: gray;
padding: 10px;
}
```
```html