BEM 101: How to Make Web Design Organized & Scalable

0:00:00
What’s up everybody, welcome back to the channel. Today’s training is one of those trainings that is going to fundamentally change how you build websites. It’s very powerful, very important content. But here’s the thing, it’s not fancy content. It’s not flashy content. And I like in this to jujitsu. I’ve been doing jujitsu 10 plus years. Pretty much everybody that’s been doing it a long time knows what separates the black belts from everybody else is the black belts. Understand the underlying principles and the fundamentals better than anybody else that’s around them right or anybody below them, let’s say. And so I want you to kind of think of web development as the same way. It’s fun to go on YouTube and watch a bunch of flashy stuff and learn about the latest and greatest animations and the coolest stuff and and try to implement that into websites. But if you don’t have the fundamentals and you don’t have a solid grasp of the underlying principles, you end up building sites that are absolute chaos and they may look okay. Like when you pull up the website and a browser, the site may look good. If everybody might say, wow, that’s a really great site. But when somebody peaks at the underlying architecture of the website, they start to see, wow, this thing is actually a disaster. And this is a big problem because we need to be building websites that are scalable and maintainable right and organized and clean and efficient. And if you don’t understand the underlying principles, you’re just styling things throwing classes here throwing classes there, styling at ID levels, doing all this stuff randomly. And cool shit right that you saw on YouTube, it creates a massive problem. What happens is, and I call this the three month rule or the six month rule, sometimes there’s a two week rule. But here’s what happens, right? You build a website, you launch it live, whatever it looks great. Then you go on, you build another site, another site, another site, and then it comes time to go back to that original site. The client’s ready to add more things to it to iterate, to change a few things.

0:02:01
And you realize, wow, I don’t know what these classes were for. I don’t know what they do. I don’t know what they control. I don’t know if I’m going to break something by changing this or you end up with like a massive workload because you’ve got to do a lot of stuff manually. You didn’t build any components that are reusable. You don’t have the proper class structure in place. You’re doing a lot of manual work when you really shouldn’t need to be. And if you work in teams, this problem just compounds. The whole team is like this. And then sites become basically unmanageable. And you have to do a lot of extra styling, add a lot of bloat. You have to do work around. It’s an absolute nightmare and nobody wants to work on these projects. In this training today, I’m going to help you avoid all of that. I’m going to teach you a system for styling, a system for class organization and naming. And that system is called BEM. B-E-M, it stands for block elements modifier. But what you have to do is mentally prepare yourself to say today, I’m going to work on mastering some fundamentals. Today, I’m not going to worry about flashy, fancy stuff. I’m going to focus on core principles. And that is going to move you leaks and bounds forward from where you are now. So let’s go ahead and get into the training here. So this is called BEM 101, how to make web styling organized and scalable. And I put a little paragraph here in layman’s terms that better said this way, how to build sites that won’t make you want to jump off a bridge when it’s time to maintain them or build upon them. This training is all about making your life easier. And I want to challenge you that instead of trying to try to place your name on like, ooh, I do fancy stuff, flashy stuff, I know how to do all this complicated stuff. So make a name for yourself in terms of saying like, I build efficient, clean websites that are scalable and maintainable. And that aren’t a nightmare. That don’t make people want to jump off a bridge when they go to iterate or build upon them. So we’re going to talk about why BEM, why are we using BEM versus any other framework or system or whatever. What’s wrong with the old way? I’m going to show you, I pulled up three code pens. These are random code pens by three different developers.

0:04:25
We’re going to just inspect the structure of what they’ve built and we’re going to talk about it. And we’re going to see what the pitfalls are. We’re going to see why these methods that they’re using are hugely problematic. And then what we’re going to do is we’re going to build this actual three column grid with these cards. And we’re going to use BEM. And I’ve used BEM in tutorials before. You’ve probably seen me use it, but I’ve never done a dedicated video on it. So this is the dedicated BEM 101 video. And like I said, this is a game changer. It’s absolutely going to fundamentally change how you build websites going forward. And you’re going to love it. Like it’s not flashy. It’s not fancy, but you are absolutely going to love it. It’s going to be one of those trainings that you mark down and save and say, this is one of the trainings that really changed my development. All right. Okay. So first things first, let’s let’s talk about the why. Let’s go down the entire list of why. And then we’re going to take a look at these cards right here. And then we’re going to build something. We’re going to look at these other dev cards. We’re going to we’re going to cover a lot in this in this tutorial. So why BEM? First of all, organization. Your classes, your class names, your styling. It’s going to become insanely organized. An organization in a massive website project, right? You put in 35, 40, 50 hours in some cases into these website projects. At the end of the day, you want to say, wow. All right. This site looks great. But underneath it all, it’s clean. It’s efficient. It’s organized. It’s understandable. It’s scalable. It’s maintainable. That is a real win. Building a pretty site that’s that’s none of those things is not a win. That’s a huge fail. That’s a huge let me let me say that again. That’s a huge fail. You’ve got to build maintainable scalable websites. So organization is absolutely critical. Scalability, which you’re going to see as we get into the actual details of this stuff, what that means, semantic accuracy and readability. You’ll see exactly what that means as we get into this. But your classes, you should be able to read the class names and know exactly what that class does and what it’s targeting without needing any comments or documentation of any sort. It should be absolutely obvious. Class name collisions. We’re going to avoid naturally class name collisions. I’ll show you what those are and why they’re hugely problematic. This happens on more builds than you think. And it creates a lot of code bloat and a lot of workarounds that just should not be necessary.

