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:
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.
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.
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.
<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.
<body>
some breathing roomNot 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;
}
To Shared Link — Permalink on CSS-Tricks
Alvaro Montoro: CSS One-Liners to Improve (Almost) Every Project originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
Only Chris, right? You’ll want to view this in a Chromium browser: CodePen Embed Fallback…
I’m a big Lynn Fisher fan. You probably are, too, if you’re reading this. Or…
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear…
I collect a bunch of links in a bookmarks folder. These are things I fully…
HTML forms come with built-in ways to validate form inputs and other controls against predefined…
PSA: Today’s the day that Google’s performance tools officially stops supporting the First Input Delay…