WDD LIVE 058- CSS Pop Quiz Results, Explanation, & Live Breakdown!

0:00:00
Hello, hello, hello. Welcome. It is another Tuesday. It is another WDD live. Go ahead and say hi in the comments. I am all out of coffee, which is awful news.

0:00:16
Absolutely awful news. What’s up, Evan? What’s up, Philip?

0:00:19
What’s up, Chris?

0:00:20
Chris, with no H. It’s a C, straight up, C-R-I-S. Okay. Good to see you, Chris. Uh, Steven’s here. Lynn is here. Papa, digital domain. Marco’s here. Calisthenics Ireland. Good to see you. Jan Paul, D 1 23. Andre is here. Sarah, welcome to the stream. Welcome. Welcome. Welcome everybody. Okay. Is audio good? Is video good? Oh God. Hold on. Hold on. We gotta, we gotta cut this off.

0:00:49
Welcome everybody. Okay. Where is that coming from? Is audio good? Is video good? Sarah?

0:00:55
Oh God, hold on, hold on. All right. We got to, we got to shut this down. Okay. We got the remove favorite. How do we do that?

0:01:01
Okay.

0:01:02
Yeah, that’ll work.

0:01:03
That’ll work.

0:01:04
Okay. Yo. All right. What’s up, Mark? What is up? We’re off.

0:01:10
Reinhardt’s here. Excellent. Okay. We’re off to a good start with the double stream, as you can see. Already over 100 people watching, that’s fantastic. Listen, here’s the agenda for today.

0:01:19
You know, normally what we do on WDD Live, we do in-depth, what just happened to the stream numbers? The double stream happened and a bunch of people ditched. They’ll be back. Okay. Normally on WDD Live, here’s what we do.

0:01:35
We in-depth critique websites. We talk about accessibility. We talk about maintainability. We talk about best practices. We talk about the UI. We talk about the UX.

0:01:47
We talk about everything that makes a website successful. And in the process, people learn a ton about web design, professional web design, and making their designs better, making their projects better, copywriting, all of that. But what we also do often is take a break from doing that and we deep dive a specific topic or area or whatever, because it is web design for dummies.

0:02:09
That’s what WDD stands for. It’s web design for dummies, not dummies. Dummies. Okay. We, if you haven’t, if you’re new here, you know, go back and watch early streams. It’s all explains what that means, but really it’s a variety show. It allows us to do anything that we want to do and talk about anything related to web design. And what we’re going to do today is we are going to look at a pop quiz that I posted.

0:02:32
This pop quiz came from a video that I saw where somebody was teaching, okay, add a class to something and then you don’t need any classes on the child elements. You just need to target the child elements by their HTML tag, by what they are. And okay. So I decided, I decided, because a lot of people commented on it, where they were like, Oh, this is fantastic. I mean, thank you for this. Okay. You know, all of that kind of stuff. Right. And then I, but you know, it raised my eyebrows. And then I, so I was like, well, let me do a pop quiz. Let me see what people think. So I put two selectors

0:03:10
side by side and I had people vote on them. And I did this on Facebook. I did this on the inner circle. I did this on YouTube, which the YouTube post thing, you know, it doesn’t seem to do all that much. I did this on Twitter. Anyway, I got a bunch of responses.

0:03:24
I figured that this would be pretty clear cut, like the answer would be pretty clear cut, but it was way more discussion and, you know, voting for one of the versions than I expected. And so I decided, you know, this would actually, a lot of people said this would be a very good topic for a video. And of course I decided, well, why not, why not do it as a live stream then? This is going to help you understand CSS better.

0:03:53
This kind of discussion is going to help you understand the concepts like organization of your CSS, specificity, selectors. Okay. There’s, we’re going to build a blog card, okay. So if you like seeing things get built, like, hey, that’s kind of a useful thing, right? Most projects you’re probably going to need a blog card of some sort.

0:04:13
So we’re going to talk about how to build a blog card. And we’re going to build it two different ways, and we’re going to look at the pros and cons of how this CSS methodology works versus this CSS methodology over here. So, are you guys excited for that is question number one. Again, taking a break from doing web design critiques to do something that’s actually,

0:04:34
you know, super practical and super like learn the philosophy behind this. Philosophy in web design is very important. And then what we’re going to do is we are going to do Q&A after that. So, and you can ask questions while we go. It’s perfectly fine. Just make sure that your question uses a hashtag.

0:04:53
So hashtag Q or hashtag question. That way I can filter all of the questions and I can get right to answering. Okay. As soon as we’re ready for Q and a, uh, okay. Uh, Derek says, I vote for Kevin bot bubble in the corner of ACS has 3.0 that yells at me when I make a chump move.

0:05:10
We, we did, we did consider something like that. You know how bricks when you save, it’s like fantastic,

0:05:14
oh, you’re great.

0:05:15
And whatever all those positive affirmation messages are on save, I thought of doing them for automatic CSS, but it would roast you as you did it. You should be able to turn that on, right? There should be a turn this feature on where it roasts me when I’m doing something wrong.

0:05:33
And then we could have obviously applaud you when you’re doing something great as well. Okay, let’s do our first thing. Our first thing is gonna be taking a look at the actual quiz. So here is the one that I put on Facebook.

0:05:46
And I don’t know why Facebook still doesn’t have a poll feature, or maybe I’m missing it. I think it only exists in groups. It doesn’t actually exist on your profile, which is very disappointing. But it was very simple pop quiz,

0:05:58
which one is better and why. And so we have this class service card, double underscore featured image. And by the way, I’m on my B team set up here. So can everybody see everything? Are we, are we good? Let me just check.

0:06:13
Hmm. I assume everything is working fine with screen share and all of that. So I’m just going to just yell at me if something’s wrong and I’ll fix it 10 minutes later after I finally realized you’re yelling at me. But service card double underscore featured image is option A. And then we have service card space figure is option B.

0:06:36
And of course, that could be image. And it can be a lot of things. It could be an H2. It could be a paragraph. It could be a, you know, it’s just, I was hoping people would get the context of the question without a whole bunch of deep explanation.

0:06:48
And then I just got the answers. And so Jason said, a service card figure. Now his reasoning was a little questionable, right? He said, statistically, when somebody asked the question, the answer is the second option and he was honest beyond that. I couldn’t tell you.

0:07:02
And then we have Brendan here. Is this a quiz, give feedback. I would say it depends. So Alexander says, I would say it depends on what you want to see. It says, but I would say featured image, since who knows what the other image you might be referring to for service card, it might make sense to just have one image anyway.

0:07:22
Okay. Service card featured image, and then gave some reasons. And then this person said, well, if you do it this way, you know, in this situation, this one’s better in this situation, this other one’s better. Some people just mentioned that they noticed that one of them was BEM and so I think they voted for that because they’ve felt, they’ve just felt like, well, I mean, I’ve heard BEM is good and so

0:07:44
I’ll vote for that way. But I don’t know if they know beyond that why, why they might vote for that version. So Chris prefers the class name over the element tag name. Steve prefers the figure. There was a lot of back and forth. I thought again that this was going to be very, very, very clear cut when I asked it. Let’s go over to the inner circle and

0:08:09
you can actually see the poll here. 77% did vote for the BIM version and then 21% voted for the HTML selector version. 2% said they do the same thing, which was when I did the polls, well at least in the inner circle that was that was an option there The Twitter version and now I see a little bit closer on Twitter 60% said the BEM version 40% said the HTML selector version So, okay. All right. So let’s go ahead and talk about it

0:08:43
We’re gonna go in and let’s go into here. And unfortunately, I don’t have my two screens, so I have to flip back and forth. Let’s see. Okay. All right. All right.

0:08:58
Yeah, we’re good. We’re good. We’re good. Okay. All right. All right.

0:09:04
Let’s just go ahead and get into it then. So what I’m going to do for this example, we are going to build a blog card. Now what I will tell you is, and this camera shut off last time. It doesn’t handle the heat well in 4k. I might need to turn the turn turn the fan on in a minute. I’m just reminding myself mental reminder that camera may implode at any moment. Okay so I will tell you that the

0:09:28
HTML selector version is a very popular way of writing CSS. Now the question I think would be popular amongst whom, okay. Because one of them is objectively superior to the other. And that’s why I thought that this was going to be a very clear cut quiz, very clear cut scenario. I expected it to be like, you know, 95% to 5% something in that realm.

0:10:04
Uh, and we’re going to talk, that’s why we’re doing this live stream. We’re going to go point by point exactly why one way is objectively better than the other. But when I say that there is a lot of popularity in the HTML selector method. Um, I, I do kind of question like, it’s cause that’s kind of the almost the default like if you don’t know BIM and you don’t know the reasons you would probably just Think that that’s okay. You would just think that that’s

0:10:32
Workable or something and I think a lot of people just end up doing it that way Maybe because they just don’t know better Which is why we have to have these discussions why we have to go through this stuff Because there are a lot of ways to skin a cat in CSS and web design and you have to know The way I’m choosing. Why am I choosing this way? What are the pros and cons of this way versus the five other ways that I could