0:07:01
Ben is easier to write. So when you actually have to go into a style sheet and write a little bit of CSS, Ben makes it so much easier to write. It’s easier to debug because of the organization and the semantic accuracy and readability and the lack of class name collisions. That makes debugging very, very easy. It’s easier to modify components with them. You can avoid specificity issues because Ben is a very flat code structure. So some of these things are very technical and we’re not going to get too far in because it’s been 101. But I just want you to know there’s a long list of benefits besides what you might see as the obvious things. We’re going to have faster rendering. This is a little bit debatable but on larger sites, I think it does start to matter. But browsers read left to right. And so when you add a lot of specificity or selectors, which you have to do in traditional CSS modeling, the browser has to read those long strings and then the details. Whereas Ben is extremely flat, there’s not a lot of specificity. So it just goes top down and the browser can render faster. And then there’s self documenting code. Right. If you’re using a lot of random class names and all this stuff, you have to put a lot of comments in and not everybody does, which makes the problem even worse. So you put a lot of comments in to explain why you did something or what controls what whereas Ben is self documenting code because of the naming structure, it’s so semantically accurate and readable that you don’t need any additional documentation beyond it. It documents itself as you write the code. OK, so that’s kind of the list of why Ben now what I want to do is I want to take a look at some examples of other developers and how they’ve created certain components. And this is going to show you very clearly, I think where so many people go wrong and I didn’t just hand pick these I didn’t like look through a list of 100 and find like, oh, there’s finally one that wasn’t done right. No, these are easy to find this stuff happens every day all day long across like most websites, I would say have this problem. If you’re not using a specific naming convention like BIM, you’re going to absolutely come into these problems all the time. So let’s go through and just see if we can diagnose what’s wrong and why it’s wrong, not just like as an opinion, it’s more like no, here’s objectively why this causes major issues in development. OK, so here is our first card, which by the way, aside from this line right here, which I think is a little SVG issue going on just pretend that line didn’t exist. Objectively, this is a good looking card. It’s a really it’s modern. It’s got, you know, good colors. It’s got good fonts, whatever it looks fantastic. But how something looks is separate from its underlying code structure and so what we always have to ask ourselves is, is this scalable, is it maintainable or is this beautiful card going to cause me nightmares? Right? I don’t want these cards to cause me nightmares. I don’t want anything on a website to cause me nightmares. And unfortunately, this is the type of card that would absolutely cause nightmares on a real build. So let’s take a look. The first thing is it uses a class, this entire card right here is a class called card. And I want you to remove yourself in these examples from code pin for a minute and just pretend that these components are used on an actual website. So 50 hour build has this card and ask yourself this question, are there any other cards? Of course, there are cards in modern web design are like all over the place. They’re used all the time.

0:10:45
And so we have a semantically devoid, it’s devoid of semantic meaning, right? We don’t understand what kind of card this is. We know that it’s a, this is a bio card, like a team member card, right? But how would you know that you’re just seeing this contextually like, you know, empty class called card. Now we come down here, that’s the first problem. We come down here and we do see that, wow, he’s put card dash headers. So the header that’s related to the card, this seems like we’re actually on a good track other than the fact that card doesn’t mean anything. So that’s a header that’s good. We come down here. There’s card header after OK card header bar. So that’s a bar inside the card probably maybe I don’t know what that would be. It doesn’t give me a lot of semantic accuracy, but at least it’s associated with the card. I know it’s part of the card. Oh, then we have this SR only. I don’t know what that is. We have buttons that are inside the card. We’re going to talk about buttons in just a minute. The header slanted edge, right? This is obviously the slanted edge. So no problem there. We’re good. We come down and then we have card body. OK. Oh, no. Oh, no. Here’s where we really start to run into major issues. This just seems like they started out with so much promise and then they got lazy. I, that’s how I’m guessing happened because look at this name. There’s this a class name name all by itself. And I’m guessing that that’s the person’s name. But if you’re looking at the code, you no longer know that this is associated with this card, right? It’s just a random class called name. Now here’s a question for you. What happens if something else on the website is a name and somebody else or even the same person two weeks later because they forgot they use the class name again. This is what we call class collision. You have now two classes being used on separate components that are colliding with each other. And that’s a major, major problem. Sometimes let’s say that this name is styled exactly the way on the other component. OK. So you put the class name on the other component, which is a different component. It’s not even a bio card. Let’s say it’s something else. And you don’t realize that there’s a class collision because the styling is actually exactly the same the way that you want it to be. But just because it’s the way you want it to be now doesn’t mean it’s always going to be that way. And what you’ve effectively done is you’ve locked that problem into existence forever. You can never now escape that class collision problem because as you build more of those other components and more of these components, which both share the class name.

0:13:33
You realize when it’s time to make a change to one of them, you can’t change any of them because if one change over here breaks all of these things over here. And so you’ve effectively created a locked problem in this website. And this happens all the time. And so the work around now is, OK, well, we have to separate this group of components over here. We have to give that name a brand new class. And we have to style it with the new class, which obviously causes a lot of duplication issues, code bloat. There’s a lot of extra code for no reason because you’re fixing a problem that should never have happened in the first place. But look at this, this is not the only issue. Take that problem and multiply it many more times because we now have a job title class that’s exactly the same way it’s independent from the card. We have a bio class that’s on its own independent from the card. Nobody knows that these things are related to this card. And if you have a class collision issue with these, you’re locking these problems into the website build forever into eternity as well. Social accounts image social accounts, which is targeting a link, then we have a card footer and then look at this once again, we like we went back for a minute into OK, here’s something related to the card. And then we jumped immediately back into just a random class name called stat. And this is you can see the problems here, right? OK, so I’m going to move on to the next example. We have this movie card because all the examples have a little bit different things going on. Again, let me make the case. You look at the card on the front end. That’s a beautiful card. That’s, that’s a really great job with design and it’s it you acts, it’s all good. But what is the underlying development of this card looking like? Is this card scalable, maintainable or is this yet another card that if I start to use this throughout a website that’s going to cause me massive headaches. Let’s take a look. So we go down and we see OK, this one is actually improved. It’s called movie card. So there is contextual meaning in the class name. All right, so I know it’s a movie card. That’s fantastic. There’s a random container here. I don’t know what that that does. Maybe that’s the background. Maybe that’s unrelated to the card. So maybe that’s OK. Oh, no, now we have a problem hero. All right. And now you can see the real problem with semantically inaccurate or contextually inaccurate class names or just random class names. The class hero actually controls the hero section of this card, but hero is a common term in development using other places like the hero of a website is the under underneath the header that intro section of the website typically has, you know, a color that pops or background image or something like that. The very large H one is going on in the hero section. You get it, right? You know what a hero is. So why are we using a random hero class inside of a card. Nobody knows if you came. Let’s do the three month rule or the six month rule. You come to this website to maintain it or add to it. Even your own, even if you did this three months later, I promise you you are not going to remember that you call this thing the hero.

