#105: The Beginner’s Guide to CSS BEM

Hey, everybody, this is the introduction- the series premiere- season premiere? That’s the way you say that. This is the season premiere of season five of the Drunken UX podcast. Welcome to the show. Today we’re going to be talking about how you get into CSS BEM. Ladies and gentlemen, I am your host, Michael Fienen.

I’m doing darn tootin. Well, we are recording this of course before the start of the new year. And I don’t know why I always go to the weather. But Kansas is always an interesting bag of like, weird weather. And it was Yeah. 70 on Christmas.

We’re Yeah, we’re a little ahead. I got Yes, that’s

I went for a walk in a T shirt with no jacket. Nothing like hat pans, obviously. But it’s like man, I’m How do you go for a walk like that in the end of December, and not need gloves and all of that. So I’m not saying climate change is real. But I am saying and this would be weird right now.

Ladies and gentlemen, if you’re enjoying the drunken UX podcast, be sure to run by our sponsors over at Tella. Tella is a premier screen recording software platform SAS, all of those things. You just jump in Chrome jump in Firefox, it does it right in your browser, set up a free account, and you can record your screen so that you can do demonstrations for clients or customers.

You can show things off to your followers, or create documentation or whatever is peeking your interest. They give you a real fast, easy way to record what’s going on in your screen, combine it with any kind of video audio and do it in a way that looks good, feels good. And makes it easy to share that information. If you want to go get a free account and try them out. Go to tesla.com/ducks That’s te e ll a.com/d. U X.

It is early morning for change. Aaron and I are on vacation we said you know what? We got two holidays let’s let’s string together. 10 days off. So at this early hour, believe it or not, I’m not Scotch in it up. Good old coffee brother. Yeah, same is the drink. I’m drunk on caffeine and energy. I’m drinking

My cat is used to me being in here to work at this hour. And she has decided to curl up on my lap as this is a normal thing.

am literally stuck here for the rest of the morning. At this point. She’s like, Oh, no, you’re you’re working until lunch. i You don’t need to get up now. So she is also she’s our special guest star for this episode. So yeah, we’ve got a topic for you today, we’re gonna get into some stuff. And we’ve got a few of these lined up for the season where we’re gonna get into like, just like how do you do some things like what are these words meaning.

And so to kick off season five, we’re going to do a beginner’s guide to something called CSS BEM. You’ve heard this very recently, because we mentioned that it was episode 13 a disconnected functional CSS of my wretchedness. For those of you that feel like that title is very confusing. There was a brief period at the start of season one where I was trying to do song lyric puns as all of our titles. That did not I’m not good at that. So we

If I didn’t make it 26 episodes I don’t think before Oh, no, it doesn’t. Because I did I had to dig on some of those, like, make a title that made any amount of sense. And frequently it didn’t. So that is why that is such a weird title. I just want anybody’s ever wondered why you were there Season One episodes names so strange

you know what you did? Yeah, that’s my shame is the world’s to see I’m not, I’m not gonna hide from that. Um, so in that episode though, we talked about BEM, we also talked about things like tacky ons, and other patterns that like, we didn’t go like super deep in any of them. But it was this idea of, hey, functional CSS exists. And that’s what BEM is. BEM is something called functional CSS functional CSS framework.

know, works yet, things like BEM and Tachyon. It’s not malfunctioning, or or was it OOCSS, and some of these. They are functional CSS frameworks, sometimes you’ll hear them referred to as just CSS methodologies. CSS is very opinionated. Right. And so these methodologies, these vocabularies give us a way to write CSS that gives it form, so to speak, that gives it opinions.

Okay, that’s so that when you come back, oh, in six months, I suppose you like there’s an organization to it. That makes some amount of sense, right? You can, of course, write CSS, the vanilla way, I’m going to give this a class, I’m going to create a selector that is ID header, class menu.

