Skip to content

You are not a CSS dev if you have not made a CSS reset

I read this recently on Mastodon, CSS resets with breakdowns are bringing me a lot of joy. says Dave Rupert. Then I suddenly remembered that I had this post in my drafts for quite some time. So now y’all are getting my take on CSS resets. My approach is very minimal, as with anything I have done lately. The resets are set up as a Codepen template. It helps me to kickstart every pen I write. Let’s dive in.

Firstly, typsetting because I am a type snob

*,

*::before,

*::after {

  font-feature-settings: "kern";

  font-kerning: normal;

  -moz-osx-font-smoothing: grayscale;

  -webkit-font-smoothing: antialiased;

  box-sizing: border-box;

}

As a graphic designer, I really miss the days where I meticulously kern everything in Illustrator or InDesign to make the text look good. You can’t really do that on the web at scale. Luckily, modern fonts are mostly designed with good kerning. I prefer not to leave the decision on kerning up to the browser so I explicitly turn kerning feature on.

For font anti-aliasing, opinions might vary but if I am picking good fonts to work with then I should not let the browser create faux bold when it comes to light text on dark background. The font-smoothing allows the font to display as intended.

All of these are scoped to the pseudo selectors in addition to the universal selector because they do not inherit. The box-sizing is tucked in here as well due to that reason. That one has been explained a lot so I need not to elaborate here.

I don’t like your spacing

* {

  margin: 0;

  padding: 0;

}

100% of the time I create my own spacing rules so I don’t need any spacing to begin with. Also, browser default spacing is notoriously bad and collapsing margins don’t work in flex and grid, so let’s start from scratch!

Gimme the finger

input:is([type="checkbox"], [type="radio"]),

select,

label,

button {

  cursor: pointer;

}

I believe it is a good practice to show the pointer finger on interactive controls. It acts as a bare minimum when designers don’t design any hover styles.

Stay in the box

img,

svg,

video {

  max-inline-size: 100%;

  block-size: auto;

}

Setting a relative max-inline-size on images and videos will eliminate a lot of layout overflow issues caused by high resolution assets. This makes sure they don’t exceed the size of their parent container.

Hey, boundaries

@media (forced-colors: active) {

  button {

    border: 1px solid;

  }

}

Your button designs don’t always involve a border, and that can be a problem for Windows High Contrast mode where buttons are supposed to have borders. Setting a border initially—even a transparent one—would be a good practice, but it’s easy to forget. It doesn’t hurt to have this fallback.

My boy is wicked smooth

@media (prefers-reduced-motion: no-preference) {

  :root {

    scroll-behavior: smooth;

  }

}

I love smooth scrolling, but others should not suffer—getting motion sickness—for what I love. This last bit of CSS reset ensures smooth scrolling is only available to users who are ok with motion.

And that’s it, folks

All CSS resets are opinionated, mine included. I like to keep things simple. I will only reset things that I deem absolutely essential for every project. This is enough for me.

As you dig into my Codepen template, you will find other interesting things—lots of CSS custom properties—in addition to the resets. Well, we can talk about those in another post.