0:16:55
And you also can’t tell me with any confidence whatsoever that you did not use the hero class anywhere else on the website. Maybe you didn’t, but maybe you did. And if you don’t know with a hundred percent confidence, you can’t make changes to the styling because you risk breaking something else somewhere else. And this is always a problem when you use random semantically inaccurate class names that aren’t linked to specific components. Okay. So we’re going to come down and we’re going to see again cover. This is the cover right here, but looking at the code base, you don’t know that this is linked to the movie card. You don’t know that this is any the cover of what and even worse cover is used in many different capacities in web development. So it’s not only does it not give us any idea that this is related to movie card. In our mind, it absolutely makes us think this could be used any number of places. I cannot change this styling with any confidence whatsoever because if that’s used anywhere else, which it may very well be because it’s such a generic name, I could be breaking something else on the website. So you’re automatically having to avoid class collisions and that causes code duplication and bloating like we talked about same thing here. They’ve got a class called details. I mean, come on now. Anything could have a detail right any part of the website could have a details. So I can’t with confidence know that hey, if I change this padding, it’s only going to change whatever the details are down here. And I don’t even know this, this may be the details. I’m not really sure. So we’ve got you know a random title one. I mean, these are just class names that here’s a random likes description. I mean, come on now. Anything on a website can have a description right. So how do I know what this goes to this is chaos this right here. You can look at the card all you want and say that’s a beautiful card. They did a really good job, but in reality, they failed. This is a hundred percent failure. 100% failure. I don’t care what it looks like. I don’t care how beautiful it is. It’s a hundred percent failure because it’s not scalable and it’s not maintainable. And that’s what I’m talking about right you can take people who can make beautiful things fancy shit. But they can also make the website an absolute disaster underneath and you if you want to be a black belt right you’ve got to be clean. You’ve got to be efficient. You’ve got to have a tight game. You’ve got to understand the principles. You’ve got to understand the philosophy. Okay, that’s what makes that’s what separates a black belt from everybody else going back to the jujitsu analogy. Okay, so I think you get the point here. Let’s take a look at these profile cards because these are even worse. These are even worse. And again, these look good. I mean, the icons are a little big for my taste. There’s maybe some spacing improvements that can be done here. But still, this is a this is clean. All right, it’s pretty clean. The question is not how clean is it how beautiful does it look on the front end and the browser for a developer for an agency for a freelancer for a business client. The question is how scalable and maintainable is this how easy is it to iterate on how easy is it to add to. All right, let’s take a look the class is snip one five seven eight. Does that mean anything to anybody. Absolutely not. It means nothing to nobody. Okay, we keep coming down and we see all right, we are introducing a brand new problem here. And this is why I use this example. I liked this one because it does introduce this new problem. So a lot of people, instead of putting classes on everything, they style HTML elements. This is actually targeting an image inside of snip one five seven eight. But when you target HTML elements, you run into a very unique problem and you can see that problem here that this is instructing every image inside of snip one five seven eight. Oops, I don’t want to move that around to look this way to have this styling right here. Well, what happens if one month later somebody decides now this is a very tiny card, whatever, but maybe it’s a bigger card just expand this in your mind. Somebody decides we need to add another image to this card. This card needs to have two images.

0:21:13
You’re forced because of the way this is structured to every image is going to look exactly the same. You’re not allowed to have an image that looks different unless you do extra work. You have to now put a new class on that new image and style it separately. And you’re still having somewhat of a conflicting. You’re running into specific issues at this point, right. Because you have conflicting code. You’re telling all images to look a certain way, but then you’re telling that you’re having to tell this new image to actually look differently. So I avoid I think it’s very smart to decouple styling HTML from CSS right. Don’t target actual HTML elements. You see it down here again. So we’re styling the age three a certain way, but what if this needs to be an h4 instead of an h3. So somebody comes along and they say, hey, actually an h3 doesn’t make sense in the logical flow of the headings on this website. These cards need to be h4s. So you change the cards to h4s and suddenly you realize you’ve lost all your styling because the styling only applies if this heading is an h3, but you change it to an h4. Now you’ve lost all your styling. So making a change in the HTML now requires you to go make a change in the CSS. That’s double the workload. Right. You had one area that could be changed. Now you have to go to a second area because of the way this was structured. If this heading had a class like heading, for example, that’s not a good one, but let’s just say it had the class heading. You could go change the snip 1578 heading. You can style that a certain way and then it doesn’t matter if it’s an h2 and h3 and h4 and h5 and h6, not an h whatsoever. It could just be text and it would always look the exact same way because you’re styling a class and not an HTML element. The styling does not rely on a specific HTML structure. In this method right here, it absolutely relies on a specific HTML structure. And if you change to have two images or you change this to an h4, you lose your styling and then you’re forced to go make a change in a second place. You’re doubling the amount of work that you have to do. That was the example there. I think you’ve seen now the problems with the old method. Let’s talk about the new method. What I’m going to do here is just quickly use a text and I’m going to use text L to make this big. Actually, let’s do text XL. You guys can see very easily. We’re going to talk about the structure of BIM. BIM, like this, BEM, stands for block. That’s the B element. That’s the E and M. That’s the modifier. Let’s talk about what makes a block. What is a block? A block is a reusable component. It’s something that stands alone and can be used anywhere on the website.

