Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

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

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:

Code

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

Notes

  • 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)

Code

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

Notes

  • A basic font bump is a nice improvement:

Code

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

Notes

  • Adding a dark mode setting looks like this:

Code

html {
  color-scheme: light dark;
}

Notes

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

Code

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

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