Successfully implementing a design for a large site in CSS can be a challenge in the best of circumstances. It can be downright hard if you need to spread the work across multiple developers of different experience. You don’t want to end up with sections of CSS written with completely different priorities and opinions in mind. CSS methodologies like Block-Element-Modifier can help to level the playing field so that maintenance of your code becomes consistent, if not simple. This week we dive into what makes it useful and how to deploy it.
- Battling BEM CSS: 10 Common Problems And How To Avoid Them
- BEM: A New Front-End Methodology
- BEM Mixins
- Bemify SCSS mixins
- Introduction to BEM
- Mixins Better for Performance
- More Transparent UI Code with Namespaces
- sass-bem-mixins NPM package
- Why Stylesheet Abstraction Matters
- Yandex BEM Documentation
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
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.
Are other other hosts Aaron, how you doing, Michael?
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.
If a comet hits the planet on the new year, then I guess you don’t get to hear this. I’m sorry. But we will have done it. So we’re ahead of the game.
We’re Yeah, we’re a little ahead. I got Yes, that’s
that’s what matters when a comment hits the point, right.
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.
I picked up a pizza last night night when I walked into the plaza. I was I mean, I don’t know i i wear in the winter, I wear a hoodie, jeans and a hat until it’s like single digit temperatures Fahrenheit. And then I’ll put a vest on. And I don’t get the winter coat out until it’s below zero. But I mean last night, though, I mean, it was like mid 40s Maybe when I walked in to get it.
And then when I walked out, it was snowing. So our wetter weather has also been very weird.
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
decaf. But yes. Also coffee.
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.
I guess you’re just stuck there the rest of it. So yeah, I
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
I thought, I thought they were great. I didn’t always get the lyric references, but I can imagine that 26 episodes a year becomes difficult to keep that going.
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
because you keep you keep it up there,
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.
Can you remind me what the functional means? Because it’s not functional? Like functional programming? Yeah, yeah. And it’s obviously all CSS is like lowercase f functional, because, you
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.
That’s my man, that’s my favorite way to do that. Yeah,
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
to the capillary is good. Functional CSS feels like namespace collision. Methodology. I like that’s a good term.
Convention conventions a good word. Yeah. Because Bootstrap
and Foundation would be frameworks because like, the opinions are both established, but already, like manifest, you know, you already have LG dash called DASH three written then, but like, the, it’s like the difference between like, design philosophy, and, like, the style guide is the implementation, right? And execution of it. But the design philosophy is the driving force that led to that.
So the functional CSS would be the force leading to it. And then the found the framework would be the execution.
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?
Right. Or just make make your life very difficult.
So, CSS BEM has been around about nine years. It first sort of hit the radar on 2012.
It was Bronwyn SAS kind of started right. Um, that maybe not right at the beginning, but like around when SAS started picking up popularity, I’m just remembering like, when I started using SAS, or when I first learned about it, it was around that time, but
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
ago, I would guess that
is it more options? Is it because we have more different ways of doing this? Now, do you think
And so people moving away from building their CSS as like a monolith
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
the regarding how long ago was this? I did find an article written by Chris Epstein. The creator of Compass, if your compass before the Build Your Sass for you constantly, right? This is 2009, September 2009. And he says, I’ve seen a number of comments on blogs and Twitter at the mountain, you don’t need a new style C syntax. CSS is simple. And you’re a moron if you can’t use it. I agree CSS is simple.
You assign style primitives to elements and some of those primitives cascade down to the elements contained within I get it it’s simple to understand. But CSS is not simple to use or maintain. It’s time for stylesheets to evolve. So you can take web design to the next level. Yeah. I mean, the article goes on at length that there’s a link in the show notes for it, but it just put there.
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.
So this isn’t when this is when SAS was first made. Like it currently exists this but it would have been very early in the process because it’s not yet been adopted.
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.
Being able to do like, the nested styling of stack of sass, especially with the ampersand appending. With them especially is like huge. I say this in practice, having used it at previous jobs where we use them.
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,
I would agree that there is that there is an artistry behind writing your CSS to minimize leakage. Yes, like, you are correct, that it can happen. I think that if you are intentional, and cognizant of what you’re writing, you can minimize and mostly eliminate leakage. It’s, it’s you have to really, it’s easier to do with SAS, because you know, all these styles are living underneath this other one.
So it’s guaranteed to, to not leave this scope. But yeah, it’s like it can be problematic if you aren’t careful, especially with mixins.
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.
I don’t know if this is a it’s like a laterally improved metaphor. Well, by the way, that the specificity we discussed in Episode 93, accessibility overlays and calculating CSS specificity that was July last year.
So you end up doing a lot of scope management in CSS
to prevent 100%. agree there.
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
so I completely agree with you on that. Whether or not you’re choosing to use them. You do not want to have that that is an absolute recipe for having constant leakage is having everyone having different approaches to How’d the writing process. And man that is a that’s a dangerous place to walk in. And it’s not that you can’t trust people with the keys to the CSS, but like, you definitely want to limit it.
So that you don’t have multiple, would you call them dialects of how to read the CSS? That’s that’s how you
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
explosion? Mo, tough?
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
like a hero, we might commonly call them components can like lowercase, lowercase c component, right? So something that might have, traditionally it might have an ID selector, or maybe a class selector that is, would appear three times on a page or Yeah,
or just a very discreet name as its class, right? Like
it name it names a domain concept. Yeah.
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,
oh dash object, right? Yeah, these
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.
Okay, wait, I just want to call out a few of the things he has listed here. There’s his dash and has dash Yep, these are signifying the piece of UI question is styled a certain way because of a state or condition and underscore as a prefix. And then the comment is signify that this class is the worst of the worst a hack.
Well, we’ll talk about those two here in just a second.
And then J S dash signifies that it has some, this piece of the Dom has behavior acting on it. And then cute, this is my favorite way to QA dash signify that a QA or test engineering team is running an automated UI test, which needs to find or bind to these pieces of the DOM. I love that. I use the data attributes a lot. Yes, oh, five for test hooks.
But I have occasionally used classes or like added classes that are descriptive, but really, there’s no CSS, it’s just for being like a test
took that 2015. We were not using data attributes to the extent Yeah, that we do Now certainly,
this is really, I don’t know that I would use this personally. But I really appreciate like the thoughtfulness behind this. That’s very cool,
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
okay, so when we say element, we’re not saying like HTML element, right? We mean, like, a commonly uses word again, component, obese, a, like a thing. I think a subdivision
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,
ah, so the block would be the Gestalt. And then the element would be a part of the Gestalt. So the part I haven’t watched is your Gestalt, the Rivia. It just thought, the common definition is like the whole is greater than the sum of its parts. So the block would be the whole who le, and then the element would be the parts, which individually are, don’t carry the significance themselves, but like combined with in the block, they become something notable.
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.
So but or lowercase E elements, but also uppercase e LM, right.
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,
for all right, because we separate the block and element with double underscore, right. I do remember that
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.
So that’s, this actually goes back to a point I made earlier about why SAS works really well with them. Because if you have your block, you can define your block as for example, like dot blog card, for example, but you could do dot blog card, dash underscore, underscore, and then within that block in the SAS, you could have ampersand and then immediately avatar or like, feature image or whatever.
And then the the compiled CSS will then be the full thing, but in your in yourself Though it reads a little bit cleaner, and the relationship between the two things is more obvious.
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.
I know that I know that tailwind is a hot thing right now. And Rails has formally adopted tailwind in a semi official capacity. But I tried it and I’m not a fan. Similar to the tachyon thing. It just it makes, it just makes the HTML look like
well, Tachyon, though also, I think, to me qualifies more as an actual framework. It’s not a method.
Oh, yeah, that’s true. They’re already written. But yeah, like it has like it just
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.
I like them better than most CSS methodologies. Um, I like it better than Tachyon. I like it better than some of the like, oh, CSS stuff that we’ve seen. I see. It feels inelegant to me. And so as a personal preference, I generally don’t pick it. I’m like, I don’t like the fact that everything has to have a class. And that, for the most part, you’re not really leveraging any of the cascading I understand that specificity wise, maybe that’s favorable.
But it just, it hurts the artists in me. So I No disrespect to them, or anyone that chooses to use it. I fully understand the benefits of using it. But just like personally, though, I just, I don’t know, man. I, for me, like when I look at an HTML code, if I see something that has little few to no classes, or ID tag attributes, I’m just like, Oh, that is beautiful.
And go back to what we said earlier, there are plenty of projects where that makes perfect sense to
Yeah, yeah. And plenty and plenty where that makes sense. Yeah,
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.
Okay, so this would this attribute. So I see you have an example here of card, underscore, underscore, with underscore underscore highlight, versus do the correct way of doing card underscore underscore item card under. So yes, if you had card with an actual unordered list in it, and you want to style the list items, those list items would be card item, and yet the card list item,
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,
what about if you used both unordered lists and ordered lists, and maybe definition lists it within a same card, or maybe in different cards,
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
you have a person card that has an ordered list in the in the excerpt on the person card, like this person does these things. But then also, like an unordered list at the bottom with a link to their social.
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.
qualification. Oh, okay.
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?
Is it okay to put one like BEM class or selector? I’m not sure we would call it one BEM thing. Like, underneath another, like, Could I do card list? And then with card item under that, oh, yeah, everything gets a class. All right. But I mean, like, is it? Is that okay? Is it go? Sure. Is that okay to do like, Can I do like dot card, underscore underscore list, then space, dot card underscore underscore item? And that would be okay.
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.
I think I think I’m just having a break in comprehension, because I keep wanting to think about it in terms of cascading. Right. This is like a lot more like, explicit.
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.
It seems like this is really good for sites that might have like modular components that may need to be shuffled around or reconfigured or something that’s accurate yet.
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 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,
I would have a hard time using them and not expecting at least local cascading within a block. Like if I have if I have a block to find. And then I have different, especially with modifiers. Like I would I would want them, I would want them to like assume the traits
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?
I’m just imagining, like, you know,
turtles all the way down? Yeah, well, like,
if you have like a content area, right? I would think of that as being like a block. Sort of, I mean, it’s like a layout block, I guess, or like, like a navigation bar or something. I don’t know, it could be anything. But then having like, other blocks within it.
And like, what would take precedence? Yeah, I guess maybe you just look to whatever is the most recent block above it, or like you click conceptually, you think about, you know, what parts of this are portable? Like, could they be taken out of rice? The parent content?
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.
Can you like if we have a card like a person card and then a button component within it. How would you style these? So with the classes
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 wish that we had like a live or like a visual example of this, because I feel like that would communicate a lot.
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,
you’re Yeah, you’re never going to get people to use them. Yeah, yes. For those are you going
to really ask them to go in, go into code view and add a class to every single p tag?
No, no, especially not a BEM class? Those Those are not, I worked with this exact situation. And that will never fly.
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?
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.
That’s what I’ve seen them in the wild. That’s usually how it Yes.
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. No, I think that’s something that I think that in many ways, learning the nuance and judgment on BEM is similar to learning the nuance and judgment on traditional CSS.
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 should absolutely, absolutely. Look at the links, especially the Smashing Magazine, one, it will click instantly a lot of the stuff we’re saying because you’ll see it and like, Oh, I get 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,
I think that we should do, we should definitely do live coding with like some kind of stream or video component. I think in a new, upcoming episode.
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.
Yeah, I I know I said earlier that like it’s not for me. But I definitely see the benefits in it. And like I can understand why any of the frameworks be useful. I think choosing the one that’s right for your project is definitely an important consideration.
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
This episode of The Drunken UX Podcast brought to you by Tella.