0:10:55
possibly do this? And if you know the pros and cons of all the ways and you make a choice, that’s one thing. But if you just do this thing and you don’t even know the other ways and don’t know the pros and cons of the other way, that’s not a great thing. That’s not a great thing, right?

0:11:09
So that’s why the education is super important. So what I’m going to do here is I’m going to just make a essentially a two column grid and we’re going to put two blog cards side by side. So I have one and there’s the other and I’m just going to let’s let’s just make this a little bit narrower for now. Let’s choose like L okay so our cards aren’t super wide or anything like that. So here’s card A and here is card B. We’re going to build these from scratch and we’re going to talk through it as we go.

0:11:40
I’m going to build the HTML selector version first. So I’m going to start out by doing two blocks inside of here. So this is going to be my media wrapper. This is going to be my content wrapper. In my content, I know I’m going to want a heading. We’re going to start very basic.

0:11:59
Text and then we will do essentially just that for right now. Okay, we don’t have to over-engineer this or make it too complicated. I’m going to do an image in my image wrapper here. Oh, look at that. I don’t even have, I don’t even have any images. Completely unprepared as usual. So what do we want to blog about today? Let’s, let’s blog about nature. Okay. And let’s go grab a landscape image. Oh, this is very popular. Oh, that’s an Unsplash Plus. We can’t have that, can we? That’s for the upper crust web designers. So let’s go with, yeah, let’s go, I don’t even know what this is. This is a nice little nature park here. Let’s go to

0:12:42
Squoosh. Squoosh this up. Let me hover, pull, resize. Let’s get a little maybe like 1920 here Okay, throw that in and then we’ll go back to where we were working and we will drag that in All right, and then we’re gonna insert that Perfect. We’re gonna make this into a figure tag here and I think what I want to do Before I do anything else, let’s go ahead and talk about just let’s organize our structure panel because You know when you’re looking over here, you should be able to see what everything is.

0:13:16
This block, block, image, block, heading, base, that’s not good. That’s not a good way to do things. Okay. You do want to take like, you know, this is kind of how I know I’m watching. You know, if you’re, you’re watching somebody doesn’t organize their structure panel, should be a little bit of a red flag.

0:13:31
Okay.

0:13:31
Little bit of a red flag. This is going to be our, our HTML card. Okay. We’ll just call this HTML card. This is going to be a media wrapper. This is going to be media.

0:13:42
If you want to know why I say media instead of image, you could obviously go with image wrapper and image. This is a little bit subjective here, but I do think there are pros and cons and that’s why we’re talking through it. But I do media wrapper because you don’t actually know what media has to go there. I’ve seen blog cards with video embeds in them, right?

0:14:06
And so if that was going to be a video, for example, then image wrapper wouldn’t make all that much sense anymore, would it? But media applies to any type of media and it could even be an audio wrapper. I mean, what if we wanted to use this as like a podcast

0:14:23
audio card or something, right? Okay, so you get the point, right? It’s just more generic names, but still it’s generic, but still descriptive, but doesn’t box you in to it being a very, very specific thing, unless that actually needs to happen. We’ll call this the content wrapper.

0:14:39
We will call this the heading. That’s fine. And you know, you could call this the lead. You could call it the description. Lead is a journalism term. I tend to go with that.

0:14:48
But you could call this really whatever you want here. Okay. And as you see, automatic CSS already just spacing things out for us. What else do we want to do here? Well, we just want to add a class.

0:15:01
Okay.

0:15:02
And we’re just going to call this an HTML card. I’m calling this an HTML card because we’re going to be targeting HTML elements with it versus over here, which we will literally just call a blog card. Cause we’re going to use BEM and we’re going to compare the two versions and all of that. Okay. All right. So, and I’m going slow so that we can make sure beginners can follow along and nobody’s getting lost and people have time to process and ask questions and things like

0:15:27
that. Obviously it’s a live stream. You can’t just quickly rewind, you know, you have to wait till later to catch up. So we’ll just go nice and slow. We’ll make sure everybody’s on the same page. Okay, so we have a an HTML card. We have a figure. Let’s also go ahead and just get a front-end version of this going and we’ll inspect this front-end version. Let me put this over here so you guys can see it. Let me, we don’t want to zoom in on that side really. We want to zoom in probably on this side. Okay, so as you can see right here, I’m not going to do all

0:16:00
the list semantics and all of that. It’s a little bit beyond the scope of this, but we will see that we have the card itself right here. So this div is the card. If I open it up, we’re going to see the two blocks that are inside. These are effectively the two wrappers. They don’t have any classes on them right now,

0:16:16
so you can’t really identify them very easily, but that’s the media wrapper and that’s the content wrapper. And then when I open the media wrapper, you are going to see a figure tag and then you’ll see the image inside of the figure and then when I open the content wrapper you’ll see my h3 oh and you’ll see that this is a div and not a paragraph that would not be fantastic I

0:16:36
did that on purpose you’re gonna see why in just a second okay all right so let’s go ahead and hop back into the builder the HTML card class according to the tutorial that I was watching and the way that many people do things is all I need. I’ve essentially identified that this is the HTML card and I’m going to do targeting without any additional classes. And this is kind of the sales pitch that you will be given for this approach that, oh,

0:17:05
you know, BIM, you got to put a class on everything. That’s really time consuming. That really adds a bunch of selectors that you have to worry about. That, that, that, that, that, that, that, that, okay. about that. Okay. And in this method right here, I mean, look how easy this was. I mean, I just put an HTML card and then I’m just going to do my styling based on that one class.

0:17:26
That’s all I need is that one class. Okay. All right. Let’s build the BEM card. So this is going to be our blog card right here. We’re effectively going to do an image pop quiz for everybody on the stream. Why do we put our media in a rapper? Do we need a rapper for the media? Not technically, but why do I put everything? Why do I put all my media in a rapper?

0:17:50
That’s a pop quiz. It is a good question and I’ll just, I know it’s going to be asked, so I’ll just head it off. Okay. Um, what is the purpose of that rapper? Let’s go ahead and add a heading and let’s add text here as well.

0:18:02
Okay, I am going to, we’ll leave that a div, well just like we did on the other one. Okay, and we’ll make this an H3, just like we did on the other one. Even though technically there is no H2 in this section, if you notice. So these should not be H3s unless there’s an H2 in this section. But again, these are things beyond the scope of this video. You can go watch all of my other videos if you want to get all of the details,

0:18:27
we’re talking about one specific thing right here. All right. So I have my blog card. Let’s go ahead and organize the structure panel. So this is going to be my media wrapper. This is going to be my media. And then this is going to be my content wrapper. So you’re seeing the same thing get built twice effectively. But we are going to take a different approach to styling.

0:18:45
This is going to be the lead as well. Okay. Now what I’m going to do on this right side, and I’m gonna use an automatic CSS tool for this, you would have to do this manually if you weren’t using automatic CSS, but I’m gonna click this BIM button right here.

0:19:01
And effectively what this is gonna do is create and assign all of the classes for me based on the organization that I already did in my structure panel. So I’m gonna go ahead and hit apply. And now every single element in here,

0:19:13
the media wrapper, you can see right here, has a class, the media has a class. Now right away, this goes to show that one of the arguments against BIM will be, it’s so tedious to put a class on every single thing. Well, not really. Not if you use the right tools.

0:19:31
It’s actually not tedious at all. It’s faster and better to do it this way. So you could see one, one, you know, con and I would say if you’re writing code, that’s a con of BIM. A con of BIM is that you have to write a lot of class names. If you are in a page builder and you’re not using automatic CSS, it is a con that you have to select everything and manually add a class to it. Okay, that’s a con, but automatic CSS deletes that con and that’s one reason, you

0:20:01
know, just a small reason, one of a thousand reasons that you might want to use something like automatic CSS. Now, before we go any further, let’s just go ahead and check in with everybody. Are we following along? Have I lost anybody yet? And it’s okay to say you’re lost.

0:20:15
It’s okay to raise your hand and say that you missed something. And you can ask a question at this point. If you missed something, you can clarify something if you want to at this point. No problem. We’re just going slow trying to make it make sure everybody tags along. Okay nobody’s left behind. Okay let’s check on our pop quiz

0:20:31
results. Why do images need a wrapper? Andre says you can add for example overflow to the image with a wrapper. Rune says if you need pseudo elements to be able to still styling and layout applying custom styles such as padding, borders, you can do that to normal images. Trying a layout alignment position within the parent container, that might come in a little handy. Stephanie says half lost. All right Stephanie, what are you, is there anything in particular, in

0:21:05
specific, that you’re confused about that I can clarify? How about that? Okay, Chris says all good so far. Digital says responsive design, grouping related content, JavaScript interactions, accessibility. For the most part, it is because images, if that is going to be an image media, which this is, image tags don’t support pseudo elements. Now, putting them in a figure does support pseudo elements, but in a page builder, that’s

0:21:33
a toggle switch, whether it’s a figure or not a figure. And adding a wrapper is not a toggle switch. If you add a bunch of images and then decide, let’s say you’re like, oh, I’m going to make those all figures. It’s okay. I don’t need a wrapper because I can do pseudo elements on the figure tag. Excuse me. And then somebody comes along and like, actually, those aren’t supposed to be figure elements. And you have to remove the figures with just the switch, which is fine, you’re screwed now.

