Understanding the strange complexity of CSS and the Web
- CSS is an incredible technology and a masterclass in engineering
- It highlights the complex decision-making and tradeoffs that go into designing and evolving web technologies.
- There are so many tradeoffs at play in the web platform and CSS. I think it's a great lens for understanding hard engineering problems and imperfect but amazingly effective solutions.
- CSS is kinda weird and kinda hard
- It tricks us into thinking it’s simple but the moment we try to go complex with it we run into a brick wall.
- CSS is hard because we have no control over the output
- We have to tell the browser our intended output and then depending on a tonne of variables it will do the best it can to give that to the user.
- But the user could be on a tonne of different devices, with different screen sizes, resolutions, orientations, different color gamuts, different browsers, different browser settings, different operating systems and more.
- With all that in play, we can’t have control over the output, the user does.
- Other languages work more on absolutes, you tell it to do a think and it does it or, of course, it fails. CSS doesn’t fail, if the browser doesn’t understand a line of CSS, it just skips it and keeps on going with the rest.
- When you write CSS, you have to face the webbiness of the web.
- To be effective with it you have to understand the web; why it is the way it is and the decisions that were taken to make it that way.
- How can we keep up with all these variables that our CSS will have to be viewed on?
- Well, part of it is to anticipate them, we know people will use small screens and large screens and everything in between, so we have to test on small screens and large screens and everything in between.
- Avoid absolutes, the web is made to be dynamic, so we shouldn’t constrain elements any more than we have to. If we declare a width in pixels and a height in pixels in many cases we’ve constrained the element two much and it will not “flow” in the normal way as other elements. If the screen is smaller than those fixed dimensions it will overflow and cause a scroll.
- Anticipating all these things can be hard, but it’s only hard because we don’t know all the tools at our disposal and we don’t understand why things are behaving the way they are.
- Sometimes, in a bid to fix things, we keep layering bandaids on top of bandaids on top of bandaids trying to stop the bleeding but the bandaids get in each other’s way and cause new problems and it becomes a challenge of whack-a-mole. (Fustrating programming GIF)
- The solution here is to understand the design of CSS and why things happen the way they happen. When we do this, we can plan ahead, we can look at our designs and choose the best tool for the job and understand how it’s going to work with other parts of the design.
- When you encounter a problem, before you apply a bandaid, stop and think about why. Why is the issue happening in the first place. Why is something not adapting to the screen properly? Is your approach even the correct/best way to approach the problem you’re solving?
- We need to go beyond the basics of CSS and figure out how it works in the first place.
--–