58 bytes of CSS to look great nearly everywhere

Note

The original page seems to have disappeared from the Internet1 (see: link rot), so the original contents are kept here.

When making this website, I wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Let’s break this down.

A key insight: it took me a surprising number of iterations to arrive at this point. Perhaps that speaks to the fact that I know nothing about “modern” web development, or, as i’m more inclined to believe, just how hard it is to keep it simple in a world of complication.

Update

Following some discussion (see footer), I’ve since changed the padding to 1.5rem for a happier compromise between mobile and desktop displays.

Update 2

The ch unit was brought to my attention here, and I quite like it! I’ve since changed to 70ch / 2ch, which looks nearly the same with 2 less bytes, except that the padding is a little bit smaller (a good thing for mobile).

Footnotes

  1. A cached version can still be seen, hopefully, at http://web.archive.org/web/20210318102514/https://jrl.ninja/etc/1/↩︎