0:22:04
You don’t have the pseudo element capability because you didn’t have a wrapper and you can’t add wrappers easily. It’s basically an insurance policy, okay? Because adding HTML after a page is created to a bunch of different items is a little bit of a disaster.

0:22:19
That’s a little bit of a shitty scenario. You don’t wanna catch yourself in that scenario. It’s far easier to just wrap the damn thing in the beginning.

0:22:27
Okay.

0:22:28
And then you don’t have to worry about it. You’re, you’re covered in all situations. And you have the other issue of with every wrapper or like a figure element, for example, you get two pseudo elements. You get a before and you get an after, and that’s all you get. Okay.

0:22:41
You don’t pseudo elements can’t have their own pseudo elements, at least not yet. So if you need three or you need four, well, you’re screwed again. You gotta go manually add another wrapper to every instance of those things. Where if you just gave yourself the wrapper in the beginning, which really costs you nothing, okay?

0:23:00
It costs you nothing to do it. It costs you a millisecond of your time and it costs you one extra DOM element on the page for every piece of media, which isn’t a lot. I mean, go to Elementor. If Elementor can give us 18 wrappers

0:23:12
for everything we add to the page, All right. Um, so it gives you now four pseudo elements for every piece of media. It’s insurance policy. That’s all it is. Okay.

0:23:21
Um, let’s see who has lost. Cause I want to make sure Stephanie. Okay. No, I’m trying to figure out why we put an image in a wrapper. I watch her one-on-one. You mentioned it and try.

0:23:28
Okay. Okay.

0:23:29
Got it. All right. So we’re, we’re good so far.

0:23:30
All right.

0:23:31
So HTML card, obviously none of these things have classes, right? So I wanna do something to, let’s say, this featured image or maybe this content wrapper. I wanna add padding to this content wrapper. First I wanna, for the HTML card, let’s just add a background color.

0:23:52
So I’m gonna go in here and we’re gonna do primary light. Okay, let’s do primary light as our background color for that card right there. I’m gonna do the same thing right over here. So we’ll do primary light on this one as well. Fantastic, okay.

0:24:08
Now what I wanna do, as you can see, this has created a problem right off the bat. And if you’re wondering why I use content wrappers, you’re about to find out why I use content wrappers. So what is the problem? Let’s just pop quiz it.

0:24:20
I don’t wanna do all the work. I want you to tell me what problem have we now created with this design? By simply adding a background color to the card. I mean I wanted to add a background color and this I did what I wanted to do but it has created a new problem and how are we going to fix that? Well I just

0:24:39
throw in if you if you already see the problem and you already know what the solution is go ahead and throw that in as well we can just do all this at the exact same time. So yeah Mano says you have no padding. Well, that’s kind of a description of what’s needed versus the problem. The problem is that you have text touching the edge of a box. The background color actually visualizes the box, right?

0:25:03
So when I did not have a background color, when it was like this, you didn’t know that there was a box there. Visually speaking, there’s no edge. And thus, this actually looks okay. But the minute you add a background color to this, you go primary light, well now you’ve visualized the box.

0:25:20
You’ve shown me where the edges are, and now I can see that the content is actually touching the edges of the box, and that’s not something that you want to have happen, right? So I have to add padding in here. Well, this right away is gonna show us,

0:25:35
at least in a lot of page builders, not every page builder, but in a lot of page builders where the first card version starts to fall apart. Okay, in the BIM version, I can simply select this content wrapper right here and I can go to padding and I can choose, you know,

0:25:50
whatever I want my padding value to be. Okay, and then you’re also gonna notice that this card has a gap in there. So I’m just gonna go ahead and we’re gonna clear the gap out. So now this card on the right looks fine.

0:26:02
Okay. This card over here. I can’t just do that.

0:26:05
Okay.

0:26:05
If I, if I start to do that, I’m going to start to do the exact same thing. And you have to tell me what I’m doing wrong here.

0:26:11
Okay.

0:26:11
What, what is going wrong right now? As I, as I try to do exactly what I did on the right hand side, I’m trying to do exactly what I did over there. I’m trying to do it right here. So what is going wrong? What is the difference and what is going wrong and I’m gonna go

0:26:27
ahead and I’m gonna put in my row gap of zero here as well. They look guys they look identical something terrible has gone wrong but they look identical and this is another kind of this dish goes to show you it’s not just how things

0:26:43
look

0:26:44
ok we it’s not we’re not our job as developers is not to just push pixels around a page. I just pushed the pixels into place. They look exactly the same. One is terrible and the other one is fantastic. What is the problem now that we have created? So as Sam mentions here, okay, you styled the ID, right? Did anybody catch that? If you’re a beginner, if you’re on the beginner side of things, these are the things you have to catch, okay? You have to see, ooh, distinction, big distinction in what’s happening here.

0:27:19
When I clicked this content wrapper on this right side card over here, I activated this class called blog card content wrapper. And I put my styles there, my padding there. On this right side, I styled the ID because there is no class. Why is there no class? Because the proponents of this model said that there should not be one, that the only

0:27:43
class should be the main class on my overall card. And you see in a page builder, now they also, by the way, okay, in all fairness, I’m not suggesting that they suggest the style of this at the ID level. That’s not what’s happening. But in a page builder like Bricks, I don’t have a choice, really. My other choice is to recognize, well, I can’t do that.

0:28:05
So let me just get rid of that for a second. You can’t do that. You don’t want to style at the ID level. We should already know that. That’s 101. That’s fundamentals.

0:28:12
That’s day one. Day one CSS, don’t style this shit at the ID level, okay? So how am I going to leverage this HTML card class to add padding to this content wrapper. Golly, this is really, really, really difficult, right? So in some page builders, you can do something like this.

0:28:35
You can do HTML card and then another selector, right? And you can style that, that’s a valid selector in CSS if it had the periods and all of that stuff, right? You can’t do that in Brics, Brics does not support that. Brics does not support complex selectors, compound selectors, combinators or anything else.

0:28:54
Okay. You can do one class at a time, one idea at a time, one thing at a time. That’s it. Okay. I don’t even think you could target HTML elements. It’s really a class system.

0:29:02
It’s not a selector system. Now in like generate the new version of generate blocks, they have an actual selector system. You can write whatever selectors you want and then you can style them. And that’s what was being demonstrated in the video. But just because you can, doesn’t mean you should.

0:29:20
Okay, let’s say that again. Just because you can, doesn’t mean you should. All right, so now how would we do this in Bricks? You still can do this in Bricks. So we’re gonna go to the custom CSS box. We’re gonna use the dynamic root selector,

0:29:34
which is the same thing as writing HTML card, okay? It’s just dynamically referencing it. In case this class name ever changes, my CSS won’t break. That’s the only reason really we’re doing this, okay? And then I have to target something. I have to target that content wrapper. But guys, the content wrapper doesn’t have a name, okay? It doesn’t have…there’s no unique identifier other than the ID, which I can’t use. I’ve got to stay away from that.

0:30:04
So I think what they would say to do in this regard is to add another class, just for this one example, just for this one instance to identify this thing, maybe as the content wrapper. Okay. But we’re not going to, this is not BIM. They’re not recommending BIM here.

0:30:18
So, cause if they were recommending BIM, they never would have recommended this situation on the left that we’ve gotten ourselves into. So I think that they would say content wrapper, which would then give me something to target. So I would say root and then content wrapper like this. So the HTML cards content wrapper, that’s what I’m targeting. And I’m going to go ahead and add my padding to that.

0:30:38
So we’re going to do padding and we’ll do space M. And now we’re back to normal. We’re back to, well, normal, okay? But we didn’t style the ID level. We’ve achieved the visual outcome that we’re trying to achieve. But we have done this in a very, very different way.

0:30:57
And this is where we have to start learning about some other CSS concepts. Okay? Getting deeper into understanding what exactly is going on here versus what is going on right here. Because visually, again, the same outcome has happened, but in two very different ways, with two very different sets of pros and cons that we very much have to be aware of.

0:31:17
Okay. All right. Let’s pause here. I’m going to do something to the image in just a second. All right. Uh, but we’re going to pause here. Make sure everybody’s following along. Okay. No scalability styling at the ID level. Okay. X and Y axis. And, uh, I don’t think that has anything, uh, in play. Okay. Uh, Stephanie says a bit too fast for her. Well Stephanie, you can ask questions in the chat and I’m sure people in the chat will be able to chime in and help you through understanding what exactly is going on.

0:31:48
The chat is very knowledgeable and the chat is very responsive. So I’m just going to keep going and we’re going to see this stuff play out as we go. So what they, I’m going to focus on the image now because that’s actually what the pop quiz was about, right? So remember we have this image, which is wrapped in a figure tag. Okay. Um, but really, you know, do I target the figure?

0:32:10
Do I target the image? It really depends on what I want to do. Both ways in my estimation are wrong. Uh, the way that this was proposed, we’re going to go ahead and just target the image. So that’s going to be the easiest thing to look at, because what I want to do is