0:24:17
If we look at something like these team cards, a team card, one of them, not all of them together. Just one card is a component. I can use that card here. I can use that card on a different page. It will make sense because it’s somebody’s bio card. It’s a stand-alone component. That in BEM is a block. Everything that goes inside of a block is an element for the most part. Now, we’ll come back to that in just a second. This image right here is an element of this block. This element is an element of this block. This little tagline here, their title, is an element of this block. You get it. The bio is an element. Each icon is an element. You also have invisible elements where this image might have a wrapper. That wrapper is an element of the block. This text and icons may have a body wrapper or an inner wrapper. That is an element of the block as well. You can have visible elements. You can have invisible elements. Now, can you use, let’s say you had something where you needed to put a button inside here. A button is a block because a button obviously is used anywhere on the website. A button is a block. Can you have a block inside of a block? Yes. You can have a block inside of a block. Now, you handle that is a little bit different. But for the most part, you’re thinking about a block is a component elements go inside the block and then that leaves us with a modifier. A modifier is when you take either a component like this, a block, and you change how it looks, not its structure necessarily, just how it looks. So let’s say you wanted a dark version of one of these cards, you would use a modifier to make it dark and BEM makes modification very, very easily. I’ll show you exactly how that’s done. We’re going to build these cards. We’re going to show you how to do every step of the process. So you can also modify elements. So an element inside of a block can also have its own modifier. And sometimes you make the decision of, do I want to modify the element or do I want to modify the block, which can modify the elements, modify the block, which is the parent item can absolutely modify its children. And a lot of times that’s the most efficient way to do it. But when we get there, we’ll talk about that more. Okay, so we know what a block is, we know what elements are, and we know what modifications are. Now what we have to talk about is the actual structure of class naming. So if I was going to do this block right here, let me pull this over. All right, let me check on my recording. Make sure we’re all still good. Yeah, we are. So if I was going to create this block right here, I need a name for my block that is semantically accurate. And so what I’m going to call this is a team card. Right. So this is a team member. Now you could put team member card or you could put team card.

0:27:17
I’m going team card because I like shorter names, all right. But as long as it’s still semantically accurate, people can understand what it is, then you’re good to go. There’s no BIM police that are going to come out of the woodwork and arrest you because you didn’t put team member card instead of team card. Right. You just make sure it’s semantically accurate and people can grasp what it is. So the way you start out is with the block. Right. So there’s a team card. And then I’m just going to duplicate this. I want to space these out a little bit. So I’m going to do an L. S. Okay. So you have team card that goes on your block. Then elements every element every single element that you put inside of a block needs a custom class because we don’t want to have to style HTML elements. Right. We just talked about why that’s a problem. We’re going to target classes that are part of this card component. So every element needs its own class. And the way that you attach in the actual CSS class name structure. The way that you attach elements to cards or elements to blocks. Sorry. There’s a lot of terms elements to blocks is with double underscore. Okay. So I would put team card double underscore and then I would put the name of the element. So this is going to be the image or you could say headshot right it may be better to use headshot because that’s more semantically accurate right it leaves nothing to the imagination of like what could the image be right maybe these were images. I don’t know those are icons but somebody may misinterpret if you say headshot nobody’s going to misinterpret that right. So we’re going to say team card headshot as an example. So now you see that the headshot when you look at the class you know okay there’s a team card block which is it I know that this is a reusable component basically. And then there’s a headshot inside of that team card I can know that just by looking at the names there’s no guessing whatsoever now I’m going to duplicate this again we’re going to come over here and we’re not going to go over there I keep going to the right I need to go to the left. All right so now we have let’s say there’s a heading right or the person’s name all right so we can do team card name so name is more semantically accurate than heading now you know I do heading a lot right I’m going to change this to name so we know that there’s a team card we know there’s a headshot in the team card we know there’s a person’s name in the team card okay so now I’m going to duplicate again we’re going to take a look at the next thing so this could be job title right so team card. You could do job title or you could do title all right it doesn’t matter either way as long as you’re you know you’re giving it its own class and it’s semantically accurate okay if we did job title very important here one dash always put dashes as spaces so anything that would be a space becomes a dash you don’t want to do this you don’t want to do like job title like that because when you have longer names it makes this very unreadable it’s very it takes a lot of time to do this. It’s very it takes a lot of focus and concentration to figure out what the heck this is versus this is much easier to read and this is the standard like in URLs it’s the standard this is just the standard okay now when we get to modifiers you’re going to see why a double dash is important versus a single dash all right but we’re going to keep going with one more thing right member I said there’s an invisible element maybe this image wrapper so there’s a div wrapping this image that’s the image wrapper all right so what we want to do is we’re going to come down here and instead of head shot I’m going to do head shot dash wrapper so I have a team that’s a head shot which has a head shot wrapper and it has a head shot and just by looking at the names I know that head shot is inside the head shot wrapper that’s what a wrapper is for right then I know it has a name I know it has a job title and then it also has let’s just say an icon right so we’re going to do and I can do here I can do social icon so I just want you to look at the organization here and we’re going to talk about one more thing I’m not to do with them and I’m going to call myself out because I’ve done this in the past and I’m saying flat out just don’t do this do it do it the way I’m explaining it here in in BEM 101 okay so I want you to see the organization that’s going on here I want you to see the semantic accuracy that’s going on here that anybody could come here and look at this and know basically what the structure of the component is all every element that’s involved in here I didn’t list them all but it’s it’s enough for you to get the picture right let’s add one more thing there’s going to be a team card double dash we’re going to modify the team card and modifiers use a double dash and we’re going to modify it with dark so I know there’s a team card and I know there’s a team card dark version all right now the question is do I need to create a bunch of classes for the dark version in the EAS and the answer is no you don’t because you’re modifying the parent and we can modify the children using the parent modifier class without creating a bunch of extra class names in BEM this is called a mix and this is very very powerful and it makes modification very easy and you’re going to see exactly how it works when we actually build this component okay but I mean look at the organization now ask yourself does this pass the three month rule does this pass the six month rule absolutely because six months from now you’re going to come back and you’re going to know exactly what a team card is you’re going to know what all the components are going to be and here’s the biggest thing there’s no class collision there’s no chance of class collision you know that it’s not like there’s a random social icon class or there’s a random name class like we saw in some of our bad examples or a random headshot class these are physically linked to team card in the class name these have not been used anywhere else for any other component I can guarantee that 100% which means that my class is not going to be a good example over 100% which means that my website is safe to edit and build upon safe to iterate on safe to make changes to because I know there’s no there’s no chance of class collisions so there’s no bloated code there’s no having to rework things do workarounds? I know that this component is super clean, squeaky clean. All right, squeaky clean. All the development is like this on the build. So I know all of the development is squeaky clean. This is what you want to try to achieve. Now let’s see how we actually build something with this. Okay. So I’m going to go ahead and we’re going to delete these. Let me go into the structure panel here and I’m going to dismiss this meeting notice. Okay. So we’re going to go delete, delete, delete, delete, delete, delete, delete. Okay. Now we’re back to a clean slate. All right. So oh, I was going to say one more thing. Sorry. Let me add a text back and this is very important though.

