CSS Naming Architectures & Preprocessors

[00:00:00]
>> There's a lot of ways that you can write CSS. And one of the ways that people tried to combat this is with CSS naming architectures. You might have heard of bem, it's a block element modifier which we can see here. Naming architectures were kind of created to superficially scope our styles, but they don't actually prevent styles from leaking into elements that we don't want them to be styled on.

[00:00:22]
So we can see here this block element modifier type of styling. So those two underscores differentiate the block and the element. So the block is the shopping cart and the element is the item within that. A modifier you would see two hyphens, and this would be shopping cart items selected or shopping cart item disabled.

[00:00:41]
It's just kind of like a modifier, for example. But again this doesn't prevent leaked styling. So technically if this is styling all of these shopping cart items, maybe their color is gonna be red. Maybe there's a style somewhere else that's actually influencing, or yeah, maybe it's actually styling this list item and we don't know where that's coming from.

[00:01:01]
So that's problematic. And this is where pre-processors came in. This was really a great, great tool for a long time. You've probably heard of SAS or LES. These are pre-processors and these provide a bunch of capabilities, like nesting. So we can now select our shopping cart, and it plays very nicely with this block element modifier naming architecture.

[00:01:22]
We can just use this ampersand, two underscores to select the element, and the two hyphens to select the modifier. So at this point, our styles are scoping. It's really, really nice. And they allow us to create mixins or functions that can be applied to our styles in all of this.