you can nest those selectors, you know, the, the the CSS, the C and CSS means cascading. So the notion being that you can create these selectors that can dribble bits of design down its chain, this is good. And this is not good. It’s kind of one of those things where and what you’ll see as we start talking about BEM, BEM, actually, floor goes, a lot of the Cascade part of this discussion.

And that will feel weird to a lot of people because it’s like, well, the whole point in CSS is that you utilize this cascade. And what we have discovered in the intervening years of CSS decades of CSS is that the cascade can work with you and work very much against you. And so these methodologies attempt to solve those problems. And so we don’t, it’s just we don’t have another, you know, what else do you call it in that sense? Yeah, right.

Oh, G is a good word. Functional CSS is a little bit. I don’t love that I prefer methodology. And I really like just calling them vocabularies. Like it gives you a way to talk

Convention conventions a good word. Yeah. Because Bootstrap

And, and with, like, a real framework, take a foundation or a Bootstrap or anything like that, you know, it’s hard to break convention in them. Right, like, right, yeah, it’s right cheering Kenyans that they have baked in like, okay, yeah, you have to use LG call three, you know, whatever, you know, grid X, the these classes that they throw in there and to depart from them is to court chaos, basically. Right?

So, CSS BEM has been around about nine years. It first sort of hit the radar on 2012.

we were starting to think about these things. We were already starting to identify the fact that there are problems with trying to write monolith CSS files Hmm, that you have teams of people working on the place where this came from is a company called Yandex, Yandex, Yandex. And it’s a search engine. Okay, a Russian search engine, I believe.

And they were the ones who kind of sat down and said, you know, what, our CSS is a problem, you know, for our developers for our implementation, we need to find a better way. And so it was early in 2012, they put out a spec, I mean, a spec a, you know, an introduction and outline for a myth, this methodology called BEM, Varvara Stepanova wrote about this over on Smashing Magazine about that same time, and she got into, like, all this background and why they did it and how it worked.

And that was sort of the world’s introduction, then to pay. Here’s this new thing. You guys should all go check it out. We think this is gonna really change how you think about CSS. So So BEM itself is, you know, I say nine years old now. It’s it’s been around a while it’s stuck around really well. One thing I found interesting, though, and I don’t even know what made me think to do this, but I went and plugged it into Google Trends.

Okay. I was just curious. I’m like, you know, I wonder what the growth rate and interest has been in it. And interestingly, it peaked around 2017 and has kind of been declining since then. And it’s not nothing. But it is like, decreasing. I pasted. I’ll throw this in to the the show notes as well. But Aaron can see it in our like, our internal show notes. Yeah, it’s a slight decline.

It’s yeah, there is definitely a downward trend in interest in CSS BEM, on Google. And it makes me wonder why. And I don’t know. I would have been nearly speculating. But four, four years

is it more options? Is it because we have more different ways of doing this? Now, do you think

yet? I’m not sure. Because the the thing that strikes me as odd about it is this we’re not talking about like, a technology or a tool, specifically, this is a methodology and CSS itself has not changed in a way that I feel like would make the the methodology obsolete. In fact, quite the opposite. I think it’s very important to have methodology, maybe not BEM. But I think you need to understand methodologies and pick one to work with in your stuff.

And this, this goes we’ve named Of course, Tachyon is one, there’s what is it? Boom, CSS, there’s SMax. There’s o CSS, object oriented CSS, there’s a CSS like there’s all of these different architectures, blueprints, functional CSS methodologies, all of these words are usable in any of this, but atomic CSS at a CSS as atomic CSS, but

Yeah, okay, great. Yeah. Yeah. And that’s a great way of saying that, like, what would you say 2009. So 12 years ago, 15 years ago.

And we’ll talk about this a little bit here in a bit but the it’s important to note Sass is absolutely not a required tool to use them at all like Sass is just a tool to write CSS is hella easier. Yeah, it can make it Much easier, and I’ll explain how that is. But yeah, you don’t I just wanted to put that out, you know, at the start sure we’re talking about here, you can just open VS code and do it.

