Opinionated reset stylesheet that provides a clean slate for styling your html.
MIT License
Opinionated reset stylesheet that provides a clean slate for styling your html.
$ npm install --save destyle.css
Include destyle.css
in the head
of your HTML file before your main stylesheet.
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.
/* app.css */
html {
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
).
.type h1 {
/* styles */
}
.type h2 {
/* styles */
}
<div class="type">{{ generated_markup_goes_here }}</div>
border-box
for *
, ::before
and ::after
.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.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.img
, iframe
and svg
use vertical-align: bottom
to prevent alignment issues.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).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.
/* 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;
}
<!-- article.html -->
<h1 class="main-title">Large title</h1>
<!-- profile.html -->
<h1 class="secondary-title">Small title</h1>
<!-- Looks the same as `h1.secondary-title` -->
<p class="secondary-title">Other small title</p>
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 <a href="#">
even with role="button"
is not recomended 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.
/* Make anything look like a link, even a <button> */
.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%;
}
<!-- Make it look like a link -->
<button class="link">Interactive link</button>
<!-- Make anchor look like a button -->
<a href="page.html" class="btn">Link that looks like a button</a>
<!-- Use as block level element -->
<button class="block">
<img src="..." alt="..." />
</button>
min-width: 0
to allow proper text wrappig in flex containers.appearance: none
to checkboxes and radio buttons.input[type="number"]
border-collapse: collapse
to tables.outline
for focusable elementsline-height: inherit
rule from headings resettext-decoration
rule from abbr
svg
selector to replaced content ruletext-transform: inherit
rule to form elements[disabled]
selector with :disabled
::-moz-focus-inner
rules for old Firefox versions:-moz-focusring
style, no more dotted outlineselect:disabled
in Chrome[contenteditable]
elementstable
borders in Chromeborder-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.Eric Meyer's 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 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.
This project is heavily inspired by normalize.css and the original reset by Eric Meyer. The source of the test page is from html5-test-page with some additions.
Tested with: