Minimal CSS

Dominik Rüttiger

I recently read Robin Rendle’s blog post, “The Smallest CSS”, in which he tried to find “the smallest amount of CSS that you can write to make HTML look halfway decent”.

I was hooked immediately. For content-driven websites, I think there is no need to reset or normalize all styles. Browsers are awesome these days and only need a tiny push.

So here is my take on it.

The CSS

The most important design decision is typography. Using native operating system fonts ensures, that text can be read easily and has a modern look. I chose System UI. For other options, check out the awesome Modern Font Stacks.

The root font size scales seamlessly between 16 and 20 pixels for viewports from 576 to 1536 pixels (the expression was calculated with the Clamp it! VS Code extension). Browsers usually set heading font sizes relative to the root font size, which is good enough. I also decided to rely on the browsers’ built-in styles for font spacing.

The content is centered with a maximum width relative to the font width to ensure good readability. Images fit nicely inside. And of course, there is dark mode support.

html {
  color-scheme: light dark;
  font-family: system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: clamp(100%, 85% + 0.417vw, 125%);
}


body {
  max-width: 56ch;
  margin: 0 auto;
  padding: 0 1rem;
}


p {
  line-height: 1.4;
}


img {
  max-width: 100%;
  height: auto;
}

Use case

These few CSS rules are sufficient to feature a content-driven website like a blog. Add a few more styles if you need more control. I recommend using CSS grid for two-dimensional layouts and flexbox for one-dimensional layouts.

For more interactive websites, I used Bootstrap in the past, but now I really love Pico CSS. It’s not actively maintained at the moment, but I feel like it’s a fininshed product anyway.

Tags

#css #minimalism #webperformance