What’re Your High 4 CSS Properties?

That’s what Donnie D’Amato asks in a latest publish:

You’re requested to construct a web site however you need to use solely 4 CSS properties, what are these?

This actually acquired the CSS-Tips staff speaking. It’s the nerdy model of “should you may solely take one album with you on a distant island…” And everybody had a distinct opinion which is nice as a result of it demonstrates the messy, non-linear craft that’s considering like a front-end developer.

Looks as if a reasonably simple factor to reply, proper? However like Donnie says, this takes some technique. Like, say spacing is excessive in your precedence listing. Are you going to make use of margin? padding? Maybe you’re leaning into format and go together with hole as a part of a flexbox route… however you then’re committing to show as considered one of your choices. That may shortly eat up your selections!

Our solutions are fairly constant, however converged much more because the dialogue wore on and all of us had been coming at it with completely different priorities. I’ll share every individual’s “intestine” response as a result of I like how uncooked it’s. I believe you’ll see that there’s at all times a compromise within the combine, however these compromises actually reveal an individual’s playing cards so far as what they suppose is most necessary in a scenario with overly tight constraints.

Juan Diego Rodriguez

Juan and I got here out fairly near the identical selections, as we’ll see in a bit:

font: Typography is a precedence and we get loads of constituent properties with this single shorthand.
padding: Slightly padding makes issues breath and helps with visible separation.
background: One other shorthand with plenty of styling prospects in a tiny bundle.
shade: Extra visible hierarchy.

However he was debating with himself a bit within the course of:

Desirous about switching shade with place-items, since it really works in block parts. grid would wish show, although).

Ryan Trimble

Ryan’s all about that ~~bass~~ construction:

show: This opens up a world of layouts, however most significantly flex.
flex-direction: It’s a good suggestion to think about multi-directional layouts which are simply adjustable with media queries.
width: This helps constrain parts and textual content, in addition to divide up flex containers.
margin: That is for spacing that’s bit extra versatile than hole, whereas additionally permitting us to heart parts simply.

And Ryan couldn’t resist reaching a bit out of bounds:

For automated shade theme help, and no additional CSS properties required:

Danny Schwarz

Each staff wants a wild card:

Quite the opposite I believe I’d select font, padding, and shade. I wouldn’t even select a 4th.

font: This isn’t an enormous shock should you’re conversant in Danny’s writing.
padding: Thus far, Ryan’s the one one to eschew padding as a core alternative!
shade: Too unhealthy this isn’t baked proper into font!

I’ll additionally level out that Danny quickly questioned his determination to make use of all 4 selections:

I supposed we’d want width to attain a superb line size.

Sunkanmi Fafowora

That is the primary listing to lean squarely into CSS Grid, permitting the grid shorthand to take up a alternative in favor of getting a whole format system:

font: This can be a in style one, proper?
show: Makes grid accessible
grid: Required for this show method
shade: For sprinkling in textual content shade the place it would assist

I really like that Ryan and Sunkanmi are considering when it comes to construction, albeit in very alternative ways for various causes!

Zell Liew

In Zell’s personal phrases: “Actually actually plain and easy website right here.”

font: Content material continues to be a very powerful piece of data.
max-width: Ensures kind measure is okay.
margin: Lets me mess around with spacing.
shade: This ensures there’s no pure black/white distinction that hurts the eyes. I’d love for background as nicely, however we solely have 4 selections.

However there’s a bit little bit of nuance in these selections, as he explains: “However I’d swap up shade for background on websites with extra advanced data that requires correct sectioning. In that case I’d additionally swap margin with padding.”

Amit Sheen

Getting straight to Amit’s alternatives:

font
shade
background
color-scheme

The alternatives are largely pushed by desirous to fight default person agent types:

The factor is, if we solely have 4 properties, we find yourself relying closely on the person brokers, and the one factor I’d actually wish to change is the fonts. However whereas we’re at it, let’s add some shade management. I’m unsure how a lot I’d truly use them, however it might be good to have them accessible.

Geoff Graham

Alright, I’m not fairly as thrilling now that you simply’ve seen everybody else’s selections. You’ll see loads of overlap right here:

font: A shorthand for a whopping SEVEN properties for massaging textual content types.
shade: Looks as if this might are available in tremendous helpful for establishing a visible hierarchy and distinguishing one factor from one other.
padding: I can’t stay and not using a little respiration room between a component’s content material field and its interior edge.
color-scheme: Good minimal theming that’ll work properly alongside shade and help the light-dark() perform.

Clearly, I’m all in on typography. That might be an excellent factor or it may actually constrain me in terms of laying issues out. I actually needed to struggle the urge to make use of show as a result of I at all times discover it extremely helpful for laying issues out side-by-side that wouldn’t in any other case be potential with block-level parts.