So let’s springboard off that quote that you just read. Right? Then you kind of asked this to start with and I got into it. CSS at its heart is very unopinionated. Right, it says you can use IDs, you can use classes, you can use, you know, element selectors, you can use pseudo selectors. You can use attribute selectors, you know, you’ve got all of this power in, and it’s like, use them in a combination.

The problem is that CSS that people will say, well, CSS cascades, that is the sea, that is the point. That is the power. I say CSS leaks. And anybody who’s worked on enough CSS over time has ran into this where yes, it cascades.

And sometimes it cascades in ways that you don’t realize or predict, you know, it’s like, a, an avalanche, so to speak, coming down the mountain where it’s like, yeah, you can see it all coming down the front of the mountain, and no, it’s gonna end up at the bottom. But then you don’t realize, oh, some of it goes off the side, maybe a little bit even falls down the backside. You know,

Specificity is the the part of the equation where CSS CSS said, here’s all your selectors. Use them how you may and here’s the way we calculate specificity. And yeah, on paper that feels like that is all you would need. It’s like, oh, we have an equation we have, you know, and we’ve talked about CSS specificity in past episodes, and how to calculate it. You know, that feels like that would be enough. The problem is, it’s very powerful.

But that power is very unfocused, it can work really well, and it can turn on you in an instant. And I’ll change my avalanche metaphor, think of it a lot like herding sheep with a dog. You know, like, that is a process we have used forever, it works really well, for most farmers are sheep herders, you know, whatever that word, right word is. But at the same time, you are using one animal to corral other animals.

And sometimes animals do not behave as you might expect, and one of those sheep still gets separated from the herd, you know, and you have to deal with that. And sometimes many of those animals will get broken off from the herd, maybe there’s an opening in your fence that you didn’t know about. And they go running out of that instead of through the gate into the other field.

So you end up doing a lot of scope management in CSS

Yeah. Yeah. And we have to like, what is scope management? It’s whatever we say it is, you know, is that using an ID to wrap something is like science. It’s whatever. Yeah, it’s whatever you say it is. The other part of it is that we need these kinds of things. Because on one hand, if it is just you writing CSS for a small project, okay, fine like that.

It is absolutely appropriate to say this project is small enough that it does not need and would not benefit from CSS BEM. So I’m the only one writing it it’s a few 100 lines of CSS, no big deal. But any project where you have multiple devs involved, you know, or you’re building something, somebody else is going to take over down the road or anything like that. I’m going to use this word again. You need the shared vocabulary, because

word opinions? Right? Like, yeah, CSS is unopinionated. And it will not force you into any one opinion, that is a a business decision, a technology decision that you make. And if you don’t make one and you have four developers all touching stuff, you’re gonna end up with four different opinions being used in different parts of your CSS. And so that becomes a huge maintenance problem, especially when those people start leaving over time.

And you have to go back in and figure out why did they nest these selectors? Now I’ve got to use because, right, we have this thing called the important flag, right on on a CSS property, you can do an important and that says, hey, you reset the specificity, do this thing if it matches the selector, right. And it’s kind of anti pattern to use that because it breaks the specificity calculation. And so it can hurt downstream decision making.

I can’t imagine how, but you can do it. And that’s where you end up making those decisions is it’s like, I can’t undo all of the stuff this other developer did in a timely matter, manner. So I’m just going to important all of these rules. And then, in six more months, somebody comes in and has to work on that. And they’re like, why did they important, all of this crap? It’s getting in my way, like, this is where this stuff really starts falling apart.

And if you haven’t ran into it, you will like it will happen. Yeah. So let’s get into this right. So CSS, BEM, we’ve been saying this, BEM, BEM, BEM, what does BEM mean BEM is block element. fire

Yes. Well, no, where it wasn’t the Bulgarians in World War Two that had the molotov factory to fight the Nazis. I think that was Bulgaria. Abuse Romania. I’m gonna say it’s Bulgaria, because then Bulgarian exploding Molotovs There you go. I did it. I probably had to make up some history for that up there was there there. That was the thing, though, there was a factory that did that. So BEM uses this approach.

