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.

- 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 :

css

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

- It's probably worth adding [TODO: Code shorthand span ] , and [TODO: Code shorthand span ] to the [TODO: Code shorthand span ] if you have those. (and he said there might be some other stuff that you could run into to)

css

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

- A basic font bump is a nice improvement :

css

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

- Adding a dark mode setting looks like this :

css

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)

css

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

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