0:34:20
So pay attention. All right. So you don’t want to do this. Team card and then target something like team card headshot. This is not necessary in BIM. And in fact, this is discouraged in BIM. This is not flat CSS. This is adding specificity and it can lead to specificity issues as well. So you want to remember we talked about the efficiency of browsers having to read left to right and follow the string. You don’t want to do this with the caveat of when you’re modifying, you’ll be doing this. But in general, you want to avoid this as much as possible. So literally when you’re writing CSS, let me go into style sheets. I’m going to create a style sheet called BIM. We’re going to need this in a minute anyway. I’m going to zoom in. And if I was writing CSS to style my team card, it would be team card and then styling goes here. And then it would be team card, double underscore, and we’ll do headshot as an example. Okay. Styling goes here. And then it would be, and I’m doing this because you’re not actually going to see this happen because we’re using oxygen. So a lot of this stuff is going to be done inside of oxygen. But I want to show you what the CSS actually ends up looking like. Right. So team card double underscore title or it would be what was it? It was person’s name. Okay. So and I’ll just do, let me just copy these and make it real fast. Right. So this is the person’s name. And then we have another one, which was the person’s title, team card. Okay. Title goes here. All right. Perfect. And then you have your icons or your icon or the social icon. I think is what we called it social icon. Okay. See how flat this is?

0:36:05
It’s literally the browser can go straight from top to bottom. Right. It doesn’t have to go left to right at all. This is BIM. This is ultra clean. This is ultra efficient. This is what you’re trying to achieve. Okay. All right. Just wanted to show you that real quick. Okay. Let’s go ahead and actually get to building. So I’m going to zoom out. Here’s our example right here. I’m going to try to use vanilla oxygen. So I’m going to avoid using automatic CSS for anything. We’ll just use straight up vanilla oxygen. That way everybody can easily follow along. All right. The first thing I want to do is just quickly whip up this grid, which is going to be harder because I’m not using automatic CSS, but we’re going to add a div. And this can actually have its own class. Right. So you could say this is going to be a grid for team cards. So you can say team cards grid. Right. So we’ll do team cards grid, just like this. Single single dashes team cards grid. All right. Now I’m going to enable the grid. We’re going to go with 100% on the width here. And then we’re going to say the column count is going to be three. The minimum width is going to be two. The gap is going to be in. We’ll just stick to rims. We’ll make that super easy. So we’ll do three rims as our gap. Our gap here is going to be three rims as well. We do want to stretch our cards horizontally and vertically. And I think that should be good enough. All right. We’re going to create a div now.

0:37:37
Okay. And this is going to be our first component or card, right. This is the thing that’s reusable everywhere on the website. So I’m going to say team card. That’s what we’re going to call it. Right. We already discussed what our naming convention is going to be. So this is going to be a team card. And the first thing I’m going to do is just add all of my HTML elements in there. So I’m going to add my wrappers, my images, my headings, my text, all the stuff that I actually need before I get into styling the card. So I’m going to take a look at this. And this, this will help you from a standpoint of structure as well. Just being able to look at components and say what is needed to build this thing? Well, we already added the div for the actual card itself. So what else do we need? We need a wrapper for this image. It’s always smart to put a wrapper on an image. That’s a div. And then the image is inside the div. And the reason is it gives you more flexibility in the future. You can do different padding spacing flexibility with that. You can do one of the big ones is pseudo elements because you can’t attach pseudo elements to images. So if you have a wrapper for the image, you now have pseudo elements available to you. So it’s just smart, good practice to have a wrapper for your images. So we’re going to have a wrapper and then an image. We’re going to have a heading. We’re going to have text. And then we’re going to have more text. So two texts. Then we’re going to have a wrapper for our icons. And then we’re going to have the actual icons. And then those icons need to be link wrappers so that they can be link linkable clickable. Okay. All right. So let’s go ahead and just start dumping elements in here. So there’s going to be a div. That’s our image wrapper. There’s going to be an image inside of that div. Perfect. Now I’m going to grab my whole thing. Let me let me open the structure panel as well. So you guys can see the structure here.

