Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/nicolas-cusan/destyle.css

Opinionated reset stylesheet that provides a clean slate for styling your html.
https://github.com/nicolas-cusan/destyle.css

css destyle destyle-css normalize-css reset reset-css stylesheets

Last synced: 23 days ago
JSON representation

Opinionated reset stylesheet that provides a clean slate for styling your html.

Lists

README 

        
# 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



Large title



Small title



Other small title


```



### Buttons



`button` tags have a lot of default styles that can make them cumbersome to use from a styling perspective, especially if they should look like plain links or need to wrap some other content, but `button` tags are the recommended elements to use as click targets for user interactions. Falling back to using `` even with `role="button"` is [not recomended](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) from an accessibility standpoint as screen readers will recognize `button`s as interactive elements by default and treat them accordingly. `a` should be used when there is the need to link to a page via `href`.



destyle.css resets buttons completely to make them usable as any other element * see note [below](#caveats).



```css

/* Make anything look like a link, even a  */

.link {

  color: lightblue;

  text-decoration: underline;

}



/* Make anything look like a button

 * font styles will be inheritet from the parent */

.btn {

  padding: 0.2em 0.5em;

  border-radius: 0.2em;

  background-color: blue;

  color: white;

  text-align: center;

}



.block {

  display: block;

  width: 100%;

}

```



```html



Interactive link



Link that looks like a button



  ...



```



## Changelog



### **v4.0.1.** 2024-01-21



- Add `min-width: 0` to allow proper text wrappig in flex containers.



### **v4.0.0.** 2022-11-07



- Add `appearance: none` to checkboxes and radio buttons.

- Fix issue in Firefox for `input[type="number"]`



### **v3.0.2.** 2021-12-07



- Add `border-collapse: collapse` to tables.



### **v3.0.0.** 2021-09-03



- Remove IE support 🎉

- Bring back `outline` for focusable elements

- Remove redundant `line-height: inherit` rule from headings reset

- Remove redundant `text-decoration` rule from `abbr`

- Added `svg` selector to replaced content rule

- Added `text-transform: inherit` rule to form elements

- Replaced `[disabled]` selector with `:disabled`

- Removed `::-moz-focus-inner` rules for old Firefox versions

- Improved `:-moz-focusring` style, no more dotted outline

- Destyled `select:disabled` in Chrome

- Add outline to focused `[contenteditable]` elements

- 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.



Tested with:





  browserstack




[license-image]: https://img.shields.io/npm/l/destyle.css.svg?style=flat-square

[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