DEV Community

loading...

A Modern CSS Reset

Andy Bell
Freelance web designer ➤ CSS stuff ➤ Curates http://piccalil.li ➤ Co-author of https://every-layout.dev ➤ Writing https://cssfromscratch.com ➤ Music I like: http://tracks.hankchizljaw.com
Originally published at hankchizljaw.com on ・5 min read

I think about and enjoy very boring CSS stuff—probably much more than I should do, to be honest. One thing that I’ve probably spent too much time thinking about over the years, is CSS resets.

In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days. That era was when resets such as normalize.css came about and saved us all heaps of hell. Those days are gone now and we can trust our browsers to behave more, so I think resets like that are probably mostly redundant.

A reset of sensible defaults

I still like to reset stuff, so I’ve been slowly and continually tinkering with a reset myself over the years in an obsessive code golf manner. I’ll explain what’s in there and why, but before I do that, here it is in its entirety:

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

Breaking it down

We start with box-sizing. I just flat out reset all elements and pseudo-elements to use box-sizing: border-box.

*,
*::before,
*::after {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Some people think that pseudo-elements should inherit box sizing, but I think that’s silly. If you want to use a different box-sizing value, set it explicitly—at least that’s what I do, anyway. I wrote about box-sizing more over on CSS From Scratch.

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

After box-sizing, I do a blanket reset of margin and padding, where it gets set by the browser styles. This is all pretty self-explanatory, so I won’t get into it too much.

I will mention the situation with lists, though. I select only lists that do have a class attribute because if a plain ol’ <ul> or <ol> gets used, I want it to look like a list. A lot of resets, including my previous ones, aggressively remove that.

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
Enter fullscreen mode Exit fullscreen mode

Next up: body styles. I keep this really simple. It’s useful for the <body> to fill the viewport, even when empty, so I do that by setting the min-height to 100vh. I also like smooth anchor scrolling, so I set scroll-behavior: smooth, too.

I only set two text styles. I set the line-height to be 1.5 because the default 1.2 just isn’t big enough to have accessible, readable text. I also set text-rendering to optimizeSpeed. Using optimizeLegibility makes your text look nicer, but can have serious performance issues such as 30 second loading delays, so I try to avoid that now. I do sometimes add it to sections of microcopy though.

ul[class],
ol[class] {
  list-style: none;
}
Enter fullscreen mode Exit fullscreen mode

Just like the margin and padding rules, I only reset list-style where a list element has a class attribute.

a:not([class]) {
  text-decoration-skip-ink: auto;
}
Enter fullscreen mode Exit fullscreen mode

For links without a class attribute, I set text-decoration-skip-ink: auto so that the underline renders in a much more readable fashion. This could be set on links globally, but it’s caused one or two conflicts in the past for me, so I keep it like this.

img {
  max-width: 100%;
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

Good ol’ fluid image styles come next. I set images to be a block element because frankly, life is too short for that weird gap you get at the bottom, and realistically, images—especially with work I do—tend to behave like blocks.

article > * + * {
  margin-top: 1em;
}
Enter fullscreen mode Exit fullscreen mode

I really like this CSS trick and I’ve finally been brave enough to add it to the reset. The lobotomised owl selector targets direct descendants of an article and adds 1em of top margin to them. This gives a solid rhythm to flow content. I actually use a .flow utility in every project now. You can read more about it on 24 Ways. In fact, I reckon it’s my most used CSS these days.

input,
button,
textarea,
select {
  font: inherit;
}
Enter fullscreen mode Exit fullscreen mode

Another thing I’ve finally been brave enough to set as default is font: inherit on input elements, which as a shorthand, does exactly what it says on the tin. No more tiny (mono, in some cases) text!

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

Last, and by no means least, is a single @media query that resets animations, transitions and scroll behaviour if the user prefers reduced motion. I like this in the reset, with specificity trumping !important selectors, because most likely now, if a user doesn’t want motion, they won’t get it, regardless of the CSS that follows this reset.

ℹ️ Update: Thanks to @atomiks, this has been updated so it doesn’t break JavaScript events watching for animationend and transitionend.

Wrapping up

That’s it, a very tiny reset that makes my life a lot easier. If you like it, you can use it yourself, too! You can find it on GitHub or NPM.

Discussion (52)

Collapse
ignore_you profile image
Alex

Well, this list is soooo arguable.
At first, AFAIK adding list-style: none resets accessibility of lists, so it's better to apply transparent image to list-style-image.
Article with owl selector — really? I mean, if it is a reset for blogs, this thing should be boilerplated, but for all the possible cases do we all really need it? 'Cause article tag is used not just to markup text articles in magazines :)
And of course images shouldn't be blocks by default (you are proposing reset, aren't you?). If you don't like image's gap at the bottom, just add vertical-align: middle — and the 'problem' is solved.

Collapse
jamesthomson profile image
James Thomson

I actually tend to agree with this. A reset should align browser defaults, whereas what’s been proposed is more of a boilerplate. A reset should be able to be used in any project without drastically changing things, but rules like the owl selector, image block, reduced motion query does exactly that. While these may be great for some projects, I wouldn’t be comfortable blindly dropping this in as a reset.

Collapse
hankchizljaw profile image
Andy Bell Author

I'd properly respond but I actually can't be arsed. Maybe actually reading the post again, but you do you 👍

Collapse
craigmorrison profile image
Craig Morrison

Sorry but where do you answer this in the post? You talk about how the list looks but removing the semantics is completely a different thing and I can't think why you'd want to use a list element without it carrying those semantics.

Anyway, thanks for the post, it's made me revisit what is really needed again.

Collapse
larsklopstra profile image
Lars Klopstra ⚡

How about adding an overflow-x: hidden to the body?

Collapse
hankchizljaw profile image
Andy Bell Author

I'm up for that. Great idea!

Collapse
hellojere profile image
Jere Salonen

Not a great idea! This'll kill position: sticky for all the child elements.

Thread Thread
hankchizljaw profile image
Andy Bell Author

Oooh good point!

Thread Thread
chriscoyier profile image
Chris Coyier

The mental leap for that is a tough one for me. Why isn't my position: sticky; working?! Oh, because some parent element has hidden X overflow? 🤯

Thread Thread
hankchizljaw profile image
Andy Bell Author

Yup. I completely forgot about that bugger. Definitely not helpful to be set as a global style in that context.

Thread Thread
igcorreia profile image
Ignácio Correia

Finally I figure it out too :)

