Design Systems with React & Storybook

Design Systems with React & Storybook CSS Naming Architectures & Preprocessors

Learning Paths:
Check out a free preview of the full Design Systems with React & Storybook course:
The "CSS Naming Architectures & Preprocessors" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:

Emma reviews CSS naming architectures, and explains that these methods are not cure alls, and do not prevent leaked styling. Preprocessors and nesting are also discussed in this section.

Get Unlimited Access Now

Transcript from the "CSS Naming Architectures & Preprocessors" Lesson

[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.