Dealing with the "webiness" of the web

CSS is hard.

It's not broken, counter-intuitive, or stupid. It's just hard.

People falsy assume that it's simple because it has a simple syntax, and then they hate on it because they can't get it to work properly.

One of the reasons CSS is hard because we don’t have total control over the output. We have to tell the browser our intended output, and then depending on a ton of variables, it gives the user the best it can.

When we're writing CSS, we don't know a lot of things:

• The browser that each visitor is using
• The viewports size
• The OS that they are on
• The device that they are on
• The main input device that they are using
• etc.

As Robin Rendle put it in a response to me awhile back, it’s one reason a lot of people coming from a computer science background don’t like CSS. They have to face the “webniness”, or the changing nature and the unknown variables of the web, when writing CSS.

How can we possibly deal with all those unknowns and variables?

Anticipating the variables

I know people are going to use small screens, large screens, and everything in between, so I’m going to test my site in both those situations, as well as the ones in between.

But it's more than just testing it after the fact, it's anticipating those variables from the beginning and taking them into account.

For viewport size, the easiest way to do that is to avoid absolutes as much as possible.

Avoiding absolutes

If I set width: 1000px on a container, it’s locked in. If the screen is smaller than that, it’s going to overflow and cause horizontal scrolling.

Instead, I might set the width using a percentage. Something like this:

.container {
  width: 90%;
  margin: 0 auto;
}

Now I know that my container will grow and shrink with the device width. Awesome.

But then when testing I realize that at large screens, my container is too big! Now I can come in with a max-width and solve that issue.

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

This can all be hard at first, especially when we don’t know all the tools that are available to us, but that’s just like how JavaScript can be hard when we don’t know how to write a loop, for example.

CSS is the same, it becomes hard to solve specific problems when we don’t know all the tools we have at our disposal.

Understanding how it works from the ground up

With CSS people find out about all the cool tools that it has to offer, but they don't have the core skills to be able to use those tools properly.

When this is the case, we can get things to work, but often with messy and fragile solutions.

Take, for instance, an electrician.

Just like an electrician, I can change a light fixture or some other simple operation. But I'm not about to wire a house.

If I did try to wire a house, I bet I could watch some YouTube videos and get things to be connected, but when I go and turn on the power some fuses would probably blow and the house might even burn down.

This is what happens when people try to build a full design when they don't have the fundamental skills in CSS (though it's a lot safer when they screw up).

They have all the tools and they might know how to use them in isolation, but they don't have the core fundamental skills to be able to use them properly.

Just like my wiring would be a complete mess, when you don't have a good understanding of the different tools and fundamentals, your CSS becomes a complete mess.

The layout might work, but it's fragile, and can easily fall apart when some of the variables that we talked about above change.

Relying on pre-made solutions

For a lot of people, that leads them to frameworks like Bootstrap.

The problem then is when you need to make a change or modification that isn't in the tools that framework gives you, it can be a complete nightmare.

As much as things like Bootstrap and Tailwind can help, having a proper understanding of CSS makes it so, rather than relying on those tools, you can leverage them in new ways or avoid using them altogether.

You can start writing CSS with confidence

When people don't have a great understanding of CSS, they like Bootstrap and Tailwind because it can save them a ton of time and frustration.

And yes, it can be frustrating but when you know how it really works, and how it's meant to work, a lot of that goes away.

It means that you run into fewer problems, and when you do run into them, you can figure out the solutions much faster.

You aren't guessing so much, or when you do guess, it's an educated guess where you can go in with a pretty good idea that it'll work... and when it doesn't work you probably know why!

And that’s why I’ve created the course CSS Demystified. It’s not to teach you all the tools at your disposal (there are way too many to cover everything), but it’s to teach you the fundamentals of how CSS works so you can better predict issues before they happen, figure out how to fix them quicker, and how to problem-solve when you run into issues that you are having trouble figuring out.

It's for people who have been writing CSS for a little while but feel like they've hit a bit of a wall now that things have gotten a bit more complicated.

If you'd like to register, the registration period opened today, and will be opened until November 2nd. If you're reading this after the 2nd and are interested, you can sign up for updates, it will be relaunched again in mid-2021.