And they say, so the way you name your classes, when you are doing markup, you do blocks, you do elements, you do modifiers. And I want to go through those sort of individually real fast. What are those mean, when you’re when you’re doing this? So blocks, and each of these, I’ll give you the definition, this comes from get BEM.com, which will be linked in the show notes. Blocks are defined as standalone entities that is meaningful on its own.

So what does that mean, let’s say a pricing table, or maybe a form, maybe

or just a very discreet name as its class, right? Like

So and to what you just mentioned, right? There’s this concept of namespacing blocks. And this is, again, this is a choice you can make, you don’t have to do it. Harry Roberts wrote about this back in 2015, again, link in the show notes. And he recommends quite a few different ways of namespacing this and how you would do this in BEM is you would have a class name something like c dash person.

And what that would mean is a card for a person or like you said, maybe a component C, C can be component, C can be card, depending on your again, your vocabulary, you’re using third component, the notion is you would have a bunch of things that would be c dash something. And those would be your cards or your components that be the c dash Person C, C, C, like hero,

are very basic. Again, this is just a convention that human beings are putting out there, you can make your own. I’ve seen W for a wrapper, like w dash section for a section wrapper. Maybe you’ve got parts of your page that go from white to gray to blue, like background colors. So you might have w dash sections for each of those wrappers to change those Colors.

Well, we’ll talk about those two here in just a second.

took that 2015. We were not using data attributes to the extent Yeah, that we do Now certainly,

that there’s another one to L L is used a lot as a layout. So you might have L dash to column that okay to column layout. So, and you got also to some of the variants that break this one letter pattern is has J S, those are some make up your own like these are things again, make up what makes sense for you, or us, none of them. None of that is required or enforced, because this is what makes sense. For the pattern.

Yeah, elements, ie, an element is a part of a block that has no standalone meaning as semantically tied to its block. So that might be so using like this idea of a pricing table. A price tag would be an element of that pricing table, or maybe the plan name, you know, if it’s

something that is semantically relevant, and opinionated, you know, let’s say a, you know, if you’re building a little blog excerpt panel, a blog card, so c dash, blog, Archer,

Let’s say that I’m going to I’m going to stick with what I was just saying. Let’s say you’re making a block, that is like a little card to show blog excerpt, right? Sure. And you’re gonna show three of those across, you know, a page section. Yeah, that may have two images on it, like two literal image tags. Maybe at the top, you show a featured image.

And in the lower right corner, you show a little round image of the author’s head, you know, their avatar, okay, so that block has to literal image IMG, tags, right? Right, literal image elements as defined by HTML.

But in BEM, they you would call those elements, but one would be blog underscore, underscore, featured image. And the other one would be blog underscore, underscore, author avatar,

when you get to this first, this sort of first order of granularity that is separated by two underscores, we’re gonna as we get into this conversation, we’re going to be saying underscore, underscore and dash dash a lot. So yeah, forgive me ahead of time on that.

And I know this will be, you know, some of this may be a little hard to visualize as we’re talking about it. The articles we have linked in the show notes have tons of examples of all of this, and seeing it in use will really put it together pretty heavily. So I’ll say that here, the last section is modifiers. So a modifier is a flag on a block or element, use them to change appearance or behavior.

So maybe on your your pricing table, you have one of the elements is the featured plan, quote, unquote, or maybe on a forum, you have an error to field right, so it’s dash dash errored, use two dashes for any modifier applying to a block or an element. So you could have block underscore underscore element dash dash modifier can have it on any given selector. So that’s the basic structure block element modifier, one of each, we’ll talk about that in a second.

And everything in your markup gets a class now, everything when you when you are creating a component, every item in that should get a class, um, even things you’re not necessarily styling. Okay, the reason for this is a ensures you maintain semantic meaning in your markup. So when you look back at that HTML code, you know what everything is. But also, it ensures that people downstream of you can target those elements with bem selectors and style them down the road.

