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

  • A basic font bump is a nice improvement:

Code
Notes

  • Adding a dark mode setting looks like this:

Code
Notes

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

Code

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