Thread Thread
cullylarson profile image
Cully Larson

Apparently if you set the height of the element you're overflow hidden'ing on, sticky will work. So something like:

#container {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh; /* need to set this for child elements to be able to use display:sticky (c.f. https://github.com/w3c/csswg-drafts/issues/865) */
}
Enter fullscreen mode Exit fullscreen mode
Collapse
lewiscowles1986 profile image
Lewis Cowles

Just be careful with CSS and contain within something else overflow-x: hidden; as needed. Generic reset rules about body overflow just paper over cracks

Collapse
tups profile image
Damien Tupinier

Hello,

I just read your article, and there is one point that bothers me in this CSS reset.

For example, your idea of removing "list-style" and "padding" on "ul [class]" has too much of a too powerful selector.

Imagine that I want to change the style of UL with a "class", I will logically use ".my-list", but your selector will be more powerful. And I could not change neither the "padding" nor the "list-style", it is absolutely necessary to put more selector:

Your CSS reset is therefore not compatible with the BEM method for example. en.bem.info/methodology/css/

I would tend to let the developer choose if he needs to delete or not the style on with a "class"

Collapse
cullylarson profile image
Cully Larson

What do you think about adding something like this:

p:first-child, h1:first-child, h2:first-child, ... {
  margin-top: 0;
}

p:last-child, h1:last-child, h2:last-child, ... {
  margin-bottom: 0;
}
Enter fullscreen mode Exit fullscreen mode

or even:

*:first-child {
  margin-top: 0;
}

*:last-child {
  margin-bottom: 0;
}
Enter fullscreen mode Exit fullscreen mode

I seem to always be removing margin top on the first item and margin bottom on the last item, since it pushes a container out too far or something.

Collapse
equinusocio profile image
Mattia Astorino • Edited

Does this:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

can just be like this?

* {
  animation: unset | revert | initial !important;
  transition: unset | revert | initial !important;
  scroll-behavior: unset | revert | initial !important;
}
Collapse
hankchizljaw profile image
Andy Bell Author

It's in the media query for if someone prefers reduced motion. Your code will just disable animations globally.

Collapse
equinusocio profile image
Mattia Astorino • Edited

Yes sorry, i forgot to add the @media query. By point was about the values (unset, revert, initial). But i think forcing specific value is more stronger, while my proposed values are not predictable.

Thread Thread
hankchizljaw profile image
Andy Bell Author

Yeh, sure you can do that!

Collapse
kyleoliveiro profile image
Kyle Oliveiro

I'm not sure if it's a good idea to reset styles for only ul and ol elements that have a class. I'm guessing the rationale behind this decision was to remove default styling for elements that are semantically lists.

But consider the following case where the user is expecting default styling on a ul element, plus an added purple style for the text:

<ul class="text--purple">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

In this case, the default margin and padding would be removed and AFAIK there isn't a way to restore the default UA styling.

Collapse
hankchizljaw profile image
Andy Bell Author

Yeh that's valid, but I've found the styles as above more useful. It's probably better for you to create a fork in this instance.

Collapse
maxart2501 profile image
Massimo Artizzu

Very nice, Andy. I'll consider using it from now on 👍

I was wondering about the box-sizing setting selector: isn't *::before equivalent to just ::before?
I'm asking because I've seen that everywhere with the asterisk, so I wonder if there are any differences I'm missing out.

Collapse
hankchizljaw profile image
Andy Bell Author

Both will work fine! It's just a stylistic choice, really.

Collapse
sandstedt profile image
Jonas Sandstedt