0:32:22
I want to change the aspect ratio of the image. That’s what I want to do. I want to make sure that these blog images are 16 by nine aspect ratio, okay? So once again, because I’m using Bricks, I don’t have a complex selector system.

0:32:40
I have to write custom CSS. I can’t even use the proposed method without writing custom CSS. It’s not even an option. So that’s obviously one huge downside for a lot of people. So I’m gonna go to style

0:32:52
and then I’m gonna come down here, see how the HTML card just showed up in place of the root selector. Bricks does that sometimes. We’re gonna go with image, okay? This is what they proposed.

0:33:02
This is, and this is what the pop quiz compared, right? It’s just instead of figure, I’m doing image. And I’m gonna do aspect ratio. We can see that if I do one-to-one, it becomes a square. If I do 16 by nine, I did that because I wanted to see if it actually changes anything.

0:33:17
It actually does. Okay, so that’s not a 16 by 9 image. So now 16 by 9 actually does change it because it’s not the, I’m not calling for the same aspect ratio the image was already in. And so this is what they, this is what they proposed. This is how you should do it. And if you do it this way, you don’t need to put glasses on everything, guys. You don’t have to. It’s so much easier. So isn’t that so much simpler, right?

0:33:41
Then all this BIM stuff, all this naming, naming things. I’m sorry. Got a name guys. It’s got an image. That’s what it is right there. Why don’t we just target that thing?

0:33:49
Why don’t we just target that thing? Well, let’s go into the front end here and let’s inspect a one more aspect of this that I alluded to earlier. Uh, this div right here, this basic text.

0:33:59
Okay.

0:33:59
We’re going to ignore the fact that Bricks already puts a class on this, br-brixy-text-basic, okay? We’re going to do what they propose to do, which is target the HTML element, okay? Well, that HTML element is a div, okay? All right, some of you might see, that’s a little bit problematic. Let’s go ahead and just dive in though. I mean, we got to follow through with this. So we’re going to go to HTML card. We’re going to go to root. Let’s try to type better. Root div. All right. And what I want to do is I want to make that text a little

0:34:36
bit smaller. Okay. So we are going to say maybe font size. We’ll do text S. Oh, wow. Oh, all right. That’s a problem, isn’t it? All right. I didn’t want, I didn’t want the heading to change the size. I just wanted the text to change the size, but now the heading is changing the size. Guys, why are they both changing? Pop quiz, pop quiz, why are they both changing?

0:35:00
Now, while you guys are answering that, I’m gonna go over here to this card, and I’m just gonna select this text, and I’m gonna select that class, blog card lead, and I’m just gonna go change that to S. And well, exactly what I wanted happened.

0:35:14
Okay, so that’s nice. What’s happening with this situation over here? What is happening with this situation over here? Let’s go back to the chat.

0:35:22
Sarah was saying,

0:35:23
I was thinking that for border radius, styling all figure images would be easier, but I can see how aspect ratios BIM would be easier. Well, no, I mean, let’s do it with border radius also. That’s a fantastic point. That’s a fantastic point.

0:35:40
I think we should do it with border radius also. Okay, so Andre says they’re both inside divs. Actually, they’re both inside the same div, and I didn’t even choose a div. I just didn’t have any other options, so I chose div. And so what somebody might see here is, oh, well, actually, no, if that was a paragraph, that wouldn’t be happening.

0:35:59
That was a paragraph that wouldn’t be happening. Okay, well, that’s a good point. That’s a good point. Let’s go fix that. So let’s make that a paragraph. And we have to change our targeting now. So we’re going to go to our HTML card. And instead of targeting this div, if we just say, well, I want the paragraph to be small. Now we’re in a better situation here. Now we see the heading is correct. We see the text is small, the way that we wanted it to be, because that’s what I’m telling. I’m telling the paragraph of this card to be small

0:36:29
text. And so it is. And just like it is over here as well. Why is there a size difference? Because this image right here doesn’t have the aspect ratio. So I’m going to go to media content and we’re going to go 16 by 9. And now both cards once again look completely identical. But still, there is a disaster of a situation happening on the left-hand side that is unknown to anybody that doesn’t have the experience to know what is rapidly going off the rails on this left-hand side. Okay? But again, the left-hand side is the way that

0:37:01
it was taught to be done, so that’s the way we’re mimicking. Okay, so let’s go to the front end and just prove that we are seeing the exact same thing left to right. We’ve taken radically different approaches to doing this, but same visual outcome. Okay, so let’s go back and let’s talk about the border radius. Now somebody mentioned border radius. Oh, hold on. Did, did my, oh yeah. Hold on. I just got a warning on the, on the camera. Hold on. Where’s that button? Need the button.

0:37:29
Where is, Oh, Oh, hang on one second. There’s a, there’s a button back here.

0:37:38
Where is it?

0:37:39
I bought a fan and this fan like attaches to this little camera. All right, hold on. You’re going to look at my wall for a second. Okay. All right, let’s go back to Ecam.

0:37:47
Sorry for the short break.

0:37:51
Oh, do we have no signal? Hold on. All right, you may not be able to see me for a little bit.

0:37:56
May just have to do the stream.

0:37:57
There we go. I think the camera’s coming back. No signal, there it is.

0:38:00
Okay, good, we’re back, we’re back.

0:38:02
The fan is on, so the camera hopefully won’t light itself on fire. That’s a little adjustment there.

0:38:29
Okay.

0:38:30
How about there? All right. That’s good. All right.

0:38:34
Let’s keep going.

0:38:35
Let’s keep going. All right. Anything in the chat? Anything in there? Are we good? Are we good?

0:38:41
Don’t burn your house down. I won’t. I thought overheating the camera is a Jonathan thing. No, this is my B-team setup, and the camera is very sensitive, a very, very sensitive little camera. Okay, alright, let’s go with the border radius situation.

0:38:55
So, I would like my HTML card to target the image and well, there, look we’re already targeting the image. Okay, so why don’t we just go ahead and add a border radius on that image. And we will do, hmm, 5 pixels. Okay, something like that. And, maybe 10. Let’s make it much easier to see and actually we’re seeing now obviously we can’t do that. Let’s go to the front end and see why we can’t do

0:39:22
that. You see the edges of the card right? I wish we could do this for well we actually can. We actually can. If I just add a little padding we should be good and then we’ll add some border radius to the card and that will help us out as well. So let’s go to the well hmm how do I add padding to the media wrapper when it doesn’t have a name? Maybe I’ll just do it to the figure. How about that? Let’s go root and let’s go figure. And then let’s go padding. And let’s do space M because that’s what we did on the rest of the card. Okay.

0:39:55
And then now that that has a border radius, we can do another radius here we’re not going to bother with doing the concentric radius situation and all of that but I’m going to go to border and I will do 10 pixels here okay all right and now we have and now we’re in the realm of we’re just throwing out random numbers for shit but as you can see uh well that’s actually not great either because now we have too much spacing here we need uh yeah we need to take away the we need to take away the padding on our figure element on the bottom there. Okay let’s do padding inline and then we’ll do padding block start of space M and

0:40:37
now we’re good. Okay and this is just going to allow us to I did want to do the point of the border race on the image element so this is kind of the best way to make that happen. All right let’s go ahead and do that on this side. So if I was going to do that on this side, I would just take my media wrapper because that has a class on it, right? And I would just say space M there and I would do it on the right and the left.

0:40:58
And then we would be essentially in the exact same situation. Take my media and let’s go to border and go to border radius. And we’ll just do the 10 pixels here. And then on my actual card, we can do the 10 pixels there as well. Okay. So this gives us the exact same, not on that, that’s the wrong thing.

0:41:16
The blog card is where we need to be, okay? And 10 pixels there. And that’s gonna give us the same visual outcome once again, okay? So, perfect, right? What I wanna do is I wanna make this heading

0:41:28
a little bit smaller, okay? It is an H3 heading. I wanna make it the size of maybe my H4 heading. Cause I feel like maybe it’s a little too big for our design. Maybe I want a little bit of a tweener size.

0:41:40
Maybe I just want to make it 10% smaller or something like that. So what I’m going to do over here to do that is I’m just going to go on the class. I’m going to go to font size and we’ll choose one of the other heading sizes.

0:41:52
I can choose four and that’s fine. Let’s just go with four. Let’s just go, can I do that here on this side? No, I can’t do that here on this side. Bricks doesn’t allow me to do that. So I’m gonna have to go to the HTML card again and then I’m gonna have to go back to custom CSS and I’m gonna have to

0:42:08
come down here and say all right well let’s do root h4 now. Wait a minute it’s not an h4 it’s an h3 isn’t it? Let’s do root h3 and let’s do font size of h4. There we go. So now we’ve gotten that to look again visually the same. Guys the more I do this the problem that I’ve been alluding to the entire time is getting worse and worse and worse and worse. Everything you touch this way makes it worse and worse and worse.

0:42:40
Nothing has gotten worse over here on the right side. The left side continues to get worse and worse and worse.

0:42:45
Okay.

0:42:46
Okay. Now let’s start to demonstrate one of the big reasons. We’ll just start to maybe add something Let’s say that Bev has entered the discussion, but Bev this time Bev actually has a good idea this time Okay, and Bev is gonna say you know what guys I like I like the direction this card is going but this is a multi author website and

