CSS Reset

The purpose of a CSS reset is to define baseline styles. A blank canvas. This reset was adpated from Josh W. Comeau's. The main difference stems from this comment:

”

I also don't believe it's necessary to strip away all of the browser defaults. I probably do want <em> tags to set font-style: italic, for example! I can always make different design decisions in the individual project styles, but I see no point in stripping away common-sense defaults.”

From my perspective, it's best to strip away all defaults. I consider the CSS Reset as a global. In my experience, the effect of globals should be minimized, or totally avoided where possible. It's harder to understand a file effected by globals compared to 1 that isn't. Because there is no indication within the file that the global is effecting it, you can easily forget it's there. Then you get stuck questioning why your file isn't behaving like it's coded. I don't see a significant advantage to making the CSS Reset an exception to this rule.

/* Use a more intuitive box-sizing model. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove all margins & padding. */
* {
  margin: 0;
  padding: 0;
}

/* Prevent mobile browsers increasing font-size. */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Allow percentage-based heights. */
html, body {
  height: 100%;
}

body {
  /* Improve text rendering. */
  -webkit-font-smoothing: antialiased;
  /* Prevent the rubber band scroll effect when the user hits the top or bottom of the document */
  overscroll-behavior: none;
  color: black;
}

/* Remove unintuitive behaviour such as gaps around media elements.  */
img, picture, video, canvas, svg, iframe {
  display: block;
}

/* Avoid text overflow. */
h1, h2, h3, h4, h5, h6, p, strong {
  font-weight: 400;
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

input {
  border: none;
}

/* Create a root stacking context (only when using JS frameworks like React). */
#__next {
  isolation: isolate;
}

Changes from Josh's CSS Reset

• Set padding: 0 to all elements.
• Add overscrollBehavior: none to body.
• Added strong to typography elements & set font-weight: 400.
• Added iframe to media elements.
• Removed line-height rule. In most circumstances, Capsize would be responsible for typography vertical space.
• Removed max-width from media elements.
• Removed font: inherit from form elements (as I'm not defining a global font to inherit from).
• Set text-size-adjust: none to prevent mobile browsers increasing font-size.
• Set text-decoration: none to anchor elements.
• Set list-style: none to list elements.
• Set border: none to input elements.