Maybe, maybe you’re not the one styling it now. But in six months, you want to change something or add something or whatever, then that class is already there ready to go ready to be styled. So it’s, you know, it’s about sort of completeness of case. I know that will feel like and when you look at some examples that use BEM, it feels a bit like class soup. Like my god, there are so many classes on all this stuff.

I think it’s one of the better methodologies compared to like an atomic CSS or a Tachyon, which really turned into tag soup like literal genuine tag soup. Because there’s just there’s a tag for every single thing. And it’s like, everything’s a utility class, basically.

well, Tachyon, though also, I think, to me qualifies more as an actual framework. It’s not a method.

isn’t opinionated framework begin with, but anything once you’ve deployed it, like if you’re using atomic CSS, and that works for you, that’s your framework that like it is both a methodology, but it becomes a framework as you actually codify that process for your development. So let’s see, Oh, and here’s the other part. While it’s easy to sit down and say, Oh, my God, this makes my HTML look terrible. It’s class soup, whatever.

It’s not actually detrimental to HTML really, in any way. It doesn’t hurt payload size, text compresses, well, you know, everything gets G zipped, usually by the server anyway. Like, it’s not actually impacting anything, but the aesthetics. And even then, when you have good semantic classing, even if there’s a lot of it.

Personal opinion doesn’t look that bad, because you can look at that source view that source and know it as readable thing is, yeah, it’s human readable. And that’s the thing about BEM, BEM, should be human readable.

And go back to what we said earlier, there are plenty of projects where that makes perfect sense to

a large site large application. That’s just not a feasible goal to have really true In most cases, and there will be plenty of people who say, Well, just class the parent object in class, all the children element, just use the cascade and use those selectors. And you know, there there are schools of thought where that works. That’s, that’s usually my approach. That’s Yes, yeah, their methodology. And it has pros and cons, which are out here.

So let’s, let’s talk about some of the actual, like usage of this. First and foremost is some advice to not chain modifiers, or elements, what are sometimes called grandchild selectors. This, this comes up when and I’ve seen this done. Again, it’s not strictly wrong, it is generally considered an anti pattern. There’s nothing that will stop you from doing it. If it’s working for you, then great, but it is just considered an anti pattern.

And that’s doing something like block underscore, underscore element, underscore, underscore, another element.

yeah, there’s there’s no reason like, whether in BEM or even just in general, like there’s no value added to that process by chaining those elements and creating a grandchild selector? Well,

than just use the right element name. So you’d have something like, you know, let’s, let’s say it’s a person card, in this case, you’re creating a person card that has a list of social media networks that they use. And maybe

Yeah, so like, the top one would just be like, you know, let’s, let’s use the namespacing approach. So c dash person card or component, dash person underscore underscore, ordered list. Or even better than that would be, let’s say that first list, that ordered list is like their, their qualifications. Okay, then call it underscore, underscore qualifications. Okay. And then that list items in that would be c dash person underscore, underscore.

Yeah, again, thanks semantically. Not okay, this is a list. This is a list in semantic HTML. But what is it? Like? What is it really it is a list of qualifications then call that?

It would never should never, that that explicit example should never happen, because your list should not also be an item. The things inside the list are the items. Okay, so like, the list would be the UL or the ol or the DL? Yeah, the item would be the Li.

Yeah. Remember what I said at the start, BEM, yeah, tries to go around the cascade. It doesn’t worry, right cascade, everything is discreetly done. For the explicit purpose of everything being portable, you can pick it up and move it and know that it’s going to look exactly right.

And you don’t have to worry about the list style you made for your blog excerpts colliding, the list style you’re using on your person cards, that will that should never happen with BEM, sure, there will be an exception to this. We’ll get to here at the end where I kind of talked about this, but there there are some cases.