0:43:07
What we would like to do is add an author like like, can we get a little photo, a little headshot of the author and maybe their name too. I think that that would be fantastic. Okay, Bev, where do you want that to go? Well, let’s just try putting it at the bottom.

0:43:22
We’ll just start off putting it at the bottom. Okay. So in my little wrapper situation here, I am just going to put in another little wrapper. All right. And here’s the little block and we’re going to call this, uh, an, uh, an author wrapper. Okay.

0:43:36
And I will go with, let’s put an image in here. Now, is this one going to need figure tags?

0:43:45
Yes.

0:43:45
Is it going to need pseudo elements? If it does, maybe, you know, I haven’t seen like, have you seen a bunch of different pseudo elements just hanging around on an author avatar? Probably not. This is probably one of those scenarios where you could just make an executive decision to, I probably don’t need an extra rapper there so we’ll just throw

0:44:03
this in so do we have an avatar let’s go back to unsplash and we’ll just say you know someone that looks like an author there we go how about how about well see unsplash plus got us again she looks like an author let’s let’s just download her okay let’s go to back to squoosh here and bring her in and you know we don’t need this to be 1920. Let’s go like 600, something like that. All right, save her. And let’s go back to where we were. Bring her in. Fantastic. And insert. So here’s

0:44:36
our little author. Oh, gosh, well, we start to see that seems to be a little bit of a little bit of a bow, dear. Oh, gosh, what is our Oh, whoo. Okay. All right. Well, that’s a little confusing. Let’s pause there and Let’s just try to do that on this side over here. All right, so let’s put in our our block All right. So there’s our thing there. What do we call it over there an author rapper or something? all right, let’s just go ahead and throw an image in here and Let’s go. It’s gonna be the same image. We’re doing the same card on both sides. Okay. All right

0:45:11
That’s what I expected to happen. That’s the image I downloaded. So that’s what I actually expected to happen Let’s go ahead and put text in here as well We’ll just make that a P for now. And this is going to be the author name right author name Excellent. So we’ve thrown some additional elements into this card effectively We need to give them the BIM classes that all of the other things got right. So this was blog card and we’re going to do underscore author, rapper,

0:45:41
author, rapper, and I could auto bin this again. Okay. I’m showing you the manual way of doing this. And what I typically do is I copy that to my clipboard and then I would just do, uh, this is going to be avatar, right? Uh, and really I would probably want this to say author avatar.

0:45:56
It’s a little bit more descriptive and it, there’s no way no way anybody could be confused as to what this is what’s going on here and we’ll just call this the author name right here and so this is going to be blog card author name and so now these all have classes all right and now what i’m able to do is i’m going to say okay well this needs to be one to one it needs to be a square i want to object fit cover it and i would probably like it to be you know somewhat small let’s do like um let’s see if a hundred pixels. Now it needs to be smaller than that. Let’s do 60 pixels.

0:46:31
And then let’s do a border radius of what 50 VW. And then we can put that on all sides just like that. That’s starting to look like an avatar, right? Okay. Now what do we want to do with this author name right here? Well, I want to make that small text as well. And then I want to put these two things side by side. Um,

0:46:49
there’s a couple of different ways I could do that. I’m going to show you a little grid trick. Okay, we’re going to go to grid and we’ll do an auto and then a min-max of 0.1 FR and that’s going to put them side by side and then I can just use flex to align these to the center. Okay, the controls are not showing properly and Bricks is a little dyslexic with its flex controls here. And then we’re just going to tone down our little gap situation here and this is probably where I actually want a static gap

0:47:21
something like an XS or something like that. And then I could even throw you know a border on here. I mean I’m easily able to do a lot of these things just you know select the class, style it up, no problems, no nothing. Let’s go ahead and use our primary dark color here. Eh, okay, I don’t know. Does that look fantastic? I don’t even care about how it looks really.

0:47:45
Let’s do primary, just do primary. That’s fine, just do primary. Okay, so I’ve got my author and this is, she looks like a witch, I don’t know. A very small thumbnail, so it’s a little witch-like. Probably not the best photo to choose here, but that’s okay. As you can see, I’ve done what I wanted to do now let me keep trying to somehow work with

0:48:06
this fucking disaster over here on the left let’s put in text here this is going to be the author name all right that needs to be a paragraph tag fantastic what do I do now I I didn’t have to do that, okay? What is this identifiable, I can’t target the div, because there’s a bunch of them.

0:48:32
And as you see, what the hell is my image do? I haven’t told it to do anything, but it’s suddenly looking like this image up here. It’s got the same padding, it’s got the same border radius. I need it to be a one-to-one, like a square.

0:48:45
I need it to have the 50 VW border radius. What is going on? Let’s inspect this. I go to the HTML card I go to CSS okay well the figure is why it’s getting the spacing why I had to put the avatar in a figure because that’s technically correct but the other

0:49:02
thing had to be in a figure as well now they’re both figures so they’re both getting the instructions on figure and they’re both images so they’re both getting a 16 by 9 they’re both getting a 10 pixel border radius hmm so now what do I do okay well I guess to fix this what I have to do is I have to come in and remember what we did earlier we we use this like sneaky little content wrapper class well I’m just gonna come in and say author wrapper okay author we’ll just do an

0:49:29
author wrapper that’ll be an identifiable thing where I can actually you know select some of these things okay so now what I think I’ll do is I’ll go into root and in the author wrapper I’ll go get that figure element and I’ll probably undo the padding on that. Okay all right but but now what I probably have to do I’m gonna have to get the image that’s in there as well. Okay and what we’re gonna do with that is we’re gonna go with the aspect ratio right of one-to-one and then I think what we can then do is the border radius of 50

0:50:06
VW will take that little dash out that we don’t need and then maybe we’ll go with a width here of a hundred no that was too big right we did 60 okay that that seems about right gonna need a border on that let’s go to pixel solid maybe primary okay to match what we got going on on the right hand side of the author rapper that’s right the author wrapper needs some instructions okay and for that we’re gonna have to display this of grid and we’re gonna have to do our grid template columns we’re gonna have to do

0:50:37
that of the auto the the min max 0 1 fr situation we’re gonna have to do the I think it’s a line items here align items of center okay let’s fix our gap situation go space xs on that okay okay i think i’m there i think that i got there um now here’s the problem all right remember i said earlier you can’t have h3s in your cards if you don’t have an h2 in your section right before we do this let’s let’s do something else with this heading. Let’s go with, well, we already did the size.

0:51:17
Let’s do the color as well. I’m just trying to prove a little bit of a point here. Let’s go primary dark, okay? All right, excellent. So here, what are we gonna do? Well, we’re gonna have to go back to our HTML card.

0:51:30
We’re gonna have to go to our, find our H3, okay? We can go color, primary, dark here. Okay, now it’s gonna look exactly the same. All right, this is a paragraph. That’s fantastic. Okay, that’s a that’s a P. That’s a P. Okay. Now, I’ve got to fix something. I’ve got to fix the fact that these are not in a section. Like, let’s say I’m just putting these randomly on a page. There’s no section heading. There’s no h2. So technically,

0:51:56
these have to be h2s. Okay, so I’m gonna, I’m gonna, let’s just do this slowly you might not catch it at first I change that to an h2 nothing happened nothing happened okay let’s change this to an h2 oh shit a lot of stuff happened a lot of stuff happened there lost the size lost the color hmm okay well just making that one little change is now going to force me to go back to my HTML card Find my oh, that’s right I was those the instructions only applied if that was an h3 and that’s no longer an h3

0:52:38
I had to change it to an h2 so now I got to change that to h2 to fix it and Actually, sometimes it’s going to need to be an h3 and sometimes it’s going to need to be an H2. And so really what I have to do is I have to duplicate that instruction and just cover all bases. Just both of those bases have to be covered now.

0:52:59
Okay. Because of the way this is being done. Look how absurdly convoluted and messy this all is. I’ve got, and let’s go to the front end to detect this. Okay. Again, we have the same visual outcome.

0:53:13
Let’s go ahead and refresh. Same exact visual outcome. Let’s go ahead and look at this author avatar thing right here, this image. It’s getting HTML card, author, rapper, image. That’s a specificity.

0:53:28
You guys see that on hover, that specificity value of zero to one, okay? Let’s look at the exact same thing over here. Let’s go to blog card author avatar. That’s where I put my instructions. 0 1 0. Far less specificity. Let’s talk about a principle of writing CSS. One of the core principles, you guys already know about the cascade, right? So

0:53:55
it cascades from the top to the bottom and anything you put at the bottom is is automatically going to overrule anything that came before it, except, except if the selector has more specificity. If it’s a more specific selector, it will win regardless of where you put it.

0:54:15
Okay.

0:54:16
And so when you’re writing CSS, you have to understand that specificity is a very fragile thing. It’s like a very sensitive thing, okay? If you use too much specificity, you can’t do things later that you might want to do without unnecessarily creating even more specificity. And you get into what I like one commenter described it as a specificity arms race.