0:39:21
All right. So you’re looking at this right here. No, this right here. So I’m going to rename this. This is going to be our team card. This doesn’t have anything to do with classes or styling or anything else. This is just structural organization in the builder. This I’m not going to give everything a name. Just watch the team card. You can see the structure get built underneath it. All right. So I have the team card selected. I’m now going to add my heading. This is going to be an H3. I want to change that now so I don’t actually accidentally forget. So that’s going to be an H3. Then I’m going to use text below that. I’m going to have more text below that. Oh, I forgot one thing. So we need a wrapper for our body text. So all this section, it’s another invisible component, would probably be best served to have a wrapper. It’s not required, but it would, it’s going to give you more options in the future. Okay. And I’ll explain what one of those options might be. So I have my team card selected. I’m going to add a div. And this div is going to be the wrapper for all of this text-based content right here. So I’m going to move this up. I’m going to drag my heading into that div. I’m going to drag my text in. I’m going to drag this other text in. I’m going to make sure the headings at the top. Then I’m going to also in this wrapper. And let’s see, should we do it inside the wrapper or outside? I would say inside the wrapper. We also have another div. And this div is going to be the wrapper for our icons. And then I need an icon in here. Just one because I want to do something to it before I duplicate it. Okay. All right. So all of our HTML elements are now piled into this team card. The structure is the way that it needs to be. Before I do anything else, absolutely before I do anything else, get this into your mind. You have to give every element a class.

0:41:11
We talked about this a little bit ago, but every element now needs a class. So what I’m going to do is grab the image. And this is going to be team card double underscore headshot. Remember, this is my headshot image. Okay. Good. Then I’m going to click on this little up. And that’s going to grab the wrapper. And so I’m going to say team card. And I can look over here to make sure that it’s grabbing the wrapper team card headshot wrapper. Bam. So now those two first elements have custom classes. And they’re following BIM. Right. We’ll look at the selector’s panel in just a minute and you’ll see the organization. Now I’m going to grab this heading. This is going to be team card double underscore. And this actually we’re not going to call heading. We talked about calling this name, right. The person’s name. So team card name. And then the next one down is this little title right here. So we’re going to call this team card double underscore title. All right. And then we’re going to do this one, which is their bio. So we’ll do team card bio. Team card bio. Perfect. Now we’re going to grab the, oh, we didn’t grab the wrapper yet. Okay. So this wrapper right here needs team card. And you can call these content wrappers. A lot of different things. I typically use inner. So there’s an inner wrapper or you could do body wrapper or something like that. Let’s do, let’s do body wrapper. All right. Next is this wrapper for the icon. So we’re going to do team card double underscore icons wrapper. And I do it plural because I’m letting you know it wraps all the icons. If I did icon wrapper, it might seem like it only wraps one icon. But if it’s the icons wrapper, then we know just by reading it that it wraps all of the icons. Okay. So I’m going to add that icons wrapper. And then I’m going to grab the icon itself. And this is going to be a team card double underscore icons. Perfect. And notice I’m not nesting anything. It wasn’t team card icons wrapper double underscore icon. It’s not that. I know I’ve done that once or twice in the past before and other tutorials. It’s not that. Just don’t do that.

0:43:23
Okay. I’m going back on that. It’s official. Don’t do that. All right. So team card icon is the class that I want. And now that I’ve given it a class, I’m free to duplicate it. All right. So we have three icons now. Now that everything has its own custom class, I’m free to start styling things. Okay. So let’s go ahead and whip up the styling of this card. I’m going to start at the top. We’re going to grab the team card. Make sure you’re on the class every time you style something. Make sure you’re on the custom class. All right. So we’re going to add padding to start out with. I’m going to use in units. I’m going to make I’ll do one in because actually it’s not a lot of padding. It’s just a little bit of padding. So I’ll do one in. We’re going to add a border real quick. So we’re going to add a DDD color border, just like a light gray. And of course, you know, the borders area and oxygen always completely lags out on me. And I don’t think it’s just me. In fact, I want you guys to check and let me know if it’s just me. Look at that. Look how long that took. I typed that like eight seconds ago. I’m going to click solid and watch this going to take like five, six seconds for it to show up. Okay. So I’ve got that. Let’s do a border radius while we’re here. So we don’t have to come back to the Scott off of borders panel. I’m going to do 0.25M because it’s just a little tiny border. We need to make sure this is one pixel. So it’s a small border.

0:44:45
All right. That’s good to go. What else do we need to do? We need a box shadow. So we’re going to go effects box shadow. I’m just going to select black and we’re going to come down to like, I don’t know, 10%. And then we’re going to do a one pixel horizontal offset, maybe a six pixel vertical offset, 20 blur and zero on our spread. Okay. So now we have our shadow. We have our border, our padding. That looks good. Next thing I want to do is, and this is why I have a wrapper, team card body wrapper. See how this padding right here is kind of small, but it looks like there’s actually more padding in this bottom part. And that’s what that wrapper gives us the ability to make this easy. So I don’t have to manipulate individual elements in here or hope that, you know, like these would be fine. The the heading, the tech because they’re not long enough. But if you had a really long name, it may stretch to all the way over here. And that wouldn’t look very good, right? So this absolutely needs its own kind of padding in here. So I’m going to use, we’ll just stick with M’s for now. So I’m going to do padding M’s and we’ll put two M and then apply all just like that. And so that takes care of my extra padding in the lower part of this card. But I do also on my team card body wrapper want to go vertical and center with our flex alignment. All right. Wow. It’s all right. Come on, oxygen vertical and then center. Perfect. So now you can see the icons automatically centered themselves. What I also want to do is typography text alignment centers going to make sure all my text, the center aligned, which if you look at this card, it’s pretty much all center aligned. No issues there. Okay. Let’s put some of these actual name in here. So we’re going to do Luke Jacobs. Now I want to make the point here. He’s a marketing manager that you would not be doing this manually. To really follow best practices here, we would be using a custom post type and a repeater to query these items onto the page. But this is that’s beyond the scope of this tutorial. Right. We’re just talking about BIM and styling and organization. Okay.

