CSS Variables, Flexbox and CSS Grid: When to Use Them

- so David, now down to the fourth video, right? (laughing) we did a few videos before about, we talked about like CSS in general animations and why you use them. And then the flip technique to make animations run on GPU, you can check the videos for that, and also the final state machine for modeling transitions. And making sure that you don't have some kind of weird transitions between states that don't even exist. Now, I want to dig deeper into something like a bit more basic, but it's still very important. CSS variables. - yeah. - so first, what are CSS variables? And here we are talking about CSS variables, and then we can do a contrast with other things like size variables and something like that. - sure, so CSS variables are also known as CSS custom properties. And that's exactly what they are. Instead of just having a normal property defined, you would define two dashes, and then whatever property you want.

And basically CSS variables, which I like to call them, it's just easier that way. Yeah, you could use them where you would use normal CSS values in a rule set where you could just define custom styles. For example, you could define a color, or a size or any other valid value in CSS and just use them anywhere, - just any value. - Hmm-hmm. - right? And how can we use and where are they interesting? Why are they interesting? - well take theme. For instance, let's say that you want to provide both a light mode and a dark mode on your websites. So you might have a CSS variable for foreground color and a CSS variable for background-color that you define on the route. So that would be colin routes, or you could define on HTML or body but typically the convention is to use roots and so we can say foreground is black background is white.

And then anywhere, we could just put color var and then double dash foreground color, and use that same for background. And then if we need to provide a toggle for switching to dark mode, now we could change just that one variable, we could change foreground color to white background color to black. And that's gonna change everywhere where that CSS variable is used. Well, it's inherited, so it's top down. - right. (clears throat) do you find other examples like more complex examples of using CSS variables where they really shine? - Oh, sure. So before we had CSS variables, if you wanted to do something like a dynamic animation on the property, similar to what GSAP or other animation libraries would do, you would have to change the style directly of any elements that you want to animate. And what that meant is you had to have a reference to every single element that needed to move and change position and that became problematic because if the element disappeared, or if you had a new elements come in, now you had to grab a reference to that, and make sure that was being animated as well.

Play from 0:00

With CSS variables, instead of that, all you have to do is set the CSS variable on some elements or some container or something. And all of the elements that use that CSS variable are going to get that dynamic value. - and so you animate the variable itself. - you get me-- - the value of the variable. - just the variable. - yeah. - Oh nice. So it's very interesting for an animations then. - it's very interesting and very flexible. - so even like, maybe I'm saying nonsense here. But if you're moving from the light mode to the dark mode, you can animate that change as well. - sure, you can animate that there's also similar libraries where I forget what it's called it some scrolling library where basically, you could put in a CSS variable, the scroll position, like how far up or down you are on the page, and then you can use that CSS variable anywhere.

So you can even do scroll based animations just based on that little CSS variable. - nice. Nice. And how is that different from what we had in the past was size variables and stuff like that. - so with Saas variables, those are calculated and compiled. Before this, the style sheet goes on the page. So they're very useful for when you have repeating styles. But at the end of the day, if you have like a variable that's 13 pixels, that's just going to be hard coded as 13 pixels all throughout your style sheet. Whereas if you have a CSS variable, now it's dynamic, you could change it at any time using JavaScript. - nice. So basically, the other variables like they are just finding place basically. - yeah. - so they removed the application, which is nice. But they are not dynamic. So basically, you can animate them. - exactly. - and that's that's a huge difference, right? - yeah. And that's why a lot of people get them confused with SaaS variables, and they say, "why do we need CSS variables when we have SaaS or less "or stylist variables, but they are different." - very different because they exist in runtime.

Play from 3:00

They exist after you compile them. They still there. - right. - very nice. There's another question that I wanted to also to ask you about, since we are like clarifying these kind of concepts. There is a new concept in I mean, new, it's not new, (laughs) but people are more talking about it is CSS grid. - yeah. And people were so enthusiastic about Flexbox, and then CSS grid and came and people maybe are sometimes confusing the use of one or the other, they're very different creatures, very different properties. - they are, they are. - they can be used in very different conditions. - you can think of it as a Venn diagram like, you have a set of things that you would definitely use Flexbox for, you would definitely use grid for and then some things in the middle where you might use one or both, but with grid, I like to think of it as a rigid structure.

So of course, it could be a little bit flexible, but it's when you know exactly how many rows you have, or exactly how many columns you're going to have, or the constant is predictable, and you want it in a very predictable way. Flexbox is more for when you have a dynamic number of items where you don't know how many are going to be in there. So for example, if you want them all nicely censored or aligned in a certain way, depending on how many there are, you would use Flexbox. But grid, if you have a very specific this needs to be the sidebar, this needs to be the header, this needs to be the body, then that's what you would use grid for. - so for instance, if I have like a display in a section of our website, some kind of cards, there will be more Flexbox - yes, cards would be Flexbox for sure. But the container for where those cards lie within the overall layout that might be CSS grid. - now maybe this is now a middle case where we're like we're in the middle between both.

Now if you know these, there are these on the websites these kind of sections where you have text and image, right, left, right, left, right, left and takes a swipe left, right. What would you use for that? - so you're talking about, like the typical media box design where you have like a picture, and then you have - some text. - yeah. So before, I mean, I remember when you would use float, allowed to do that and all that. - yeah and floats - and then you might use Flexbox, as well to handle that where you could just say, and that works for many use cases. But in my opinion, CSS grid would be a better choice, because then you could define this image should to take up exactly this space. And the text should take up this space over here. And another thing, another big difference is that with CSS grid, you have what's called grid gap. So you could define a gap between the image. - nice yeah. - and the text. Before, with Flexbox or floats or anything like that, you would have to put a margin somewhere.

And the question becomes, where does that margin go? Does it go in the image, does going to text. - yeah. - and CSS grid removes that doubt. It's like it doesn't go on any of them. It's part of the grid. - it's the part of the grid is a gap between them. And it is guaranteed. And you can change it easily if you choose to. - exactly. - it's all right. Do you have other examples where like it's a, it's unclear if it's the CSS grid that should be used? Or the Flexbox? Can you think of other things where like it might be people are confusing the two? - I mean, that in pretty much any instance where you would think to use Flexbox, or grid is going to be a little bit confusing, maybe navigation items, but you could have so many different navigation items. And so that's why you would probably use Flexbox for that. So I would just say, use grid for the bigger layout items use Flexbox for the like, the dynamic items - and dynamic items. - yeah, - so if I again, you said card are some things where you need to scroll that's obviously a Flexbox right? - right. - yeah.

But then, but I thought maybe there are some interesting properties about Flexbox that you can easy to invert things like if you want to invert the order, and you can relate to me with a content, then Flexbox is not really nice for that. - right. - what is the greatest bit to reject - greatest reject, but you can also change the order of things. And it's sort of like a two dimensional way-- - how do you do that? of sort of doing it? Well, when you have an art like, let's say that you define a display grid on an elements. When you define an element should be here or here, it doesn't necessarily need to be in the order that it lies in the DOM. Instead, you could say, whereas with Flexbox, you would have order one, order two you could change the order of things with grid, you could say, put this on this row in this column and make it stretch to here so you have more precise control. - so it's a lot precise control - right.

And so that's the way. - what you said in the beginning. - yeah yeah. And so that's a major difference between Flexbox and grid too. Think of Flexbox as one dimensional, either column or row. Grid, it's two dimensional. - I like it, I like that. Okay, very interesting. Thank you very much for explaining that. I hope it clarifies things for you. - yeah - thank you.

Play from 5:00