Review: Stop Over-Engineering Your CSS - Kevin Powell (4min)

July 2023

3 out of 3 starts: ✭✭✭

This is great. A couple dozen lines of CSS and you have a responsive site with automatic dark mode that doesn't look half bad.

Notes

Pages are responsive by nature if there's no CSS on them. The exception is images which and have overflow issues. Those can be fixed like this:

img { 
  max-width: 100%;
  display: block;
}

It's probably worth adding svg, and video to the img if you have those. (and he said there might be some other stuff that you could run into to)

img, 
svg, 
video { 
  max-width: 100%;
  display: block;
}

body {
  font-family: system-ui;
  font-size: 1.125rem;
  line-height: 1.5;
}

html {
  color-scheme: light dark;
}

Basic centering and padding is done with this (which is on main, but could be on a wrapper class just as well)

main {
  width: min(70ch, 100% - 3rem);
  margin-inline: auto;
}

And that's it, short sweet and very well done.

end of line