0:46:54
So I’m going to go to Laura Mipson real quick and I’m just going to grab this guy’s bio. This guy’s bio. Right. We’re going to put it in right here. So Luke Jacobs is a marketing manager. And then what I’m going to do is grab the wrapper that’s on these icons. And now we can go horizontal flex with these. And we can also add a gap here. And I’ll just do a gap of 1m maybe or maybe 0.5m. Okay. Perfect. And I can let’s let’s style some more spacing. So let’s tackle this team card bio. If we look at this, we have a little bit less line height, a smaller text for sure. And then we need some margin on top and bottom. Okay. So I’m going to change the font size first. We’re going to go with 1.6. I’m going to change the line height to 1.4 somewhere in there. I can change my color. Let’s just do 999. No, let’s do 555777. Let’s do 7777. And then let’s do top and bottom margin. So m of, let’s try one first, bottom, m of 1. All right. Let’s take a look here. It’s looking like maybe 1.5 and 1.5 would do the trick. Okay. So now we have, and normally I would be using automatic CSS. I wouldn’t be guessing at numbers. I would just be using variables. It would be, it would be much easier. But nevertheless, we’re using vanilla oxygen. So now what I want to do is change these into their icons. So we have Facebook, Twitter, and LinkedIn. So this is going to be Facebook. I’m going to select this one. This one’s going to be Twitter. Twitter. Choose that one. This one’s going to be LinkedIn.

0:48:43
And that one’s going to be that. And then they also need to be, and look, I’m on the class. So if I change this to solid, they’re all going to change the solid, right? And then they can all have a background color. We’ll do E5, E5, maybe. Yeah. Okay. That’s fine. We’ll do that. I’ll see you change the icon size. Maybe something like 18 space around icon. Maybe something like 12, 10, 16. Let’s check these. Oh, that’s really close. Okay. Good. So no problem there. How’s our general spacing looking? That’s looking pretty good. We’re using a different font and all that stuff. This marketing manager thing needs to definitely be 777 probably as well. Font size, rim of 1.5, 1.4. Let’s do 1.4. Okay. All right. That’s looking pretty good. Let’s do. I think that’s all right. Let’s add the actual photo in. So I’m going to save this. Save. Okay. And save. Perfect. All right. Let’s browse. And let’s throw all of these downloads. Okay. I’ll blow it up. Blow it up. Blow it. All right. So here’s this guy. So we’re going to grab him insert. There we go. And then I’m going to go width of 100%. I’m going to make sure that the size is full. So it’s large enough to actually go all the way across. There we go. And object fit, I’m going to change to cover. And if all the images weren’t the same height, I believe they are, but just if they weren’t, you want to set a height on these. And so we’ll do a rim of 50. No, that’s too big 40 30 35. All right. We’ll do 35 rim. And because I did object fit cover, it’s never going to warp the image, right? A lot of people are afraid to put heights on images with widths because it can it can warp the image. But when you use object fit cover, you’re not going to run into that problem. And oxygen 4.0 actually puts that right there for you. So it’s very easy.

0:50:58
Or an automatic CSS, you can just drop an object fit cover class onto the thing. Or you can just write object fit cover in the custom CSS. There’s a lot of ways to accomplish it. But this makes it super easy to attach to a custom class. Okay. I also on this headshot, I want to change the border radius. So we’re going to make the border radius 0.25 in to exactly match the radius of our card. I’m going to go ahead and save our work here because that’s always a good idea inside of oxygen. And let’s take a look at this on the front end. So we’re going to go exit to front end. Perfect. So there’s our team card component right here. Now remember guys, don’t leave because we still have to make a dark version of this. And I want you to see how modification works in BIM. So we’ve, you know, we’ve got a pretty good looking card here, right? All right. So I can duplicate this card now with confidence because I’ve created a nice globally styled component. I can change this image. If I what happened? Okay. I can change this image if I want to. So this is going to be her. And this other one is going to be other dude buddy over here. Wow. I don’t know what oxygen is doing with it. It’s like blacking out on me. And then it comes back. I don’t know if that’s my screen recording or if that’s oxygen. Okay. So they’re not all looped. J.C.O.s. We’re going to a Sarah grant fill up hunt. Sarah grant. And then this is a fill up hunt. Cool. And they can all be marketing managers, whatever. So there’s our three cards. Now let’s take a look at some things before we move on.

0:52:30
Like we have a beautiful card. The question is, is the underlying framework, the underlying styling as beautiful, as clean as the visual aspects of this card? Well, let’s go to selectors, right? So we go to our selectors panel. I’m going to open up our selectors. And I don’t think you guys can see. So I’m going to move this up here above my head and I’ll scroll down. Okay. We’re back. I actually closed the screen recording software. Okay. Anyway, so let’s take a look at this. So we have look at this. Team card, team card headshot, team card headshot wrapper, team card name, team card title, team card bio, team card body wrapper, team card icons wrapper, team card icon, all organized. They all clearly go together. You can not even know what this thing looks like. And look at the class names and the structure and know that, okay, we’ve got a block called team card. Here’s all of our elements. Nothing is currently being modified. It’s just easy. It’s so simple and it’s so clean and it’s so scalable. Watch how scalable this is, right? So if somebody comes along, they’re like, hey, the, the name part of that card needs to actually be the, a different color. Let’s say they need to be read. Okay. So I go to team card name, change the text color to red. They all turn red. It doesn’t matter if there’s three of them, 30 of them, 300 of them, or 3000 of them. They all turn red. And I can change that with confidence knowing that this class has not been used on any other component on this website. So very, very scalable, very, very maintainable. Any part of this card, I can style differently. I can change the styling and I can do it with confidence and I can know that all of my components are going to look and feel exactly the same way. Okay. So what we have to do now is create a modified version of this card. We want to create a dark card. And in order to do that, I need to select the card and I need to create a modifier class. We’re going to modify the team card. So we’re going to write team card and then modifier in BIM is a double dash. And I’m going to write dark. And now, unfortunately, we have to go in. It’s better to go into a style sheet and do this because we have to target some things specifically. And I also want to, we don’t want to bounce back and forth between Builder, Style Sheet Builder, Style Sheet, right? Because some of these things just cannot be targeted properly inside of oxygen. So I’m going to go ahead and open up Style Sheets. And I’m going to open my BIM Style Sheet. One little note here is I don’t make a style sheet called BIM, right? Make a style sheet called whatever you’re styling. So I would make a style sheet called TeamCards. And that would put all my team card styling into the TeamCards style sheet. So that keeps your style sheets nice and organized. All right. I’m going to zoom in here. And I know that this card in the middle has the TeamCard Dark class. And that’s what I’m going to be targeting.

