CSS Reset

Thinking beyond the first three lines of code.

I start just about every project with a few lines of code in my top-level CSS file that look something like this:

This ensures that my website will look the same across browsers.

In this write-up, I am going touch on how CSS works, why a reset is important for the web developer, and a few additions one might make once we have a better understanding.

At the heart of CSS (Cascading Style Sheets) is the cascade algorithm. It defines how to combine property values originating from different sources.

CSS stylesheets can come from three different origins.

• Browsers: Each browser has its own basic level stylesheet that gives a default style to any document.
• User: The user is the reader of a website. Users may override styles or use stylesheets designed to tailor a custom experience.
• Author: These are the stylesheets for a given website, written by the web developer.

Browser > User > Author

By default, cascade prioritizes Browser stylesheets over User, and User stylesheets over Author. (See MDN for how !important, animations, and transitions are prioritized)

As a web developer, you can have zero lines of code in your stylesheet and your HTML will look slightly different depending on which browser you view it in.

That’s why we reset it. We override any styling that you would otherwise inherit.

Look again at our reset.

Resetting margin and padding are intuitive.

You don’t want the spacing around the screen or around elements to look differently on different browsers.

What does box-sizing do?

By default, an element’s height and width are determined in the following way:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

If you have two divs with the same dimensions but with different padding and border settings, the ones with the larger accumulative size of border and padding will appear larger on the screen.

box-sizing: border-box; includes the width and height of the border/padding in element, so you can think of your element width/height as an absolute value instead of a starting value. For a lot of people, this is a lot easier to keep track of.

What else can we do?

Now that we know our reset is overriding the Browser stylesheet, we can think about what other styles we are inheriting and remove or reset our base settings.

Examples:

• Set a default font family.

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',    'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

• Set a scalable base font-size. Using em in * ensures all components inherit the same base size and that it is scalable. 62.5% in HTML will make the base font 10 pixels. Now, you can scale font size site-wide using a 10 based number system. ex: 140%.

* {
    font-size: 1em;
}
html {
    font-size: 62.5%;
}

• Make images easier to work with. This gets rid of some bottom spacing and makes them work more like blocks.

img {
  max-width: 100%;
  display: block;
}

Remember these are just examples, and they barely scratch the surface of what you can do. Play around with them, experiment, and have fun!

What will you add?

Check out some of my other guides and write-ups; Recoil.js & simple global state, or A guide to creating a React app without create-react-app.

Contact me at joshuagauthreaux@gmail.com or through joshgotro.com.

Thank you for reading and be well!