0:54:41
So one of the principles of writing good CSS is that you use the lowest specificity necessary to get the job done. You can always increase things later if it’s needed. So let’s use the lowest specificity to get the job done right now. Well let’s go back to the very first thing that we wrote, right? Right here, okay?

0:55:04
This HTML card target the image. Right away, that is two selectors. That’s specific. You’re saying I need to target the image, but I need to target images that are inside this thing called the HTML card Now if we look at over here All right on the on the media blog card media. That’s one

0:55:23
Thing that’s it. I’m just saying hey if it has this class, it’s going to get these styles That’s a 0 1 0 situation Versus over on the other side. You already started with a 0 1 1 situation. You already started with higher specificity. And if you look at BIM, one of the key principles of BIM and one of the most valuable aspects of BIM, because everything has a unique identifier. It doesn’t have to be, you don’t have to select the parent to select the child. What I’m doing on the left, every child I try to select, I have to first

0:55:58
select the parent. So it’s already more specific. With BIM, it’s creating what is called a flat style sheet. You want the style sheet to be as flat as possible right? So just for example purposes if I say my selector and then something else that’s not flat okay that’s going in a linear fashion all right or yeah would you describe it as linear it’s going in an inline fashion rather than a block fashion, right?

0:56:28
Versus BIM looks like this. My selector, my dash selector double underscore something else like the child, right? That’s one thing. You can see right here, these are two separate things versus one thing, right?

0:56:45
This is automatically more specific. This is automatically less specific. Even though they’re doing effectively, visually, and with the rules, the exact same thing. But they have different consequences, okay? And so flatter is better.

0:57:02
This BIM allows you to still be specific without the actual technical specificity that comes from targeting two separate things, a parent and then a child. And then you saw, what problem did I continue to run into over and over again a lot of things are alike

0:57:18
There’s not a lot of HTML selectors guys a figure is a figure as a figure as a figure It div is a div is a div is a div a span to span span span a paragraph is a paragraph The minute you have more than one of those things You’re fucked Now now you have to introduce things like oh well that thing needs an identifier, so I’ll just put a class on that thing And then I’ll put a class on this thing called an author wrapper, and then and then there’s a situation where there’s this

0:57:46
class called author wrapper just fucking floating around like if you come back to a project three months later and You just see this author wrapper class you’re not looking at anything You know on any particular page or whatever or maybe that you know this imagine that this is a full website. There’s 30 pages. You select one of these cards, and you’re like,

0:58:08
author, rapper, okay. Well, where has that been used? Do you have any idea? Like, can you safely change the values of anything related to, you don’t know what’s gonna happen.

0:58:20
Because you don’t know where author, rappers, you know it’s been used in this card, but you don’t know where else it’s been used because it has no the name gives you no context you just know that it’s but you there could be author rappers everywhere right there could be other rappers everywhere so we don’t know thus we can’t safely touch it without risking breaking something else well what does BIM do for you well with

0:58:43
BIM well I can I can first of all if I just look at CSS just because of the way BIM is structured just because of the names of things, okay? And let’s look at some examples. Blog card, author, rapper. Compare that to the author, rapper we just looked at a second ago.

0:58:58
I know exactly where this author, rapper lives, and I know it’s confined to living there. It’s only in my blog cards. So I can safely edit this thing. I’m given the context and the risk evaluation in the name itself, which is a huge advantage of BIM, okay?

0:59:19
You can read CSS and literally know how the HTML is structured just by reading the CSS if BIM is done properly. You can’t do that on this side over here. This is fucking chaos. This is the wild, wild west.

0:59:34
We’re styling raw, we’re raw dogging figure tags over here and paragraphs and headings. And you saw when I changed the heading level, everything broke. And then I had to go write another rule. Oh, here’s another rule that I got to make up for that. And what was our figure situation?

0:59:50
The minute I had two figures and they both look the same, I had to go override styling I put in earlier with new instructions. Whereas on the right hand side, I just wrote new instructions from scratch. I didn’t override anything. There was nothing to override So this is a one-to-one comparison and anybody that votes for the left-hand side You have some explaining to do you got some plain it to do. Okay on the right hand side I already explained it. This is objectively better

1:00:19
objectively better for various reasons Okay that we just that we just went over. So now let’s go into, and like I said, by the way, the problem gets worse and worse and worse, the more complex the thing you’re building gets, the problem just gets exponentially worse. So even if the builder allows you to do targeting like this, you should not do it. It’s bad, bad practice, bad practice. BEM is a much, much, much better practice. And then there’s no doubt, what is the downside to BEM? The one downside they could offer is you got to write a lot of classes,

1:00:58
but with AutoBEM, you don’t. So now there’s no downsides. Now, some people will say, well, that, you know, I’m just doing simple blog cards, Kevin. I mean, it’s just going to have one featured image in it and that’s about it and you know I I think all always my headings is going to be in age three I don’t really care about that semantic stuff and da da da da da. The principle is you don’t have a crystal ball when you are doing web development. As much as you wish you did and you think you do, you do not have a

1:01:31
crystal ball. And so I want to I want to build in such a way that I can add things later without introducing serious issues. And I can change things later without introducing serious issues. And without having to do a bunch of manual labor that I don’t want to do.

1:01:49
That’s why I use a class system. That’s why I use BIM. That’s why I worry about semantics on the front of the build. And not try to come fix everything later. Because fixing semantics later is a shit show.

1:02:02
You got to do the semantics right as you go. And that’s going to create a much better outcome. So do we have any questions about this situation that we found ourselves in a versus B? Now, is there a time where you would want to target all figure elements or all images or all Probably not in a card scenario. There are global circumstances where you may, you very may well want to do that,

1:02:32
but not in a specific block scenario. Okay. Because as you saw here, I may end up with two of those things in the same block. And so if it’s not a very global decision, styling decision,

1:02:47
you probably do not want to do it. You just want to use them and you want to move on with your life. Okay.

1:02:54
All right.

1:02:54
You can ask questions, a hashtag Q hashtag question. So you got to see building a little bit of a blog card today. Uh, you know, just within the confines of this little scenario here, we didn’t make anything, you know, super beautiful or anything like that, but I think it drives the point home that things are done a certain way for really good reasons, not just because someone’s like, well, that’s the way I prefer. I mean, you could you could you could pass it off as that.

1:03:23
You could be like, well, that’s just the way Kevin prefers. And, you know, I prefer my own way. And so really what you’re saying is I just don’t prefer, you know, a fucking nightmare. That’s what I yeah, I don’t prefer a nightmare. So I do it this way. If you prefer a nightmare and you want to readily admit

1:03:42
that that’s a nightmare on the left, I’m fine with that. That personal preference at that point, that’s up to you. But don’t just act like the right side is just my personal preference for really no reason other than my personal preference. That don’t compute.

1:03:59
Because I can very easily show why the preference is the way that it is. Not just because I woke up with a bug up my ass like, I just feel like, you know, I just love BEM, you know, I just really love it. You know, no real good reasons, just, I just love it. It’s a personal preference. That’s not what’s going on here.

1:04:15
It’s not what’s going on. So it’s really, really quite annoying when people insinuate that that’s what’s going on. When there’s very, very clear, obvious reasons to do it this way over other methods. Okay. We’re going to go into queues here. Let’s do queue. There we go. Oh, by the way, questions can be related to anything. It’s open season. So it can be automatic CSS questions, web design questions in general, copy questions, marketing questions, agency questions, pricing questions, SEO questions, or whatever you guys want to ask.

1:04:52
Fair game. Okay. What is the difference in the character count of the code for each card? Which produces less code? Well, because I had to write a bunch of instructions twice on the left, you can see that that probably produced more code.

1:05:10
On the right-hand side, it’s not just about more code either. It’s about the specificity of the code. When you write a flatter style sheet, what’s going to end up happening is the browser can process that faster because it’s just it’s just doing one-to-one matching. It’s like bang, bang, bang, there’s a class style, class style, class style, class style, class style. Whereas the minute you write, and we’ll just go to do this again, my card, okay,

1:05:34
and we’ll say child item, it’s not a one-to-one match anymore. You’ve now introduced essentially what is conditional logic that has to be processed by the browser. So it’s not just finding a child item and applying a class to it. It has to find a child item in a specific parent item and then apply the class to it.

1:05:52
If we compare that to my card child item, like this, that is one thing. It’s doing a direct one-to-one match. It’s finding everything with this one class on it and applying the style rules. There is no conditional logic here. There is no processing of, is this thing inside this other thing? The name suggests that it’s a parent-child relationship,

1:06:16
but we’re using a single flat selector to do it. So you have a specificity advantage. You have a readability advantage because of this construct right here. You have a, now the order of styles doesn’t matter anymore because I don’t have things competing for, for styling rules, right? Everything has its own styling rule. There’s no competition between selectors.

1:06:43
So there’s just a lot of advantages here. A lot of advantages. Not to mention that I can change the age, I’m not, I’ve, this is what is called, there’s another, another principle that we should cover here as well, which is the principle of decoupling. Okay. On the left-hand side, the styling rules are coupled with the HTML selectors, which you saw is a problem. The minute the HTML selector has to change all the styling breaks

