opinionated CSS reset

base.css

/* Use the correct box model on all elements */
html {
  box-sizing: border-box;
}

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

/* 
  Allow percentage-based heights in the application.
  Contain margins inside the body element.
  html will be the scrolling element.
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
*/
body {
  min-block-size: 100dvh;
  display: flow-root;
}

/*
  Prevent uncontrolled changes to font size
  https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
*/
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/*
  Optimize text rendering for max performance
  Avoid `text-rendering: optimizeLegibility`!
  See https://marco.org/2012/11/15/text-rendering-optimize-legibility
  and https://hankchizljaw.com/wrote/a-modern-css-reset/
  */
html {
  text-rendering: optimizeSpeed;
}

/*
  Disable subpixel antialiasing
  This one is controversial!
  See https://www.joshwcomeau.com/css/custom-css-reset/#four-font-smoothing-5
  but also https://www.zachleat.com/web/font-smooth/
*/
html {
  -webkit-font-smoothing: antialiased;
}

/*
  Remove default margins in favour of a controlled flow
  Some resets even use `* { margin: 0 }`
*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin-block: 0;
}

/* Consistent behaviour for replacement (media) elements */
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  display: block;
  max-inline-size: 100%;
}

/*
  Remove default list styles on custom styled lists
  A list role or a class indicates default styling (and semantics) are removed
*/
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}

dl[class] dd {
  margin-inline-start: 0;
}

/* Set an accessible line height */
html {
  line-height: 1.5;
}

/* Reduce line height for headings and (some) form elements */
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
  line-height: 1.1;
}

/* Normalize typography for form elements */
input,
button,
select,
textarea {
  font: inherit;
}

/* Balance wrapping and prevent overflow on headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

/*
  Favor better typography (minimal number of orphans) over speed for body text
  1. No support in Firefox and Safari for now
  2. Rules are language-specific and support varies
*/
p {
  /* 1 */
  text-wrap: pretty;
  /* 2 */
  hyphens: auto;
}

/* Previous lines in the area being edited remain stable */
[contenteditable] {
  text-wrap: stable;
}

/* Default styles for unstyled anchor elements */
a:not([class]) {
  color: currentColor;
}

/* 
  For folks who didn't check `Less wiggle please` in their OS setings:
  1. Smooth scrolling when scrolling is triggered by the navigation or
     CSSOM scrolling APIs for users that don't prefer reduced motion
     https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522
  2. Turn cross-document view-transitions on (opy-in)
*/
@media (prefers-reduced-motion: no-preference) {

  /* 1 */
  html:focus-within {
    scroll-behavior: smooth;
  }

  /* 2 */
  @view-transition {
    navigation: auto;
  }
}

/* Extra scroll margin for all anchors  */
:target {
  scroll-margin-block: 5ex;
}

/* Follow the browser's logic in determining when a focus ring should be shown */
:focus:not(:focus-visible) {
  outline: none;
}

/* Utility
   ========================================================================== */

/*
	Hide content accessibly
	aka screen reader only content
	See https://zellwk.com/blog/hide-content-accessibly/
*/
.visuallyhidden {
  border: 0;
  clip-path: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* Very opinionated but truly centered thematic break (hr)  */
hr:not([class]) {
  color: currentColor;
  border: none;
  block-size: var(--line-height, 1.5rem);
  margin-block: var(--gap-block, 1rem);
  background-image: linear-gradient(90deg, currentColor 0%, currentColor 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% var(--border-width, 1px);
}

/* It's a circle */
.circle {
  clip-path: circle(50% at 50% 50%);
}