Now the other thing too kind of go back to the point you were asking though? Can you have multiple classes on an element? The answer is absolutely yes. And it will happen a lot. And I’ll Okay, we will talk about here, what a mix is basically and all of that. Then I want to finish up on this just to say the one of the other big reasons to not use grandchild selectors, like chaining modifiers, or chaining elements, it just makes those classes much harder to read.

If you go in knowing, hey, this code is BEM, and you expect it to be block element modifier not being block element element modifier, like it makes right it makes it harder to understand the relationships between those fields. So now it’s like, Oh, is there no case in which an item can exist without a list? Now semantically in HTML, that’s probably true.

But think about it, if it was divs, and spans maybe of something, maybe you’re not doing your social media links as a list. And so now it’s like, well, I should be able, and could be able to just do that as three spans, why do I need the rapper, you know, so to speak.

And so that’s, that’s where you get into some of these questions and the other so where we get into like more than one class modifiers, for instance, generally, they don’t have to, again, this is a convention thing. But usually, a modifier will just include any added or modified properties. So a good use case of this, let’s say you have a form with fields. So your form is your block your fields or your elements.

And you may have something like form, underscore, underscore, text input, that’s your element. And that styles that it puts a border on it gives it some padding makes the text bigger and and maybe has a background icon on it for like, maybe a little email, full envelope, you know, to indicate that it’s an email field or something, then you could add, form underscore, underscore text input dash dash invalid.

And that dash dash invalid class wouldn’t carry all of the styles from its root selector, it would just have border red, three pixels. And when that gets applied, then like, if it’s an email field, and you typed in your name, you know, maybe you’ve probably got some JavaScript or something maybe running on that for validation, it would add the invalid modifier class.

And so that would just change the one little thing that it needs to caveat being and I said, this is a convention, there are ways of writing your CSS, your Sass, that you don’t have to add CSS, you could swap it out. Okay, you wanted to. So like your dash dash invalid could in fact, have all the CSS from the parent selector in it. There are pluses and minuses to that. And I’m actually in a situation now where I’m cleaning up some sass that works that way.

And it turns out like there, there’s there quite a few reasons like that, it makes your CSS a lot bigger for one, and it makes it harder to understand, like, where modifiers are inheriting all of the parent attributes and not just adding, you know, the modified values. So that’s something to just think about. But maybe like, yeah, your normal text input has a gray border. And so the dash dash invalid modifier changes it to red.

So that would be the only thing it needs to have,

of the parent. Yeah, which is that you can do, you can use mix ins, for instance, that will do that you can use extends that can that. So you might set up all of your headers, ah, you know, maybe you set up all your h1 through h6 styles, right? And maybe you’ve got a design system that very discreetly articulates, here’s what every header needs to look like.

And so you know that your header in your person block their name, needs, let’s, let’s say it needs to look like an h2. But semantically, it is not an h2, right? For the purposes right age. So you have like an h2 mix. So you would have your person underscore underscore name, and in the CSS you might do at extended h2. Again, I’ll get in, I’ll explain that’s not a great way to do it. But it is a way to do it.

The better way would be to use a mixin. Just which is which include, yeah, at include, and you’d have a set of mix ins that would define that it’s more efficient is the only is the reason why. But you can use that to do what you’re talking about. If you want to only use like when when a field goes invalid. If you don’t want to add a class you just won gonna change the class that’s on it.

And you can say, well, you know, that you begin with form underscore underscore textinput, you can use a, an attribute selector class Up caret equals, which says, any element with a class beginning with, right form, underscore, underscore text input. And then that will inherit that same stuff, there are some clever ways to write your actual CSS to leverage that.

The trick to it is being consistent, because what you’re doing there is you’re creating a new convention that that might work for you. But make sure your other devs are all on board with that, because that becomes just another way of now you’ve written something that may be way more greedy than the way everybody else is writing their CSS. And so that is a decision your team needs to make.

If that’s the way you want your classes to work, we want to use one class ever per element, that is something you can absolutely do. You just have to be consistent about it. Because if you do it one way, and everyone else is doing it another you’ve create recreated one of those problems of your, your the odd man out, and now somebody has to maintain that later. And they don’t understand why it’s all different for that code.

