For a recent episode of wireframe, I borrowed some questions from another person’s AMA. Overall, good questions but one of them stuck out to me where I wanted to give it more thought:
You are asked to build a website but you can use only 4 CSS properties, what are those?
It’s clear to me that you’d have to think strategically about this. While I’d say that something like display is super powerful, it also often requires additional properties to make things behave afterward. So, the key is to think of properties that stand on their own and can have some significant impact once used. Additionally, it’s pretty clear what we’re going to be working on is a Craiglist-like design since I can’t use a lot of properties for aesthetic purposes.
Without further ado, here’s my picks:
overflow-wrap
This might be a property you aren’t using but I truly believe it should be in people’s resets. Specifically overflow-wrap: break-word. This ensures that long text such as URLs don’t break out of their containers. While it’s possible you might not need it on your site today, you’ll probably want to have it for the future.
max-width
The prime example I’m thinking of is <img> elements rendering as larger than their container. Setting max-width: 100% on these, along with other similar elements will help ensure that they don’t break layouts. This would also be helpful to keep long lines of text from occuring for readability. Even if the content itself might not be centered nicely on the page without something like margin-inline: auto.
margin
Speaking of margin, I’m adding it to my list. Between the ability to horizontally center content and some of the egregious values set in browser defaults, having this will really clean up the overall hierarchy and presentation of a page. The use of the shorthand values will help here so that I can get horizontal centering with margin: 0 auto and fix defaults with margin: 0 0 8px.
scroll-behavior
The reason I’m adding this, specifically scroll-behavior: smooth, is for hash routing on links. For example, when I’m reading working group specifications and click a link, it often jumps somewhere making it really hard to know if I was navigated to another page or where this next section is relative to the old section I was just looking at. Smoothly scrolling after clicking the link makes the relationship more clear. Importantly, this would need to be inside of a @media (prefers-reduced-motion) rule to be ignored for folks who are sensitive to motion. So, it’s possible my fourth rule could be wasted because of this.
I made a quick sample page to demonstrate the usage.
What are your top 4? 🤔