0:55:24
TeamCard double dash dark. And this is really the only time in BIM where you actually use specificity. Right? So under my TeamCard dark, I want to actually just my TeamCard dark in general. I want to change the background color up. So we’re going to do background color and we’re going to do 111 on our TeamCard dark. Notice I didn’t do this. I didn’t do TeamCard TeamCard dark, right? It’s I keep it as flat as possible. So I’m just targeting TeamCard dark gets this background color and you see the effect that we get there. Now we need to target the elements inside of here, right? So I’m going to do TeamCard double dash dark. And then I’m going to target the TeamCard title, right? Or the TeamCard name, the person’s name. So I can do this and I’m going to do color and we’ll make the TeamCard name FFS. So it’ll be pure white. And then I want to target TeamCard dark. So remember, I’m only changing this thing if the modifier is present, right? So TeamCard, I’ll zoom in a little more for you. TeamCard dark. We’re going to target the TeamCard double underscore title. And this is going to be color of let’s do the backgrounds 111. Let’s try 444. No 888 999. Let’s make it a little lighter just like that 999. Okay. Now if I also want the body text to be that color, I can copy this, make a comma and paste, and then I change this to bio, right? Because that was the bio text. So now the bio and the title are the same exact color.

0:57:05
And this is a more efficient way to write the CSS, all right? I know these icons for sure. We want those to be a different color, right? So I’m going to do TeamCard double dash dark. And then TeamCard double underscore icon. And I need to see how these are structured. I wonder if they use background color. Let’s just try red. Oh, they do. Check that out. Okay. Awesome. I’m just going to leave that for a minute and then border color red as well. Awesome. That’s good. And then the icon color itself can it be white? Yes. Okay. This is going to be easy to target. And look, I didn’t need to do like this like target an SVG. Remember we talked about try to avoid styling HTML elements with your CSS style things with custom classes. Notice I also did not have to do TeamCard double underscore icons wrapper. And then TeamCard icon. You’ll see a lot of people do this. And this is where I was talking about with specificity and left to right processing and non flat CSS. We want the CSS to be as flat as possible. So I only am targeting TeamCard dark team card icon. I’m making my changes there. Okay. So let’s see what we actually want to do with our background color. We may want to go with something like 444. Yes. I believe that’s what we want to do. Border color is going to be the same. 444. Oh, not FFF 444. And then our color is going to be something like 777. No, that’s not enough. 999. We’ll do 999 on that. Okay. And that’s it.

0:58:42
So a little bit of CSS and look how organized this CSS is. And anybody can come and see exactly what’s going on here. They know exactly what’s changing. What we’re targeting. There’s no questions. There’s no class collision potential. Super scalable. Super manageable. Everything is good to go. So now watch this. I’m going to take off the, let me zoom out. We don’t need to be all zoomed in anymore. So I’m going to grab my card here. I’m going to remove the TeamCard dark. Let’s say we wanted Philip. Philip. We want you to have the dark card. Okay. So we’re going to say TeamCard dark bam. And now Philips card is dark and everything has changed to match it. I didn’t do the hovers on the icons and all that stuff. But you get the point, right? What if we wanted Luke to also have a dark card? Maybe we want Sarah to stand out by having a team card dark by having the only light card. So I’ll do team card dark here. So now Luke and Philip have dark cards and she has a light card. See how this is a modifier class. And we didn’t have to create all new classes for all these things to create a dark card. We created one modifier class. We leveraged that class to target the elements that are part of this block, this component. This is bam. And this is absolutely a game changer for building your websites for all of the reasons that we just covered. Let me go back to here. Back to camera. Okay. So I hope this, first of all, I hope it made sense. I know we covered a lot of stuff. If you found this helpful, hit like, hit subscribe, drop a comment below. Let me know some things like, hey, have you been using bam already? How has it changed your development? I want you to let me know in the comments.

1:00:32
Did you not even know what bam was before you watched this video? Drop a comment below and let me know if this video made sense to you or if you have any questions. If you have any questions, drop those as well. As you guys know, I go through and respond to every single comment. I’m going to try to help you as much as as possible. And I will be using bam. I’ve already been, I already used bam and all my other tutorials. Here’s the official tutorial on them. You’ll see me using it more in future tutorials. So you’re going to pick up more and more as we go along. Of course, if you want more in-depth stuff, super granular on not just development, but agency related business stuff, freelancer stuff, SEO, accessibility, join the inner circle. The inner circle is where all that really gold stuff is that if you think these free tutorials are gold, the inner circles where the real gold is. But that’s it. That’s the end of this tutorial. Thank you guys. If you see anybody asking about bam or have any questions about bam, share this video with them. Love you guys. I’ll be back very, very soon. I’m out. Peace.