ryanmartin.me

My CSS reset

I find myself using vanilla CSS more often recently. Especially for smaller websites like this blog. The thing about using just CSS instead of a complete or opinionated styling system is that you have to worry about the default browser styles. This is what normalise stylesheets and CSS resets are for.

Here’s the CSS reset that I use now, it’s a combination of modern-normalize with resets I found from Kevin Powell:

reset.css 
@import 'modern-normalize.css';

/* src: https://www.youtube.com/watch?v=cCAtD_BAHNw */
* {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark light;
  hanging-punctuation: first last;
}

body {
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  max-width: 65ch; /* this is optional */
}

button, input, optgroup, select, textarea, legend {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* src: https://www.youtube.com/watch?v=345V2MU3E_w */
img, picture, svg, video {
  max-width: 100%;
  vertical-align: middle;
  height: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 1rem;
}

@media (prefers-color-scheme: dark) {
  img, picture, video {
    filter: brightness(.8) contrast(1.2);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 8rem;
  }
}

Hi 👋. If you like this post, consider sharing it on X or Hacker News . Have a comment or correction? Feel free to email me or reach out on X. You can also subscribe to new articles via RSS.

Continue reading: