CSS One-Liners To Improve (Almost) Every Project

These types of roundups always excite me. My wife spends hours scrolling through Zillow photos of home interiors because she likes to see how different people decorate, feng shui or whatever. That’s her little foray into voyeur land. Mine? It might as well be scrolling through CSS snippets that developers keep within arm’s reach.

Alvaro was kind enough share the most reliable of its reliable CSS:

1. Limit the content width within the viewport
2. Increase the text size
3. Increase the line between the text lines
4. Limit the width of images
5. Limit the text width within the content
6. Make headings more balanced
7. Colors of form controls to match page style
8. Clear table rows
9. Spacing in table cells and headings
10. Reduce animations and movements

I will not throw the snippets in here (it is worth read the whole article But I have a few of my own that I would add. And as Alvaro says right at the start of his list, not all of them are 100% applicable to every project.

Global border box resizing

NO Explanation required here. It is often the very first thing declared in any stylesheet on the web.

*, *::before, *::after {
 box-sizing: border-box;
}

I suspect that Alvaro uses this too, and maybe it is too obvious to list. Or maybe it is more of a DX Improvement that is more of a reset than an improvement to the site.

System fonts

Standard text on the web is just so… so… so boring. I love that Alvaro agrees that 16px is far too small to be the standard of the web font-size for text. I would go a step further and delete the default Times New Roman font as well. I’m sure there are websites that use that (I did it for years on my own personal website as an act of brutal minimalism), but these days it’s a personal preference to default to the operating system’s default font.

body {
  font-family: system-ui;
}

We can be a little more idiosyncratic by using either a standard serif font or a sans serif font.

body {
  font-family: system-ui, sans-serif;
}

There are much, much more robust approaches sure, but this base is a good starting point for virtually any site.

Horizontal overflow from the

Oh God, I’ll never make that mistake.

But hypothetically, if I did that – and that’s a BIG if – I would like to prevent it from affecting a visitor’s scrolling experience. Once the The intrinsic width is forced outside the viewport, we get horizontal scrolling, which could be a very cool thing if it is intended but it’s not so good if it isn’t so.

body {
  overflow-x: hidden;
}

I will use this as a defense mechanism, but would never want to rely on it being an actual solution to the possible data loss that comes with overflowing content. This simply masks the problem while providing an opportunity to fix the root cause without visitors having to deal with the resulting consequences.

Give the some air to breathe

Not too much, not too little, but the baby bear porridge just the right amount Space so that the contents do not reach the edges.

body {
  padding-block: 15px;
}

Direct link →