# 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.
## Benefits
- 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
- Sets sensible default styles (see [rules](#rules))
- Well suited for utility class libraries and large codebases
- Made for modern browsers only, therefor small in size (~0.95kb)
## Installation
```shell
$ npm install --save destyle.css
```
- Download: https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css
- CDN: https://classic.yarnpkg.com/en/package/destyle.css
## 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 `html` or `body` element in your stylesheet, all other elements will inherit the style from the body.
```css
/* app.css */
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 */
}
.type h2 {
/* styles */
}
```
```html
{{ generated_markup_goes_here }}
```
## Rules
- The box model is set to `border-box` for `*`, `::before` and `::after`.
- The `border-style` is set to `solid` for `*`, `::before` and `::after` and the `border-width` is set to 0 (to hide the borders).
- `code`, `pre`, `kbd`, `samp` maintain a monospaced font-family.
- `hr` is set to be a solid 1px line using `border-top` that inherits its color from its parent's `color` property.
- Inline elements that carry style (`b`, `i`, `strong`, etc.) are not reset.
- `canvas` and `iframe` maintain their default width and height (varies depending on the browser).
- `button`, `select`, `textarea` and `input` are reset using `appearance: none`.
- `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
- `range` & `color` inputs are affected by `appearance: none` but are not completely destyled (varies depending on the browser).
- `button` elements that have a fixed `height` will center its content vertically (can not be reset).
## 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