A simple shift to better understand CSS

Key Takeaways

the big mental model shift that I try to encourage people to have is to see CSS not as a collection of properties but as a collection of layout modes so like rather than thinking and this is how I used to treat CSS like you go through it property by property like I'm going to understand how background color works then how display works then how Flex grow works but really you should see it as like a bunch of mini languages embedded within CSS so you have fla which is the default and then you have flexbox and grid and multicol and all these sort of systems are they have shared things like background color works the same in all of them uh but they each decide how to implement each property so like the example that I use of this in the course is the width property that you think width is a pretty static thing like it's width 50% uh but the way that works is different in flow layout and flexbox right in flow layout if you set with 2,000 pixels you're going to get something that's 2,000 pixels wide like it's pretty much guaranteed like maybe there are some cases where that's not true uh but even if that means it has to like blow outside of its container uh that's what it's going to do because that's what you told it but flexbox takes that same property and implements it differently so when flexbox you're setting what you want the size to be right the hypothetical size but then flexbox uses that in its calculations and if there isn't 2,000 pixels it's going to shrink it down to fit because flexbox is all about flexibility