Left Arrow

Notes

Reset

The icon of the Adeptus Mechanicus. A cog with a skull at the center.

Wooden easel with a blank canvas

CSS Reset

Tended

Status: sprout

The purpose of a CSS reset is to:

  • Remove default legacy styles: useful in the early days on the Internet but no longer required. For example, removing the gap below image elements.
  • Define default styles: styles that will be most common on your website. For example, if the majority of text on the site is black, set that color here.

/reset.css

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

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

/* Only show focus outline when the user is tabbing (not when clicking) */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 1px solid blue;
}

/* 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 */
/* Setting width: 100% isn't required because it is a default for block-level elements (html and body are block level) */
html, body {
  height: 100%;
}

body {
  /* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */
  overscroll-behavior: none;

  /* Prevent the browser from synthesizing missing typefaces */
  font-synthesis: none;

  color: black;
  /* UI controls color (example: range input) */
  accent-color: black;

  /* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs  */
  background: white;
}

/* 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 {
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

input {
  border: none;
}

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

button:disabled {
  color: inherit;
}

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

Most font specific properties (font-family, line-height, ...) aren't set here. This is because I use Capsize. Due to the added complexity, font properties are moved to a seperate file. It is common to see -webkit-font-smoothing: antialiased; in CSS resets. This property has been deprecated so no longer required.