Thanks for a great reset! Really liked the smart list styling.

But can't agree with the prefers reduced motion part. This option is for people who wants reduced motion. Not no motion at all. A lot of small animation can be critical to understanding the flow or function, without triggering motion sickness or nausea.

Also opacity and color changes usually works just fine to.

Well I could rant over this for hours, but I guess you get my point 😄. Devs always need to add this media query on problematic animations (also in JS code), but that must be up to the author of the code to decide.

Collapse
hankchizljaw profile image
Andy Bell Author

I disagree. The great thing about it being OS is that you can fork it and remove the bits you don't like 🎉

Collapse
sandstedt profile image
Jonas Sandstedt

Absolutely. Just know how copy paste friendly this community is, many developers will just take it and don't think what it does. Just wanted to make sure people know what it does.

But will definitely try this on my next project. Thanks!

Collapse
michaelherold profile image
Michael Herold

I'm curious whether the text-rendering: optimizeLegibility; avoidance is still applicable. That article is from 7 years ago, which is an eternity in terms of phone age. It'd be nice to see a set of updated measurements!

Collapse
sagar profile image
Sagar

You've missed the h5 tag.

Collapse
nemethricsi profile image
Richard

how about h6? :D

Collapse
chaofix profile image
Itzik Pop

Amazing work !!! well done

Collapse
nenadra profile image
nenadra

Great list!

I always add:
font-size: 0
to the body element, to disable the gap when you use display: inline-block

Collapse
hankchizljaw profile image
Andy Bell Author

I would only recommend doing hacks like that on the element itself, rather than globally.

Collapse
nenadra profile image
nenadra

I use inline-block pretty often. It’s a necessity for me.
But not everybody has the same approach. Thanks for your post again. Very helpful

Collapse
westbrook profile image
Westbrook Johnson

Interesting technique. Does that no longer have SEO issues? Maybe the crawler is smart enough to go further into the page, but I remember that being a solid anti-pattern a while back.

Collapse
nenadra profile image
nenadra

I don't think so, but should be tested :)
My opinion is that if you put "font-size: 0" to the

element, then you don't plan to have text directly in the body element. The text should be inside of a

,

or other (all with a visible font-size). Nothing is concealed, so it should be crawled normally.

Collapse
mikeriley131 profile image
Mike Riley • Edited

Pretty good stuff. One question for you. In the anchor element section you mention "This could be set on links globally, but it’s caused one or two conflicts in the past for me, so I keep it like this." I'm curious what those conflicts were.

Collapse
toanlc0912 profile image
Toàn Lư

Thank you very much for the resetCSS and the breakdown. Will use it for the next project.

Collapse
anthonycook profile image
Anthony Cook • Edited

Have you considered using rem instead of em on this part? (so the margin is relative to document font size)

article > * + * {
  margin-top: 1em;
}
Collapse
hankchizljaw profile image
Andy Bell Author

em is relative to the element in question’s size, which I’ve found generates a nice, natural rhythm. I went into more detail using rem units in this article, last year,

Collapse
bhenbe profile image
Benoît HENRY

Adding height: auto to image can be useful with svg images. I had some issues with brand logo and illustrations in content.

Collapse
theryanfurrer profile image
Ryan Furrer

Thanks for this, Andy! I've been using something similar that I have created, however, it's definitely not as robust. I'll definitely be borrowing some of this!

Collapse
kathryngrayson profile image
Kathryn Grayson Nanz

This was a very cool read - the "lobotomized owl" in particular was new to me and definitely something I'll incorporate now. Thanks! 😊

Collapse
perpetual_education profile image
perpetual . education

It's pretty heavy-handed. If you want to get more granular - check out this type of selector.

article {
  h1 + p {
    margin-top: 20px;
 } 
}
Collapse
beumsk profile image
Rémy Beumier

Thanks for the article Andy, I'll definitely create mine based on this one. :)

One question though: Why don't you use more reset on buttons?

Collapse
haroenv profile image
Haroen Viaene

I prefer to keep the default margin / padding on elements, since it requires less CSS to set this back to a real value and I can't e.g. forget to style an element which is added dynamically

Collapse
graphkgrondin profile image
Kenjee Grondin

Thanks! I was looking for a new reset.css! :-)

Collapse
joaorr3 profile image
João Ribeiro

Thank you!

Collapse
weakish profile image
Jang Rush

Hi, I'd like to translate this article to Chinese, and publish the translation at nextfe.com Can you give me the permission to translate it?

Collapse
bayuangora profile image
Bayu Angora

What if text-rendering: optimizespeed placed to html part rather than body part?

Collapse
hankchizljaw profile image
Andy Bell Author

You could do that if you want, sure!

Collapse
perpetual_education profile image
perpetual . education

We still find places where a 3rd party plugin will use content-box - and that the inherit is still a win: paulirish.com/2012/box-sizing-bord... - Some of this other stuff seems like they have edge cases. We'll play with it a bit and see if we can break it.

Forem Open with the Forem app