It’s Time to Fall in Love With CSS (Again)

Hi, I'm Tony Alisea. I've been a developer for over 25 years. I've taught over 350,000 students web fundamentals on my courses on Udemy as well as Pluralsight Teachable. You can find my stuff on my channel on YouTube. You can find links to everything I do, including my courses at TonyAlisea.dev. You can also find help for everything that your dev team does at TheSmithGroup.com.

Now, this course is It's Time to Fall in Love with CSS. Now, this. Now, let's go back in time for a moment to the 90s. Now, there wasn't just CSS as a concept for how you style HTML documents. There was, in fact, a lot of different ideas, different possible standards that have been put out there. But in the end, CSS won. Now, and there's reasons for that. Now, what are some of the reasons? Now, there's reasons that developers loved CSS. People working on websites loved CSS. For example, there was the separation of structure and presentation. HTML and CSS. Now this there was the idea of the cascade. Multiple style sheets could be applied to a single document or multiple rules to a single document, and they would cascade together. To form the final presentation. Now, this things like selectors, the power of selectors being able to select different elements within the document, that power really helped CSS win over the competing concepts. Now, this now this.

So when we think about CSS, then we were looking at styling the DOM holistically. You're looking at the entire document, the entire HTML structure, the entire DOM tree making selections and then styling it. Now, there's things like CSS zen garden where a single HTML file is presented and then people can submit various CSS, various style sheets in order to then. Now, this is that document in a variety of wildly different ways, it showed the power of CSS. Now, this CSS won because of the problems that it solved and how it solved them. But then something happened. Now, this JavaScript developers fell out of love with CSS, the memes started, started talking about how difficult CSS is, how difficult things were to do in it. But why?

Now, this the big part is because of the change when we went from writing our HTML and our CSS to using things like JavaScript frameworks to construct the DOM.

Instead of looking at the DOM holistically, we began instead to think in terms of componentization. Now, everything is a component and a component really is a subtree of the DOM. Now, this is not looking at the whole page presented to the user. Instead, we're thinking about small sub trees and then being able to move those sub trees around within different DOM structures, components, component that component is fundamentally different from looking at the DOM holistically.

So the thing is that JavaScript developers working in JavaScript frameworks that were building the DOM for them, the things they didn't like were the very things that people fell in love with CSS for that separation of structure and presentation. JavaScript developers would say, well, we don't want to spend our time sometimes in JavaScript and sometimes in CSS and sometimes in HTML component cascade. Well, that was a problem because of my components. If I move my component from one container to another container, the cascade rules override and I have to think about what might happen with the CSS on that page. Selectors that required the DOM structure to be consistent. And if I'm making a component and moving it around, then who knows what the final DOM will actually look like?

As a result of the sea change, we went from HTML that might look like this, where we're defining our classes and using them along with our structure, the things becoming popular now like this, where we're just focused on a particular element and just the styles for that element, in some ways doing the opposite of what CSS was intended for, and a negative downside being becoming more focused on what the CSS needs to be. And just adding a div so that I end up getting a component that looks like the prototype. But CSS has continued to grow and to add some really extraordinary features. It's time for the modern JavaScript developer, the modern front end developer to fall in love with CSS. Again, what are some features of modern CSS that works so nicely now? With the componentization of the DOM. Well, let's just look at a few examples. One is CSS nesting. Previously, we might say, well, I have a notification class for my notification component. And then if it's actually a success notification, then I add a secondary class on that. And those are all separated in your CSS rules. But now, with natively supported CSS nesting that is in the browser, in the CSS specification itself, we can show in the way that we write our CSS that all of these rules are connected to each other, that they're part of the same set of rules. Now, it's really just syntactic sugar, meaning it doesn't add anything that couldn't be done before, but it's a much nicer way of writing your CSS, especially when you're writing CSS for a component, when you're writing another feature, cascade layers, the at layer keyword. This allows me to group my different CSS rules and then order them of their own specificity, but not really specificity, but ordering which layer should have higher precedence in the cascade.

That allows me to then import CSS layers under certain circumstances to say, no, I want this layer to be applied in this case, and I know what it's going to override. So no more worrying about will this override that? I can control that with layers.

When you're writing container queries, we need to think about how we've been structuring our queries, our media queries up till now. What we really need is to say, well, we need to respond not to the viewport, but the size of the container, the space available to that portion of the DOM tree. And that's exactly what container queries allow us to do. We can take a container, name it, and then say that under certain circumstances, if the container is of a certain size, then apply this particular CSS rule.

The has pseudo class allows us to select a parent. In this case, for example, we can highlight a form if any of its child input selects or text areas get focus. So not just the form field gets the CSS class, but the parent form gets the class. CSS is more component-friendly than ever and is enabling better UX natively. So JavaScript developer, it's time to fall in love with CSS again.