If You Could Keep Only Four CSS Properties
Donnie D’Amato recently posed a question that sounds simple but gets complicated fast: if you had to build a website with only four CSS properties, which four would you pick? The CSS-Tricks team took a stab at it, and the answers reveal a lot about how different developers prioritize the craft.
The trap in the question is that choices compound. Want spacing? margin and padding each eat a slot. Want layout? display is basically mandatory, and then you’re deciding between flex and grid as a follow-up. Shorthands like font or background can bundle a lot of power into one pick, but they still cost you a slot. The fun is watching where people land under that pressure.
Most Picks Converge on Typography and Spacing
There’s a strong consensus across the team: font shows up in nearly every list, and color or padding is rarely far behind. Juan Diego Rodriguez went with font, padding, background, and color, arguing that shorthands give the most bang for the buck—font alone carries a pile of typographic properties, and background does the same for styling. color rounds out the visual hierarchy play. He did waver, though, noting he was tempted to swap color for place-items, since it works on block elements, while a full grid approach would force him to spend a slot on display as well.
Danny Schwarz went even leaner, picking font, padding, and color—and then admitting he wouldn’t even bother with a fourth. He later reconsidered, wondering if width might be worth picking up to keep line lengths readable.
Structuralist Approaches Spend Slots Differently
Ryan Trimble’s list is the most layout-first of the bunch: display to open up flex layouts, flex-direction for multi-directional control, width for constraining elements and text, and margin for spacing that’s more versatile than gap. He also nailed centering with margin, something gap can’t do. As a bonus, he pointed out that automatic dark/light theme support doesn’t require any CSS properties at all—just the <meta name="color-scheme" content="dark light"> tag.
Sunkanmi Fafowora is the only one to commit fully to grid, using display and the grid shorthand as two of his four picks. That’s a significant investment in a layout system, but it buys a complete two-dimensional layout tool. His remaining choices—font and color—mostly cover content presentation. It’s a telling contrast with Ryan: both are thinking structurally, but Sunkanmi is betting on a more powerful layout primitive while Ryan keeps his system more flexible with flexbox and margins.
Pragmatic and Minimal Approaches
Zell Liew’s list is about doing more with less, in his words a “really really plain and simple site.” He selects font, max-width, margin, and color. The max-width is a nod to keeping type measure comfortable, and color is there to avoid harsh pure-black-on-white contrast. But he’s also realistic about trade-offs: for a site with more complex sections, he’d trade color for background and margin for padding to pick up better visual separation between content areas.
Amit Sheen takes the most user-agent-centric view. His list—font, color, background, and color-scheme—is driven by fighting default browser styles rather than building layout from scratch. The thinking is that with only four properties, you’re heavily dependent on the user agent anyway, so the best you can do is fix the defaults that are most likely to annoy you: typeface, color, and theme awareness. He even suggests he’s not sure how much he’d actually use his last two picks, but wants them available just in case.
The exercise is a useful reminder that CSS decisions are rarely made in isolation. Every property choice implies a set of capabilities you’re giving up, and the best lists are the ones where the trade-offs are deliberate. Whether you lean typographic, structural, or pragmatic, there’s no single correct answer—just a set of priorities made visible under constraint.
