CSS Pitfalls

[00:00:00]
>> Mike: It makes sense to start this story with the pitfalls of CSS, right? So why do we not just use the thing the browser already understands, CSS? Well, first off, CSS programming, you're working in a world of globals, right? You have no ability to protect yourself from believing rules and to styling unintended things.

[00:00:28]
And this is something that like the whole problem is on us as developers. Right? To stay as organized as we possibly can, to sort of keep things scoped just the right way so that we don't have unintended consequences as we build our styles out. At least, in the traditional context, CSS does not have variables.

[00:00:51]
Future generations of CSS may have variables, and there may be experimental things that you can turn on in certain browsers today. But you need to support browsers today that don't have the capability of doing this. And this is a big part of any kind of theming or any kind of customization.

[00:01:13]
The ability to toggle between like a light style or a dark style of a particular site. That whole could benefit from being able to perimeterize some of our styles, to express it in terms of a couple colors and a couple widths, and so on. CSS is not composable in of itself.

[00:01:34]
Meaning that we have to go into the HTML and apply a variety of classes in order to get a composition. Right? In order to say this text field is both Left aligned and it's caps. It's all caps. That might be two classes that we have to apply. But the CSS rules to themselves, we have to be fairly explicit and oftentimes, redundant as we define those over and over.

[00:02:07]
And in terms of modularity primitives, when we get into talking about how import works because CSS was not designed for the kinds of rich applications we've built today. Two concepts are connected that really shouldn't be. And this concepts are how do you break your files up as a developer Into something manageable versus what is the browser consume.

[00:02:33]
So we have this concept of importing another style sheet from within the style sheet. But that involves going in fact in search a new file for the browser and ion CSS this is really the only construct that we have that gives us the ability to break our styles up into multiple files.

[00:02:52]
Finally, over time, because we're so limited in what we can do, your styles are the part of your app that starts to get really unmanageable, irreversibly so, where you find you're in a bad spot and you've made some short sighted decisions to get that product launch out, but now, it's sort of a very brittle area of where as soon as you touch something, you can have unintended ramifications elsewhere.

[00:03:21]
So that's what I call beating into submission development. And this is where you get a bunch of exclamation mark importance and negative margins. And people are just wrestling against this thing to try to get the stuff to look the way they want it to look, but not doing so with intent to design it that way.

[00:03:42]
They're just sort of like hitting it until it's sort of in the right spot. And that, over time, can end up with the situation where you change one rule, and then all of a sudden your whole site shuffles around. And that's not a fun place to be in.

[00:03:58]
So I hope to help provide some guidance today, as to how to at least put that off further into the future, if not avoid it entirely. So let's begin with my favorite collection of CSS memes, I figured I'd get these out of the way at the beginning, otherwise, I'll be tempted to litter them through out the talk, and we'll end up going back and forth.

[00:04:24]
My favorite here is this Reddit thread of me trying to learn CSS where we end up with text that is formatted and going off the screen. So.