Hello Reader,

I’m sure you’ve seen this before.

Most people use it to poke fun at CSS and use it as an example of one of the many problems with CSS.

The thing is, it’s actually an example of how CSS solves a problem the user created.

Most problems we run into don’t happen because CSS is broken or a bad language. They happen because we’re not approaching CSS with the right mindset.

CSS was created and continues to evolve based on a very important principle: the author of the CSS doesn’t control how the content is displayed, the user does.

This makes it very different from other languages because we have to try and style things without all the information.

We don’t know:

• What device the user is on
• The size of their viewport
• What browser are they using
• Whether they’re even using a browser
• Their input device (mouse, keyboard, touch, voice)
• And the list goes on

CSS was designed for this uncertainty. It’s not a bug, it’s the entire point.

That’s why we have the CSS is Awesome meme. The text is overflowing outside of the box. People laugh and say “there goes CSS being weird again” and point to it as a problem with the language, rather than realizing if that were to happen, it's because they declared a fixed width on the box.

In other words, it would have worked fine, but they wrote CSS that got in the way and caused a problem.

If a user visited a page on their phone and the font size was too big (or there is a long word that's causing a problem), would it be better if the title was cut off and we are missing half the word, or would it be better if there was some overflow and the user could scroll to the side to be able to read it all?

Ideally, the text wouldn’t overflow at all, but if it does, we wrote the CSS that caused it. CSS just tried to work around our mistake.

Our job, when writing CSS (whether that’s regular CSS or using something like Tailwind, or maybe a preprocessor like SCSS), is to consider that someone might be on a small or very big viewport, and write CSS that can adapt to those situations, along with everything in between.

We need to make accommodations in our layouts and styles, not because CSS is broken, but because the web is a medium of unknowns, and CSS is the only language that has to deal with that head-on.

We can’t hard-code things because CSS doesn’t exist in a hard-coded world. It lives in a world of variables we can’t control.

But we can learn to work with it instead of against it. More on that tomorrow.

Cheers,
Kevin

​Unsubscribe · Preferences​
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246