1:07:15
Whereas the the BIM version on the right hand side is decoupled from the the BIM version doesn’t care what the HTML is Right. It doesn’t care if this grid is a div or a list if these things are list items or divs It doesn’t care if this is an h2 and h3 and h4 It doesn’t care if this is a span or a paragraph or anything else. It doesn’t care what any of this is. The styling rules just go with the labels, which are the classes, and that’s it.

1:07:44
It has no opinion of what the HTML should be. It only has an opinion of what is a child of another thing, but not even in technical terms, just in the context of its name. So I am free to do anything I want with the HTML on this right side without fear of breaking anything. Whereas on the left I will fucking break

1:08:04
everything. The minute I start messing with with like for example if these were in fact well they are they’re divs they’re just divs in a grid and the minute somebody comes along and says mmm those actually need to be LIs in a UL well if you had done any styling based on the div here and what some people do which is even fucking worse is they’ll take this HTML card thing But when they write their CSS they do it like this

1:08:32
Oh my gosh

1:08:34
What a disaster What is it? So the minute that first of all you’ve increased the specificity once again for absolutely no reason Absolutely no reason. It didn’t even care that this was a div a minute ago. But now it cares. Now it cares that it has to be a div in order for the styling to happen. So the minute you change that to a list item, all styling breaks. So this is definitely just dumb.

1:09:08
This is just really dumb. You’ll actually see that a lot though. You’ll see it a lot though. But it’s not smart. It’s not smart. It’s just that’s terrible. It’s terrible practice. So right now this doesn’t care whether that’s a div or an li or anything else. It’ll just give the styling. But when people do this kind of stuff now it cares. Okay. So see there’s a lot of ways that you could just go right off the edge of the cliff with CSS which is why you really want to you know

1:09:34
study and and philosophize and have these conversations and discussions. Because think, I mean, think of if you did entire projects with this kind of nonsense going on, I mean, the disaster that you’re unknowingly creating as you go, uh, is a big, big, big, big, big problem. Imagine doing all of this. This is a disaster, an absolute disaster, right?

1:09:57
You don’t want to be doing that stuff. Okay, let’s go back here. Okay. Can you explain exactly what the 010 means in the inspector? Why three numbers? Okay. So if you go to, let’s go to CSS specificity calculator, this is probably the best way to just throw in selectors and learn. Okay. So the first number is whether it has an ID style on it or not. Okay. And this is the most specific part of the serialized scoring system for specificity. Okay. So as you can see right here, let’s, let’s do the blog card and then we’ll do blog card double underscore image. Okay. Well, it was called media. So as you can see, it’s scoring that right off the bat.

1:10:51
Zero IDs have been styled. One class attribute or pseudo class has been styled. And that is the thing that I actually typed in here. No elements or pseudo elements have been styled. Okay? So the score is 0, 1, 0, right?

1:11:08
Now we can compare that to down here. And this allows you to compare specificity, which is why I bring this up okay really really really good thing to learn I’m gonna do blog card space image 0 1 1 so again no IDs have been styled which is good one class attribute or pseudo class has been styled that is this right here and then one element has also been styled that is this image tag

1:11:34
right here and so you combine the image selector with the class selector and you get a score of 011, which clearly beats out 010. And you don’t, this is a game, guys, just hear me very clearly, this is a game where the lowest score wins, okay? You don’t want the high score in this game. The high score is absolutely atrocious, okay?

1:11:56
The worse and worse things get, the higher the score gets. You only want to increase specificity when it is necessary to do so. And so as you can see, just comparing these two selectors, which visually do the same thing, one is clearly objectively better than the other. For not just the specificity reason, but for multiple reasons, one is better than the other.

1:12:16
Okay. All right. Now, if I did this, just the image, I now have a score of 001. This is the lower specificity selector versus this up here.

1:12:32
Okay.

1:12:33
I can’t do that though. Can I? Because what will happen now? Any styling I give to this image will be applied to literally every image on the website. Okay. So that’s obviously not what I want to do.

1:12:44
So I need to target a specific image. How do I do it? That’s where I end up with my choices and my choices have consequences. Okay. So I say, well, I want the image in the blog card. And suddenly when I do it this way, it’s a 0 1 1, which is a higher specificity than this method up here. Visual same visual outcome, different consequences of the approach, right? Um, not to mention that the minute that I put another image in the blog card, they’re both automatically

1:13:17
styled the same way. And you saw with the author avatar situation, I did not want that to happen. So now I either have to undo what I already did, which is already a disaster, or I have to override what I already did, which is another disaster. So you end up with two bad solutions, right? I would say undoing what you already did the wrong way and doing it

1:13:40
properly the right way would be the best option, obviously, other than overriding. But most people don’t have the patience for that. So you know what they do? They just override, override, override, override, override. And then you’ll get into a situation where you start seeing importance everywhere like this. Okay? And it’s not even registering on here because effectively, this is like going to override everything other than other important rules, okay? So you’ll start to see that kind of nonsense.

1:14:05
That alerts you to the fact that specificity has been poorly managed on this website. Anytime you have to use important, you fuck something up earlier, okay? That’s what that means, essentially, okay? So you wanna avoid those situations at all costs.

1:14:21
So what is the solution? The solution is to philosophize, understand the approaches, understand the consequence of the approaches, and then follow the approach that doesn’t have any cons and has all pros, right?

1:14:36
Because again, I challenge people, what are the cons of BIM? You can give me one real one, which is it’s a lot of typing class names. But then I gave you the solution for that, you auto BIM it with automatic CSS, that’s gone.

1:14:48
What are the other negatives of BEM? There are none. Okay, so that’s the way that we go. Because I can give you con after con after con after con of these other approaches, so let’s not do that. It’s very simple, but it has to start with a conversation. It has to start with we got to care about the philosophy behind what we’re doing. We got to care about the objective reality that there is a more efficient, more maintainable way to do this and there are many less efficient less maintainable

1:15:16
disaster scenarios that we could possibly create if we just don’t care or if we get taught wrong which is why I suggest like you know it’s very important when you’re when you’re teaching something either say this say I’ve already done all the philosophizing and I can lay it out for you and I can show you the pros and cons of every method and then I’ll prove to you that this is the best practice or I’m new at this shit, this is the way I do it right now

1:15:42
but caution because I’m not actually an expert here. Both are valid by the way. You don’t have to be an expert to make videos. Just tell people, I don’t know, I don’t understand all the philosophy behind all of this. This is just the way I was taught

1:15:55
or this is the way I do it right now and it may not be the best way. Okay, all that is fine. You just, you give people a trigger warning, whatever they want to call it. Let’s go to chat again. All right. When you say BRICS doesn’t allow that multiple selectors, are you in effect

1:16:14
saying that you wish it did? Yes. A hundred percent. A hundred percent. Not for that reason, not so that I can do that, but there are very legitimate cases where you want to be able to use actual selectors and not just a class system. So Bricks has a class system. It is not a selector system.

1:16:33
I would like it to have a selector system.

1:16:35
Okay, how are you managing passwords with Arc Browser?

1:16:38
Her key chain doesn’t integrate particularly well. I use LastPass. No, wait, no, I don’t. I use 1Password. I used to use LastPass. Now I use 1Password.

1:16:46
And it seems to integrate perfectly fine. How would you convince a client that a graphic designer is probably better than Canva? I think Canva graphics lets people violate accessibility stuff, low color contrast, etc. Well, I mean, a graphic designer and Canva are two very different things in the sense that one is a human being and the other is an application that encourages people who don’t know what they’re doing to think they know what they’re doing.

1:17:22
So just on that face alone, I would say that you, why is there an argument there? Right? What are they arguing against? Are they saying, well, you know, Canva is much cheaper than a real designer? That’s true. Is it though?

1:17:39
Well, now see, now we’re philosophizing again. Is it really cheaper? Because if you fuck it up in Canva and that causes you to lose money because your brand looks like a kindergarten brand and thus it has no trust and it has no, the conversion rates are super low, that’s actually quite expensive, isn’t it? A lot of people don’t factor in lost opportunity cost.

1:17:45
We’re not going to get there.

1:17:46
We’re not going to get there.

1:17:47
We’re not going to get there. expensive, isn’t it? A lot of people don’t factor in lost opportunity cost, which is gigantic. Like that’s, that’s huge, a huge factor. And so you should always bring that up. Right? Like, it’s cheaper to write your own copy than it is to hire a copywriter. But is it? It’s only cheaper on the surface. It’s only cheaper at the very first step. You need to help clients think beyond step one.

1:18:29
Yes, Mr. Client, it is cheaper to write your own copy, but if we think five steps ahead to when the visitor arrives on the page and reads that shitty copy and then doesn’t buy what you sell, then it becomes very expensive, right?

1:18:43
So let’s stop focusing on step one and let’s start focusing on step five. And this is why very successful people hire copywriters, hire designers. They’ve already gone through this. They already know what step five is

1:18:55
and they’re not just focused on step one. And you just have to help your clients get down that path. Okay, questions, questions, questions.

1:19:02
It has to have a hashtag Q.