So with blocks in blocks, or, you know, nested blocks, there’s a custom question that comes up have, is this an element? Or is this a block? And if it’s another block? Should I use the other block name? Or should I create something new?

turtles all the way down? Yeah, well, like,

So here’s the, let’s make an easy use case, right? Let’s say that I’m going to stick with my person card. Let’s say that person card needs a Contact Me button on it. Okay, right, your button, you use buttons probably all over your website. And so it’s entirely likely that a button is on its own a block, you have a literal c dash button block already defined.

Okay, and so now you’re left with the question of well, inside this c dash person block, do I add in a c dash button block, or do I create a c dash person underscore underscore button and then extend the button class into it the button block into it or mix in the button block into it, it’s 100% acceptable to just include the block that already exists there.

If it needs to be a little different, let’s say the contact button on a person card is exactly like every other button on the site, except that it just needs a different background color. You can create a a modifier, you could have c dash button, dash dash red, and it makes the button red. Or you could have your c dash person underscore underscore c dash button and it’s red.

Now, that’s a little confusing and the first thing that I’m going to say is mixes are also somewhat considered an anti pattern. The trick to doing them right is your element name should match the block name of the thing that you’re mixing.

So if if your block name is c dash button, the element name on your person card would be c dash button so that you know those two things like you are referencing another block and you’re going to use your mixin or use your extend to bring in those styles.

me we are assuming if there is no change if that button right looks exactly like every other button. You just use your button block last name C dash button. Okay or button you know exactly the c dash is an optional just namespacing sure effort in fact for the sake of argument I’m gonna leave that off, just make it easier to say, okay, so button.

So button. So if there if that button looks like every other button, then just use the button block class and use it inside your person block, that’s fine, that’s acceptable entirely. If that needs to look different, let’s say it looks like every other button on the site, except it needs a red background, you have two choices, make a button dash dash red.

So that’s a button block that’s modified to be read or do a button block and then have a person underscore underscore button. And the button element of the person card defines that it’s rad. Either one of those two approaches is fine. But it’s you’re isolating the change that the change is unique to the person card that way,

I said earlier, like for anybody that is getting a little turned around on this, go to the shownotes. Every one of the links we’ve got in there has tons of examples of this. And it does, it absolutely does help to see it in action. Sure. The thing is, like when you’re using what’s called a mix, where you’re combining these elements in different ways, you want to create the least amount of inter inter dependency that you can.

Because if you were to get rid of a block, that can be problematic. A button block is probably never gonna go away, you’re always gonna have buttons on your site. But if you have something that’s a lot more unique than that, though, the one of the big advantages to all this BEM stuff is knowing when you can get rid of CSS, right? Like, if you get rid of your pricing table, you know, you can delete your entire pricing table partial from your CSS.

Now, you never have this question of well, this stuff might be getting used over here and this stuff, headers, you know, heading classes, text classes, all of this kind of stuff, you run into this, like, you end up with CSS files that never get anything taken out, even though you may only be using half of the CSS in that file. Five years later, you’re still compiling all of those partials and you don’t know what is or is not being used anymore.

Ending on on two things. So first off, don’t commit to this methodology at the expense of what makes sense. So breaking BEM, right? How do you know when the break BEM, you’ll always discover instances where you need your common root elements styled at some point. So we’re talking p tags, a tags, you know, h2 through h6, probably a really good example of this image, you know, base image tags. Good example of this is blog posts.

Because if it’s not just you, and even if it is just when you don’t, if somebody is putting a lot of content in a WYSIWYG,

to really ask them to go in, go into code view and add a class to every single p tag?

Yeah, no, that doesn’t work. So you do need to think about like what route styling needs to be declared, it’s almost impossible to get around that unless you really are manually curating your whole site, and you’re not doing anything that would resemble true long form content, like, right, that’s just something to think about, it makes sense. And there’s no reason to bend over backwards to maintain them at the sacrifice of doing what makes sense in that situation.

