Resetting our CSS

CSS has a fair number of defaults.

Many of these defaults are fine (though some are problematic, such as box-sizing), but often when we're creating a site these days, we're customizing almost everything, so it's a common practice to "reset" our CSS to give us more of a blank slate to work from, where the default values won't get in our way.

There are a number of great CSS resets out there, and you're free to use whatever you want.

Some people like changing the box-sizing, removing the margins from everything, and going from there, while others prefer doing a little more.

I'm going to use a relatively light-weight reset myself, which is below.

You're free to use a different one if you want, or to make changes to the one I'm using, just remember the changes you did make later on if something isn't behaving!

Here's what I'll be using for this project, which is a modified version of Andy Bell's A (more) Modern CSS Reset:

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

/* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

body {
  min-block-size: 100vh;
  line-height: 1.6;
}

h1,
h2,
h3,
button,
input,
label {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

img,
picture {
  max-inline-size: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

Using cascade layers

CSS Cascade layers allow us to create our own mini-cascade within the larger cascade that you're already used to working with.

This can be useful for keeping our CSS organized, and we can start by placing our reset inside a layer!

And, in the next lesson, we'll be bringing in some custom properties, which can go in the next layer, which I'm going to call base, but you could also go with something like global, or another name if you prefer.

@layer reset {
  /* the reset here */
}

@layer base {
  /* :root custom props + base/global styles here */
}