Modern CSS reset

We'll override the default CSS styles to reduce browser inconsistencies such as: default line heights, margins and font sizes of headings, and so on. Reset styles quite often appear in CSS frameworks like "Tailwindcss".

This reset is unopinionated and can be used in any new project regardless of the aesthic you going for.

WarningIcon

Do not apply to an existing codebase

I would not recommend apply these styles on a existing codebase. It may introduce subtle bugs hard to notice.

LinkIconThe CSS Reset

CssIcon
*, *::before, *::after  {
  /* Include padding and border in size calculation. */
  box-sizing: border-box;
  /* Prevent grid and flex items from spilling out of their container. */
  min-width: 0;
}
 
* {
  /* Remove default margin and padding */
  margin: 0;
  padding: 0;
}
 
img, picture, video, canvas, svg {
  /* Improve media defaults */
  display: block;
  max-width: 100%;
}
 
input, button, textarea, select {
  /* Inherit fonts for form controls */
  font: inherit;
}
 
body {
  /* Ensure that the body fills the entire viewport. */
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
 
h1, h2, h3, h4, h5, h6 {
  /* Balance headings across multiple lines into an even block. */
  text-wrap: balance;
}
 
p {
  /* Prevent text orphans (single words on last Line). */
  text-wrap: pretty;
}
 
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.01ms !important; 
    scroll-behavior: auto !important;
    transition: none;
  }
}

LinkIconRefeerences

See all notes