And that’s one that you will run into almost always another one to go all the way back to what you brought up when we were talking about blocks, right? These sort of let’s call them utility classes, right? Ma’am?

Generally doesn’t want you to use utility classes, but it does 100% make sense with things like is active has error, you know, is visible, something like that, because it is generally much easier to hook those classes in the JavaScript for dynamics of like, or you know, let’s say it’s has has error right on your form fields.

Maybe your validation when it sees like it, you know, you type the name into the email field, your JavaScript validator, it’s much easier to have it toggle on the class list has air right, then it is to build a BEM class name, and apply it and remove it dynamically. Some tools to end on real fast and these are real simple because the reality is, like we say BEM is a convention. There aren’t like any programmatic tools really, to lend to this.

It’s just things that help you write it. There is a SAS BEM mixins NPM package. There is a France hydel has something called benify which is a series of mixins There’s also an article over at CSS tricks that has a bunch of snippets for bem mix ins. All of these are only there to help you write the stuff and it’s pretty easy to write vanilla as well. Or like vanilla Sass anyway. Aaron, you’ve mentioned it right?

Like, just nest, your SAS elements use the ampersand to glom them together. Like that’s mostly all these mixins do. And most of the mixins just give you that name, like, at include block, and then give it a name.

Aaron? Yes. Worth the end. asked me a question. What have I What have I said, it’s way too confusing. Um, it’s probably the nesting of blocks, right? Yes, it makes us Yeah,

Yeah. Show Notes. I’ve said that a lot this episode. And I do think it’s important because this is a lot of code. Yeah. Convention and seeing it,

You know, one way that we could have made this a lot easier, of course, is if I’d been using Tella and jumped on there and open up the screenshare reported that through my video in the corner, and I could have done an entire live coding session along with this. Because Alright, they’re cool. I,

Well, what’s cool is Tila lets you do that. It records everything. You can add your audio, add your video, you can have a slide deck on it, you can, you know, just capture what you’re doing. They have a Chrome plugin, all you need is a browser, all you need is a microphone, camera. And if you don’t have one of those things, that’s fine. You can just use what you have, you know, leave out one of those or add something later.

Tella is fantastic at capturing those elements. let you customize those things. Throw in a background, tweak the layout to something that makes sense for you. And even add in outside video clips, if that’s what you need. Go in there, showcase your work, share your knowledge that can be for your teammates, for your any of your followers online, doing stuff for your customers, doing stuff for other collaborators and content editors at your company.

Check them out, getting a free account is as easy as going to tella.com/dux. Sign up and start recording something and share it with the world. Folks, I hope this was educational. I know a few parts probably are a little hard to articulate and doing it just sort of off the cuff like we did may not make a lot of sense. So check us out. We’re happy to answer any questions. Whatever fine. Find the methodology that works right for you.

If you want to come talk to us about this, be sure to check us out on Twitter or Facebook at slash dragon UX. We’re on Instagram at slash drunken UX podcast. Or if you want to drop into our Discord, it’s drinking ux.com/discord It’s a great way to share those questions with us. You know, get information, get feedback, or ask us about a use case that you’re unsure of and want to know more about.

If you’re enjoying the drunken UX podcast and want to help us out a little bit you can support as we are on Patreon. Just go to drunk in ux.com/support. And you can go there and get access to full length interviews and episodes with additional content.

At the end of the day, we got to think about the fact that if we’re going to make the show the best that we can, you know, talking about these topics about about BEM, whether that’s Ruby CSS stuff coming up, you know, all of these things help us make the show better.

We get that feedback from you. You know, the Patreon is a great way to get your voice heard if there’s a topic that you want, if there’s you know, a subject that you want covered or if you have deeper questions about anything we’ve covered in the past. And it’s just our little way of keeping our personas close, but closer. Welcome to Season Five everybody have a great 2022