CSS Reset

Browsers nowadays are much better at presenting HTML in a consistent manner, making CSS resets of the past largely unnecessary. However, default browser styles are not particularly great in most cases, which is why there are tons of CSS resets out there. Drawing inspiration from some of them, here's my opinionated CSS reset, along with an explanation of why I chose to include each rule.

• html:

- max-width - Use ch units to set the maximum width in the middle of the optimal readable range (60-80 characters).
- margin - Center content on the page.
- padding - Prevent edge-to-edge text on smaller viewports.

html {
  max-width: 70ch;
  margin: auto;
  padding: 3em 1em;
  font-family: system-ui, 'Segoe UI', Roboto, Cantarell,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.25em;
  line-height: 1.75;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 3em 0 1em;
}

p, ul, ol {
  margin-bottom: 2em;
  color: #1d1d1d;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

pre, code, kbd {
  font-family: monospace, monospace;
  font-size: 1em;
}

- max-width - Use ch units to set the maximum width in the middle of the optimal readable range (60-80 characters).
- margin - Center content on the page.
- padding - Prevent edge-to-edge text on smaller viewports.
- font-family - Use the system font stack to ensure the best possible font rendering. system-ui is a new generic font family that replaces -apple-system and BlinkMacSystemFont.
- font-size - Use a larger font size for better readability and to keep up with recent design trends.
- line-height - Use a larger line height to increase visual clarity.

From 30-seconds-of-code: reset