BEM Introduction

[00:00:00]
>> Mike North: Next we're gonna zoom way back up. So we've learned a lot about SASS so far, and now comes the section we're all looking forward to. [LAUGH] We're going to talk a little bit about BEM. So here at a high level is what BEM is all about. It involves defining three types of CSS classes.

[00:00:22]
The first is a block. And how you know something is a block is that it is a standalone entity in and of itself. In frontend development, this would probably be a component, right? This would be a component. Here are examples like a header, the container that we've been dealing with, wherewe have sort of layout expressed within that container.

[00:00:46]
A menu which would have menu items within it, a checkbox, input, button and so on. So elements are things that exist within the block that don't really have much meaning on their own. So if we have a right-click menu, one of those menu items that doesn't really make sense to use like in the context of other things.

[00:01:08]
You wouldn't wanna use that with a button or to put it, you might have something that looks similar and like a drop-down, but that is sort of an internal concept of the right-click menu. So here we've got a menu-item, a list-item, a caption underneath a checkbox, the title piece of the header component.

[00:01:29]
These are sort of component internals. Those are what elements end up being. And then finally we've got modifiers. We've been using these today. Any of those little classes that you add to buttons to change their colors, those are great examples of a modifier. And that right-nav class that we added to the container, that's another great example of a modifier.

[00:01:49]
Where you kind of decorate a component with this thing, and it's almost a flag that alters the behavior or the look and feel in some way. And so here, examples are whether something's highlighted or checked, sizes and colors. These are all fair game. Oftentimes, when we're dealing with pseudo selectors, like colon disabled or colon hover or colon visited for links, they fit into the category of modifiers.

[00:02:19]
And that's why they're broken out as sort of a separate thing from a link or a button. So this is sort of building on that same precedent that has been set in buttons and links. So here's an example of how we can look at different UI elements and identify whether things are blocks or elements or modifiers.

[00:02:43]
So you see here we've got a menu, with menu elements in it. The menu would be the whole collection of four things. And those menu elements don't really have much meaning outside the context of the containing menu. Likewise, we've got a button down here with a theme of green.

[00:02:59]
That should make total sense to you. We've been coloring buttons all day. We've got a big imput that is just a decorated version of the same component that is shown right underneath the tab of the browser there in the nav bar. So like deciding when something should be internals of a component or broken out into its own freestanding component, some experience and judgment and foresight as to what future use cases might involve is required.

[00:03:30]
So to some degree there's judgment as to whether like its composability would be something you really need within the component or whether it should be just sort of a something you drop in place and it is opaque from the outside world. And you just have nothing, no control over exactly what goes on in the inside.

[00:03:54]
So here's an example of how we might take something and make it into a how we might decide how to start style this using BEM. So we've got what I am calling a text field. And you'll notice that we've got a label thing to the left with his first name.

[00:04:15]
We've got some error text underneath the input, and then of course, there's the input itself. So here is how we might end up defining this thing. You'll notice that when we define elements inside the block, so the block just has a traditional CSS class. You could have a dash in there if you wanted.

[00:04:37]
That would be the convention. When you have double underscores, that indicates that you're defining an element inside a block. And double dashes will typically indicate that you're defining a modifier. And you'll notice that we're reusing this text field name over and over. And this is to ensure that the elements inside this block do not collide with elements inside other blocks.

[00:05:01]
If I had other labels for other things, this is gonna have a totally different class name than those other things because this is for the text field. So SASS and the parent selector make this really easy because we can just use the parent selector for this. Followed by __ and then the name of the element inside the block.

[00:05:24]
We can just nest it like you see down here, which is really nice. For modifiers, so we can do something similar, there's a little caveat here, in that as we saw before, these classes will end up being broken out of the context of, actually, this is not correct, sorry.

[00:05:49]
I'm gonna have to alter this real quickly. All right, here we go. This is correct. The Keynote's doing me all kinds of favors here by turning my double dashes between text field and state into a single long dash, but this is the way you should structure this. Here's what was wrong with what I had before.

[00:06:11]
First off, it would have been regarded as a class that exists inside the textfield, right? And you might think, well, wouldn't it be nice if we could just put an ampersand in place of that word textfield. You cannot use the parent selector more than once to define the selector, right, so we could not do end.end-- state-error.

[00:06:36]
If you are okay with these being kind of classes that break out of the context of textfield, there are other ways of doing this. This is how I've seen it before and this is how I advise doing it.