These sorts of roundups always get me. My wife will flip through Zillow photos of the insides of homes for hours because she likes seeing how different people decorate, Feng Shui, or what have you. That’s her little dip into Voyeur-Land. Mine? It could easily be scrolling through CSS snippets that devs keep within arm’s reach.
Alvaro was kind enough to share the trustiest of his trusty CSS:
- Limit the content width within the viewport
- Increase the body text size
- Increase the line between rows of text
- Limit the width of images
- Limit the width of text within the content
- Wrap headings in a more balanced way
- Form control colors to match page styles
- Easy-to-follow table rows
- Spacing in table cells and headings
- Reduce animations and movement
Not dropping the snippets in here (it’s worth reading the full post for that). But I do have a couple of my own that I’d tack on. And like Alvaro says up-front about his list, not all of these will be 100% applicable to every project.
Global border-box sizing
No explanation needed here. It’s often the very first thing declared in any given stylesheet on the web.
*, *::before, *::after {
box-sizing: border-box;
}I’m guessing Alvaro uses this, too, and maybe it’s too obvious to list. Or maybe it’s more of a DX enhancement that belongs in a reset more than it is something that improves the website.
System fonts
Default text on the web is just so… so… so blah. I love that Alvaro agrees that 16px is way too small to be the web’s default font-size for text. I would take that one step further and wipe out the Times New Roman default font as well. I’m sure there are sites out there leveraging it (I did on my own personal site for years as an act of brutal minimalism), but a personal preference these days is defaulting to whatever the OS default font is.
body {
font-family: system-ui;
}We can be a little more opinionated than that by falling back to either a default serif or sans-serif font.
body {
font-family: system-ui, sans-serif;
}There are much, much more robust approaches for sure, but this baseline is a nice starting point for just about any site.
Cut horizontal overflow from the <body>
Oh gosh, I never ever make this mistake. 😝
But hypothetically, if I did — and that’s a BIG if — I like preventing it from messing with a visitor’s scrolling experience. Once the <body>‘s intrinsic width is forced outside the viewport, we get horizontal scrolling that might be a very cool thing if it’s intentional but is not-so-bueno when it’s not.
body {
overflow-x: hidden;
}I’ll use this as a defensive mechanism but would never want to rely on it as an actual solution to the possible loss of data that comes with overflowing content. This merely masks the problem while allowing an opportunity to fix the root cause without visitors having to deal with the rendered consequences.
Give the <body> some breathing room
Not too much, not too little, but the baby bear porridge just the right amount of space to keep content from hugging right up to the edges.
body {
padding-block: 15px;
}
re: Global border-box sizing I prefer to go with
That way you can override
border-boxif/where necessary or by a third party. It wasn’t my idea, I forget where I first saw it but I think it’s a marginally better solution.Maybe from here?
Should I change my ‘responsive images’ oneliner once for all? From:
img { width:100%; height:auto; }
To:
img { max-width:100%; }