Utility First CSS & Layers

[00:00:00]
>> So we've got the site that we were talking about earlier here, and we'll kinda go through some of the philosophical basis just to kind of like put some thoughts in our brain to help us like get a sense of how everything works here. I will just mention, like I said for most of what we're doing we're gonna use the playgrounds.

[00:00:24]
I actually made these other two experimental playgrounds here for you to kind of try to remember, basically to play around with Flex boxing grid. And so, there are ways within the tutorials to manipulate and see some of the classes, but also there are two playgrounds for kind of just trying out all of these different ideas and seeing how it changes the layout as well, so there's lots of ways to experiment in this site.

[00:00:50]
And then there are some useful tools, these are all gonna be built into the playgrounds that we're using together in our time here, but I'd kinda wanted to call them out as something that you might also want to take a look at. Which is the, if you use Visual Studio code, there is this Tailwind IntelliSense, which is if you saw the number of those various classes, first of all, it's actually not that many cuz there's a very much easy heuristic to this.

[00:01:16]
But autocomplete is nice, right? And auto sorting of them into to a way so that you don't have to kill your co-workers because you have different opinions is also nice as well. And so we use a lot of the IntelliSense plugin, everyone's team uses as well as the prettier plugin at build time, because it will just put the classes in one sane order and stuff along those lines that makes life really easy.

[00:01:39]
We're gonna get all of that for free today. If you look inside this Tailwind play, if it looks a lot like Monaco, which is the Visual Studio Code Editor it's cuz it is, right? And so we're gonna get all of that stuff for free, but, as you're hacking on your own, if you all those things, then you are able to kinda go and grab those just as easily and have all that ready to rock and roll.

[00:02:07]
Great, so we talked a little bit about what Tailwind was. We've talked a little bit about kind of the various classes we can add to something. And you'll see that there's kind of a heuristic here, right? That we can kinda take advantage of, right? We've got this idea, they're kind of built into a lot of times, if you look at a lot of our colors, it's like, what do you want to change the color of?

[00:02:31]
Like to what color and to what shade, right? And there are things for like you can take a lucky guess what PX and PY are is padding on the left and right and padding on the top and bottom, right? And so it's a lot of this ability font bold, there is not deviating with a bunch of very specific classes versus you know what, even if again, you're watching me scroll along this line you're like that seems like a lot of classes.

[00:02:59]
It is very clear what these classes are, you are also writing the CSS somewhere to begin with, right? And it is a lot clearer what the intention what I'm changing is then, Blog post title, right? And then I pull up the Chrome DevTools, and I'm looking at effectively the same thing to get to the same answers.

[00:03:16]
For me, the ergonomics of actually just being able to see it right then and there has become incredibly powerful. And there's some other things that come with Tailwind, if you need to be convinced on all the other advantages of this utility per CSS, and long blog post like selling the philosophical ideas.

[00:03:41]
And if you need to be convinced, let's be clear what I'm really talking about if your teammates need to be convinced, right? Then you can just inundate them with blog posts, and that's all here for you as well. There's a tweet for that in a lot of cases.

[00:03:57]
Cool, so Tailwind comes this idea of layers. And what's kinda cool about this is layers are not a Tailwind thing, right? Layers are kind of a modern CSS thing. They've got basic wide adoption at this point. And layers are basically, a way to encapsulate sets of styles, right?

[00:04:18]
So you don't necessarily have to always fight with specificity, right? Within a given layer, specificity applies and all the rules of specificity are there. But then layers work in sequential order, right? So even if a subsequent layer with a lower specificity has a style that overrides it, the later one still wins, and you're not throwing importance everywhere, or tryna come up with gnarly selectors that just happen to have more specificity.

[00:04:46]
So that first question of, if I don't super know, CSS is that gonna hurt me? Well, the nice part is that between a lot of the modern changes in CSS, as well as the way that Tailwind takes advantage of them, some of the gnarlier parts of CSS are taking care of you and you don't necessarily have to think about it.

[00:05:10]
We're gonna look at a kinda Tailwind CSS in a second, but I kinda wanted to start with it at very high level first, which is Tailwind ships with three layers, right? The first one is the base layer, and this is Tailwind effectively ships with a CSS reset, called preflight.

[00:05:28]
And it is, it is an aggressive CSS reset, I will say, you will need to style some of the basic elements, and we'll kinda look at how to do that as one of the first things that we do. Then there are components, so that question I got earlier, which is, well, if I want to make some of these higher order things, right?

[00:05:50]
Where would I go about doing that? That's where you have the components layer four. And again, when we get into it, there's a certain amount of, do you really need to, I again, have a softer position on that than I think, maybe the creators do. And then utilities are like, one thing's like setting a margin, or the gap between two columns or something along those lines.

[00:06:13]
And those layers obviously are set up so that obviously the little utilities those one-off things you need to do are in that later layer, yeah, I said that. And so regardless of specificity, they have a higher precedence over the base style, so you spend less time thinking about this.

[00:06:33]
And you can go in like these layers are set up for you, you can extend any of these layers. But there's some probably some new syntax here, and we will explore it together in the little playground a second, but I kinda want to do the kind of high-level introduction to it as well.

[00:06:49]
Tailwind is like effectively it's installing those three layers, and you can open up any of those layers. That @layer is not Tailwind-specific. Now post CSS is gonna help you, not worry about IE11 or what have you, right? Not that I personally worry about IE11 that much anymore, but it will help you with the translation more So you can use modern CSS, but layers are part of CSS.

[00:07:15]
As I said, but this apply is super interesting, this is actually something provided by Tailwind, right, by declaring this directive. And apply allows you to just basically take any of these utility classes into that question I got the very beginning. Allows you to compose other classes based on this.

[00:07:36]
Instead of having to go in there and then, my custom stuff, I've got to go back to writing regular CSS, you're welcome to write regular CSS. And I'll actually show you how to still take advantage of Tailwind and write regular CSS, or you can basically create either base styles or component styles, or maybe utility styles.

[00:07:55]
The utility style's supposed to be one-off, you're composing them off of other one-offs, it's kinda weird. But it's there for you as well, and you can kinda use this and we'll kinda see that a few times cuz at certain points I'm just gonna do it. And I think, like for me, I always do with like the base styles as well.

[00:08:09]
But we'll see ways to hook into the theme and stuff along those lines, so you don't have to worry about yourself getting out of sync with anything else which will be super cool. You can put together some of these common components that you might use as well, like again, the kinda rule though is like it gets a little bit harder especially if you've got these layers fine, but then if you're also doing a spell component or view component, right?

[00:08:34]
Those get a little bit tricky to figure it out. It is the the way that the purge CSS works and Tailwind, is both beautiful in how rudimentary it is. You know how it works? Just regexes, it is just a regex on your project. It's just looking for all of those class names, and if it finds it, it puts in the bundle, and if it doesn't find it, it doesn't put it in the bundle, that's it.

[00:08:59]
And so, and at one point later we'll kinda configure it in a project as well. And you can create more classes so on and so forth. And so you've got a lot of flexibility, and under the hood, you've got all of CSS, you have an exit door anytime that you want, if you need to do something very specific.

[00:09:17]
But you're also gonna learn that you can actually get to that exit door just using these utility classes as well, and we'll see that as we go along.