1:19:04
I’m seeing a lot of questions, it seems, that do not have the hashtag. And remember, you can ask questions on anything. It’s an open question stream. We are at one hour, 19 minutes. I’m gonna do, I gotta cut this short

1:19:18
because I gotta go to the beach today. We’re going to the beach today. So we’re gonna go 10 more minutes. It could be a question about what, by the way, I’m glad my camera is not, the fan on the back is doing a miraculous job.

1:19:31
That was a fantastic addition to the setup. We can go back to questions about this particular pop quiz scenario here. We can do questions about about anything. Let me know, drop them in. I wish I had two screens. Let’s see. What camera are you using that is overheating? What is it? A Sony something uh a sony something alpha something something something i don’t know i could look it up later uh it’s it’s you know it’s a good camera i like it it’s only good in 4k it sucks in 1080p

1:20:16
and it overheats in 4k so you need an extra fan attached to it it’s not a great scenario but it’s the b setup it’s fine i more and more understand the need and power of something like Bricks plus ACSS plus Frames, is there a chance of an updated boilerplate setup quick start video 2024 for such stack? Well I would I would be watching automatic CSS 101 which is essentially going front to back of how to set up, use, automatic CSS, workflow, principles, philosophy, features. It’s going to cover almost everything. Almost everything you need to know. Now,

1:20:52
Frames is built with automatic CSS, so once you understand what automatic CSS is doing and how you’re supposed to use it, then Frames makes perfect sense to you. And you might need some help like, oh, how do I adjust this particular frame to do x, y, z? And at that point, you just ask that question in the support community and everybody will chime in and tell you exactly how to do it. Frames has a lot of importance in the CSS. What do you think about that? It doesn’t. It probably doesn’t have much of any.

1:21:27
Are you talking about specificity? Are you talking about…it doesn’t have the important tags. Unless we’re overriding something that a page builder like Bricks decided to do in a really weird fashion. For example, there is one scenario in automatic CSS in the framework itself where you will find important tags and it is with display grid. Okay, so for example if well you can probably see it on this grid right here. Remember I made this a grid too

1:21:55
with this utility class right here. So we’ll go find grid 2 and there you can see it right there. Grid 2, display grid important. Okay, why is that happening? Well, because Brics, and I’m not arguing against this necessarily, but Brics makes everything display flex by default.

1:22:16
Where Brics goes wrong is that it uses specificity inappropriately to do that. It should use no specificity to do that. In which case we would not need important on display grid, right? But here’s the thing, you actually kind of still do. Because if I if I change this to display flex, like I have a grid 2 on here, because a lot of people, and this is

1:22:40
just to kind of also help out users who just generally do things, you know they don’t read the manual, okay? Let’s just be honest. They don’t read the manual, they don’t watch the videos. So they come in and they put a grid 2 on here and then later on down the line they’re like you know they do some bullshit at the at the ID level you know like vertical column they’ll start putting this shit in and then they’ll go try to use another utility class here

1:23:06
for changing the grid structure at a mobile breakpoint and it won’t work and they’ll be like fucking ACS is broken and then we got to inspect it and then we’re like why’d you put display flex column at the ID level at that random breakpoint? That’s actually what’s breaking it. And it’s a whole disaster scenario.

1:23:23
So we use important because as you see, when I just changed this to display flex column, nothing happened. It did not allow the user to do some dumb shit right here. Right? It didn’t allow the user to do that, right?

1:23:35
What they should be doing is grid one. That’s what we’ll stack it here. Very simple. Okay. Or I wouldn’t want to do it there. You probably want to do it more like down here.

1:23:44
Right. So you could do grid one there, or you could use the grid one at the S breakpoint utility class if you want to do it that way. A bunch of different ways to do it. What you would not want to do is to start using display flex column and changing the grid from a, you don’t want to do that.

1:24:01
So the importance on the display grid just ensures that it’s not going to break when, you know, people are willy-nilly throwing values and inputs and stuff like that. Because we’ll get a gazillion support requests like, my grid’s broken and it’s got the class, da-da-da-da-da. And it’s like, but what did you do? What did you do at the ID level?

1:24:23
What were you trying to do and what did you do? Because you broke it. You broke it. And so we just kind of made that situation a little bit unbreakable because it’s such a common scenario. And the fact that Bricks makes everything display flex by default. Bricks even, page builders do the craziest stuff. Page builders are just outlandish with

1:24:39
their opinions, right? If you do a display flex, it by default is no wrap. Flex does not wrap by default. Well Bricks at, it chooses a random break point. I can’t even remember if it’s this one or this one. Where it just decides that it’s gonna start wrapping stuff for you. And it will absolutely break different layouts. If you didn’t want it to wrap,

1:25:00
and then you’ll be like, why is it doing that? I didn’t tell it. And then you gotta go inspect it, and you’re like, oh, Bricks decided for me that that layout should wrap at this breakpoint. Just outlandish, that’s an outlandish opinion.

1:25:13
Outlandish opinion, that should not happen. And if I, you know, built a page builder that kind of stuff would not happen. So it’s just we got to make up for stuff like that. It’s just a it’s a lot of mess. It’s a lot of mess. I really wish we had a perfectly clean unopinionated slate to work from but there is no page builder that gives you that. They all have all these opinions.

1:25:38
Okay. A couple more questions here.

1:25:40
Do you see yourself using subgrid for card layouts once it is a bit more support?

1:25:44
Yeah.

1:25:44
Yeah. I I’m a big fan of the concept of subgrid. Uh, there’s a lot of good use cases for it for sure. It’s not, it’s not like every grid needs a subgrid, but some situations subgrid will come in very handy, but it’s another thing that has to be taught. It’s another thing that has to be incorporated. It’s another thing that’s not particularly easy to understand right

1:26:10
off the bat. So some visualization I think is going to be necessary. But yeah, it is going to be an important feature for sure. All right, let me go back to the general chat and see what people Thank you guys for tuning in, by the way. Um, does your hire me link work on your website is scheduled and consultant call and did not get a link. Uh, it’s one of the automations is having some issues, but yeah, it probably worked.

1:26:38
I’ll, I’ll look at it and get it to it. If I can talk, get it to you manually. Um, okay. We answered that. I prefer explanation to tell them to go do supplemental research. Yeah, that too, that too.

1:27:04
Sometimes you need to add important to override some plugins style so it fits your website. Yeah, because the plugin is using unnecessary specificity. You can add default opinions. And let me clarify this. Page builders can be like automatic CSS is opinionated. Well, if you ask it to be, if you say I want auto gaps in automatic CSS.

1:27:24
In fact, let me show you where that is, right? Okay, so if I go to spacing and I go to automatic spacing, auto container gap, auto content gap, auto grid gap, those will add those will auto space your content, your containers, everything, right? That’s an opinion. Now you did opt into that opinion. You did opt in by default. You have to come turn it off, right? But at the same time, it applies the styling with zero specificity.

1:27:54
Zero, zero, zero is the score on the specificity of that default styling, which means you can override it at any time, in any way, with any method that you prefer. And there’s no battling for overriding it. That’s the best way to do it. And that’s how plugins should handle it. That’s how page builders should do it.

1:28:17
Your specificity of your opinions should be zero, zero, zero. Now we are still at a blank slate. We got the opinion and we can leave it that way if we want to, but we have a blank slate to work from essentially.

1:28:28
Okay.

1:28:28
I hate how I have to hop back and forth because I’m so used to the two, just having two monitors, two monitors is the way to go for sure. Uh, okay. I more and more understand the need and power.

1:28:38
Okay.

1:28:38
We already did that one.

1:28:39
Oh, you posted it like twice.

1:28:41
Okay.

1:28:41
All right. I saw it. I found it. I read it. Before BIM, I was writing CSS like in the left. And then when I found BIM, life changed.

1:28:58
Why? Well, I have cards everywhere, same CSS, but I use modifiers. Yeah, you could use modifiers as well. Modifiers gets a little bit tricky though, especially in a page builder, because there are limitations on how those modifiers can be styled. I see so many people putting important everywhere.

1:29:18
Yeah, yeah, that is, um, oh, wow. With the fan, it’s already giving me a warning as well there. There, see, there it goes. It just, and it gives you the warning like literally right before, right? It’s not actually a warning at that point. Like, thank you for the warning, but just going off would have been, you know, the exact

1:29:35
same scenario. I’m horrified to say that I’ve in the past written dissertations to achieve specificity. Yeah, it’s, um, there’s a lot of really bad CSS out there. A lot of really, and a lot of really bad CSS being taught out there, which is, that’s what really is a little bit annoying. Because people pick that up and they just go think that that’s, that’s, you

1:29:56
know, great way to do it. And they’re creating an absolute nightmare. Okay. All right. I’m out of time, guys. Like I said, I have to go to the beach for a little bit. Got to do some relaxation and some rest. I’ll be back online later and back next Tuesday for another episode of WDD Live, probably back to our regularly scheduled roasting of websites.

1:30:19
Some of them are great though. Some of them are great and we talk about why they’re great. Some of them are bad and we talk about why they’re bad and everybody learns a lot, but I will see you guys next week. I will see you guys next week.

1:30:27
Peace.