0:00:00
In the last lesson, you were introduced to the concept of DRY development. DRY is an acronym that stands for Don’t Repeat Yourself. We talked about variables and the tokenization of your website styling in order to help follow DRY development practices. We talked about concepts like scalability and maintainability and consistency. And we’re gonna build on all of those concepts in this lesson right here.
0:00:27
And in fact, this lesson is of critical importance. It’s like a pillar lesson in this course because it addresses the biggest mistake that beginners make with their styling on a website. And that is how elements are being targeted in order to apply styling in the first place. As you may know, page builders are notorious for encouraging users to style things at the ID level, and that is the worst possible way to style elements on a website if you care about scalability, maintainability, consistency, and tokenization, and so on and so forth.
0:01:04
So what we need to do is talk about the different ways to target elements, and we need to talk about classes, we need to talk about the two different kinds of classes, we need to talk about other methods, including ID level styling, when these things are appropriate, when they’re not appropriate, how all of this works. And I just say right now, like this training and bookmark this training because you’re gonna need to come back to this when you go off and start to build websites and you’re like, well, what did he say about that?
0:01:31
How does that work exactly? You’re gonna need to find this lesson in particular because anytime you’re about to make classes or do ID styling or whatever you’re going to need to come back to this video and get a little bit of a refresher to make sure that you’re doing things the right way. All right let me go ahead and share my screen. This is dry development with classes and global styling but we’re going to talk about all of your options for targeting or at least the main five ways to target elements with styling in web design. And we’re gonna talk about them in the order of their use, or really almost the order of importance when styling a website.
0:02:12
And I want you to notice before I do that, well, let’s just do the list. So you have element styling, okay? The bold word is how you actually target, the thing you’re gonna target. So we can target elements, we can target BIM classes, we can target utility classes, we can target the universal selector, and we can target IDs. I want you to notice what’s at the bottom of the list IDs because I want you to use ID level styling as little as possible. Very rare that you should need to style something at the ID level. Now if you’re not going to use utility classes and we’ll talk about what these are, why they exist, when you should use them. We’ll do that for each of these things so that you’re everybody’s on the same page. Okay, but if you’re not going to use utility class you just make a decision I don’t really want to use utility classes. You can use ID styling a little bit more often but as you’re going to see utility classes dramatically enhance efficiency in multiple ways, all right?
0:03:14
So, but we don’t wanna get ahead of ourselves. We’ll tackle that when we get there. Let’s talk about element styling first. So what and why and when of element styling? Well, when setting the default behavior of an element or the default styling of an element, that is a good time to use raw element styling. You’re styling this element globally. And you’ve already seen us do this in previous lessons, our headings. When I went up to settings, theme styles, typography, heading one, I want all of my heading ones to be this size right here.
0:03:51
You guys know this token is mapped to a clamp function on the backend so that it’s automatically responsive. But I’m saying use that clamp function via this token on every H1 heading on this website by default. Now can I go in and override that on any given heading? Of course, of course, nothing’s stopping you from doing that. But it’s styled the way that I want most of them to be by default, right? So I don’t have to add a class to every heading, I don’t have to style every heading at the ID level, which would be an absolute nightmare. I don’t have to use some other weird combinator style targeting.
0:04:31
I’m just targeting all of my H1 elements. We saw this with section padding. I went here, I went to theme styles, I came down to section, and then in this padding right here, I used variables, which also mapped to clamp functions on the backend for my global default styling, my padding of the section element. And in CodeBox this is just like here’s a section right here. This is just like coming over here’s how it looks on in the style sheet. Section. Not pound section. What would that be?
0:05:03
That would be like an ID of section. Not dot section. What would that be? That would be targeting a section class. I am targeting the section itself. And then I do my padding block, and then I throw in one of my tokens, like pad section M right here. So we’ll say var pad section M. So now these sections have their default block level padding. I can do padding inline, and this is gonna get something like pad section inline, and then it’s gonna get the inline padding. All of my sections on my website are gonna start out that way.
0:05:40
This is what it looks like in the style sheet right here. This is global element styling. This is the most efficient way to target elements across a website when you wanna set default behavior and then still be able to override that behavior later on. Okay, so let’s go back. And we talked about element styling, very simple, right? You’re targeting a raw element, you’re adding styling to it.
0:06:07
When should we be doing this? When setting default styling behavior of an element. Here’s some examples, heading sizes, default section padding, et cetera. The next thing in the list, BIM. So I’m gonna scroll down, we’re gonna talk about BIM. This is gonna be the heart of this training because you are going to use, notice BIM is number two in the list. Once you’ve set your defaults, the next thing you’re going to use the most often is BEM classes. So we need to know what the heck does BEM mean? What is a BEM class? How do you use BEM classes? Okay, we’re going to talk about all that. So I scroll down what, why, and when of BEM classes? Well, we want to use BEM in any situation where there’s going to be more of one of the thing that we are working on.
0:06:52
That’s a repeating situation. And really whenever you get a dry alert in your head, what is a dry alert? Remember dry, don’t repeat yourself. As you’re building a website, you’re gonna find yourself, oh, I’m repeating myself. A dry alert goes off. It’s like you’re flying a plane, you’re in the cockpit, and it’s like, warning, low terrain, warning, low terrain, warning, look, you know, those, those alerts that just constantly go off until somebody addresses the problem.
0:07:16
Cause it’s like, dude, you’re going to crash. We’re all going to die. That’s what should be going off in your head. When you find yourself repeating yourself, warning, dry alert, warning, dry alert, right? You’ve got to follow dry principles. And so you should stop what you’re doing. And you should think about how you’re going to approach this. Should you be targeting all elements? Should you use a BIM class? What should you be doing here to maintain dry practices?
0:07:42
So anytime you get a dry alert in your head, your go-to is probably going to be either global element styling, but you’ve already set your defaults in this context. So the next thing that you’re gonna go to is BIM, because it also says whenever you’re unsure. This is the biggest question I get. It’s Kevin, when do I use a BIM class versus when do I use a utility class versus when do I style at the ID level versus when do I use global element styling?
0:08:07
This is the question I get over and over and over again. This is the lesson that’s going to clear that up. And so there is a default rule whenever you’re unsure. And we’re gonna say it together right now, class. I know there’s nobody sitting with you. We’re not in person, but you’re gonna say it with me. You’re gonna participate in this freaking class, okay? When in doubt, BIM it out. Say it with me, right now. Get up, get up, get up close to your computer, right here.
0:08:32
Get up, get up with me, okay? When in doubt, BIM it out. You can’t go wrong with BIM, my friends. You can’t go wrong with BIM. Could you use BIM in a situation and that makes the situation a little less efficient? Yeah, yeah, you can do that, right? Like if I made a section padding, a section class for all of my sections. That would be more inefficient than global element styling, but it’s still not like wrong, it’s not like horrible, because I still am following dry development principles.
0:09:02
I’m just slightly breaking dry development because I’m repeating that class over and over again in a situation where I don’t have to if I use global element styling. If I just style all of my sections by default, I don’t need to add a class to them, okay? But still, if I did add a BIM class to the sections, I could still have global control over them. I still have scalability. I still have maintainability.
0:09:24
It’s all good. It’s all good. So you can’t really go wrong when using BIM. You can definitely go wrong when doing ID styling. You can definitely go wrong with utility classes. You can definitely go wrong with all of these other techniques. So when in doubt BIM it out because if you’re unsure BIM is your best option. Alright so what I’m going to do is I am going to build out this services grid. I’m going to do it very quickly because I don’t want you to think if I stop and talk about everything and explain it you’re gonna feel like wow this is a lot of work it’s gonna be slow it’s gonna slow me down. I want you to see that this is not going to slow you down. When you know what you’re doing and you’ve practiced it, it’s actually very, very fast and it gives you tremendous benefits on the backend over other types of targeting.
0:10:12
All right, so I’ve got this container right here. The context of this is we have a services website, we need a grid of services cards to list all of the services for this company. There are six services, okay? So here’s how we approach it services grid I’m gonna add the grid styling to this so I’m gonna say repeat, and I know you haven’t done great yet We’re gonna do that in the next lesson so just bear with me just watch And then we’re gonna come back and explain everything three min max zero one FR I now have my grid structure in place. I’m gonna go ahead and add a block to this. This is gonna be my service card.
0:10:51
Service card just like that. I’m going to add a heading and I’m going to add text. I’m going to grab the heading, make it service card, copy this just so I can speed up. Heading, grab this, and double underscore text. We’ll talk about that double underscore in just a second. I’m going to grab the service card. I’m going to go add my spacing, padding. I’m still using tokens. Space M, this is one I made right before this training. Kind of like having automatic CSS, which is a library of tokens and utility classes and helper functions that allow you to do all of these best practices at light speed.
0:11:27
Because you don’t have to set it up ahead of time, you don’t have to make any of these decisions, and everything is still tweakable and adjustable based on your needs. All right, so I’m gonna go space M on here, I’m gonna go down here, row gap is going to be var card gap. That’s the gap between the elements in all of my cards. I’m now going to go to background color of this card. I’m going to set this to this blue color, maybe this light blue color. I’m going to go into border radius.
0:11:54
I’m going to use my radius token. I am going to apply that to all sides. I am then going to grab my heading, always styling the classes, typography. Let’s get it to be that blue color, but I want it to be darker. I’m gonna come in here, I’m gonna grab on the class, that same blue color, bring it down in darkness, and then also bring it down in saturation. I want the heading to actually be slightly darker than that. Okay, there we are.
0:12:22
Now I’m going to duplicate, duplicate, duplicate, duplicate, duplicate. So I’ve got a three column grid, two rows, six cards. Was that slow? Was that like, I mean, I could have done this with ID level styling. I could have done this with utility class styling. But using those approaches, I would not have any of the website. So that’s six cards times five grids, that’s 30 elements, right? 30 blocks that we’ve put on this website that I now have global styling over.
0:13:04
That I would not have global styling over if I used IDs, I would not, hold on, my phone’s ringing. Hold on, let me, hello, hello? Oh shit, it’s Bev. Bev. Hey, hey, Bev. Hey, how’s it going? Yeah. Oh, oh, you saw the cards already. Whoo, you’re fast.
0:13:21
Okay. Um, yeah, what do you think? What do you think? You want, you want to, you want to purple? Okay. Uh, all right. Well, I mean, we could try purple. I don’t know. You know, okay. Purple is your favorite color and you talk to your cousin and they think it would be good in purple too.
0:13:33
Okay. All right, Bev. We can, we can try. Wait, hold on. Border radius is off too? You want it to be more boxy? Got it, okay, like, you know, no style whatsoever, just straight up box. All right, got it, we can do that, no problem. All right, I’m gonna, oh, you want a two column?
0:13:51
And you added services already, Bev? Wow, you guys are on fire over there. All right, so three more services you need to add, and more boxy, and purple, and two columns. You want it to be in a two column grid instead of a three column grid. Okay, well, here’s the thing, Bev. You got nine services now, and if you put nine services in two column grid, you’re gonna have a little dangler down there.
0:14:15
I don’t know if that’s gonna look so good. Are you sure you want the two columns? You still want the two columns, of course. Okay, all right, so I’ll make these changes, Bev, and I’ll send them over, and you can let me know what you think, okay? All right, all right, thanks for calling, Bev. All right, bye. Woo, you know how that goes, right? Okay, so we gotta make some changes to these cards.
0:14:36
Remember, this exists on five different pages of the website, my friends. So what we’re gonna do is come in here, service card. First thing I gotta do is make it boxy, right? Bev never wants any, you know, she wants styling, but never the right kind of styling. All right, so we made them boxy. We’re gonna change that background to purple on all these cards. I’m gonna go in here there’s purple. She says she wanted like a light purple so I’m gonna do that now. I’m gonna grab the heading here we’re gonna change that color so I’m gonna come in here. She wanted that to be dark purple and then she wanted these to be a little bit purple but like also maybe lose some saturation or something. All right there we are I’m gonna go ahead and hit save.
0:15:16
She wanted this grid to be two columns, so I’m gonna drop that from three to two. I also realized I made a mistake and I didn’t do any of the mobile optimization for this grid. So what I’m gonna do is grab this instruction right here and I actually want it to be one column at this break point and at this break point right here, I want it to be two columns, so I’m gonna drop that in.
0:15:39
And then she wanted it to be two columns there on desktop as well, but here’s the thing, I don’t think we’re gonna need to do this because if we have nine cards like this, it leaves that dangler down there, right? So what I’m gonna do is I send this over to her and then she’s like, yeah, you’re right. Like Bev rarely agrees with you, but in this situation, she might agree. So we’ll just change this back to three.
0:16:03
I can do whatever I want because I’m affecting all of these grids at the exact same time. I don’t have to go grid by grid by grid, card by card by card, because I bimmed it out. I bimmed it out. All right. When in doubt, bim it out. Right? All right. So I’ve got global control, one single source of truth for the styling of all of these elements, the headings, the text, like maybe she also wants this text to be smaller right so I drop it down oh do I have a oh oh I don’t have a small text variable okay so I gotta make a text s see when you don’t have like automatic CSS you got to make all these tokens you got to make all these decisions what are the values gonna be this is gonna be like 1.6 this could be like 1.3 I’ll go ahead and copy this clamp function this is gonna be small text let’s pop that in here there everywhere okay so I’m like dr. Seuss now all right we put a little text s in here there we go so now we got some small text perfect okay so now I can send this off to Bev and I say Bev is that the way you wanted it now all of my grids are mobile responsive across my entire website.
0:17:20
This is absolutely fantastic. You see the benefits of BIM that you don’t get with ID styling, you don’t get with utility class styling. We’re gonna talk about utility classes in just a minute. But this is fantastic control, not repeating myself, using dry principles, scalable, maintainable, consistent, it checks all of the boxes. And so just to refresh, we’ve got our block, that’s the service card, we’ve got our elements, a heading and text, which are within, that’s Bev again, but I can’t answer right now, okay, I cannot answer. We’re busy Bev, we’re busy. Okay, so elements, heading, text, those are elements.
0:18:02
And the way that I denote these is elements get a double underscore. So when I’m reading class names, I can clearly see elements are associated with a specific block. This heading is never gonna exist. I’m never gonna use this style of heading outside of a services card, right? Never gonna use this style of text outside of a services card.
0:18:22
They go together, belong together, they’re named together. Everything is super organized and consistent. If I go off and create a testimonials card, it’s going to say testimonials card, testimonials card double underscore heading, testimonials card double underscore text. Everything is its own component in my CSS. Keeps everything super maintainable and super organized. Okay, we’re not going to talk about modifier. I’m going to come over here. Okay. Let’s just quickly write this out so you guys can see Exactly what BIM is and how it works. Let me zoom in a little bit here. Let’s collapse this down So you’ve got your B. That is the B in BIM stands for block not block size It’s auto guessing things. Hold on. All right block now the E in BIM stands for element.
0:19:12
Then we have the M in BIM, which stands for modifier. Now I’m gonna put a double dash between element and modifier to separate the B and the E from the M. Number one, the double dash is how you use a modifier. All right, so I’ll give you an example of a modifier. Services card, or service card double dash dark. So this would be a modified version of my services card and it would be a dark version according to the name of the class. But instead of a double underscore like we did for our elements, I’m using a double dash to signify that this is a modifier. And then I would change the style of the card using this modifier class. Not going to cover that in this training because it’s it’s it’s going to add confusion and you don’t use modifiers all that much. When we start to do real build outs you will see me use modifiers perhaps and then you will learn how the modifier works, okay?
0:20:09
But for this training, I just want you to focus on the B’s and the E’s, the blocks and their child elements, okay? And just to show you in the style sheet, here’s how we, here’s how it looks. You have your service card that you add styling to, you have your service card double underscore heading which you add styling to you have your service card double underscore text which you add your styling to you might have a service card double underscore image which you add your styling to you might have a service card double underscore icon that you add your styling everybody knows exactly what is going on at all times. Everybody knows what belongs with what at all times and this is exactly what you want because it’s scalable, it’s maintainable, it’s organized, it’s consistent, it checks all the boxes and it gives you one source of styling truth.
0:21:15
No matter how many service cards exist on this website, I have one source of styling truth. Now there’s one thing we have to cover. You notice I made a services grid and I gave it some styling instructions. And you might be wondering, Kevin, why wasn’t it services grid double underscore service card, right? Like this, why wasn’t that the case? And then what would we have to do with our elements?
0:21:40
We would actually have to make this be services grid in front of all these. And one is you just see that this is more inefficient, but it is a general violation of BIM principles. The way that BIM is outlined, there is no such thing as a grandparent component. This is a mistake I see quite often in BIM. So I did want to point this out. People will misuse BIM. I got to take these dots away.
0:22:09
If you misuse BIM, you end up in a situation where there’s more disorganization, less scalability, less maintainability. The reason being is I could use a service card not inside of a services grid. That could be a use case on the website. Now with the class structure like this suddenly the classes don’t really make all that much sense do they right so the services grid is its own separate component then the service card is its own separate component okay so I want my structure to be as what’s called as flat as possible this is flat CSS right here and flat CSS is more efficient.
0:22:50
You’ll have less specificity issues. I know we haven’t talked about the cascade yet. We haven’t talked about CSS specificity yet, but we don’t really need to yet. Maybe when we do modifiers, we’ll talk about that because that’s where it comes into play a little bit. But this is very flat CSS, and this is exactly how you want your styling to look. This is how you want your classes to be organized, and you get that tremendous global control because you’re creating one source of truth for all of your elements.
0:23:18
But notice, I still use tokens. I wanna reiterate this. Whether I’m styling at the element level, I’m still using tokens. Whether I’m using BIM classes, I’m still using tokens. Utility classes, still using tokens. Universal selector, I’ll still use tokens. ID styling, I still use tokens. Tokens are present across the board. Never forget your tokens, okay?
0:23:43
All right, let’s go down. That was BIM. Let’s talk about utility classes. I’m gonna run down this list and then we’re gonna take a look at what a utility class looks like. So you use utility classes as little as possible. There’s over 1,200 utility classes in Automatic CSS because again, it’s a library of utilities, speeds up your workflow, makes things insanely effortless as you’re building sites.
0:24:08
But you still need to know when it’s appropriate to use a utility class, and when you should be using BIM classes. With utility classes, you want to use them as little as possible. I’m going to create two different scenarios to show you why you would use utility class, and why you would not use a utility class. We’ll do that in just a second. You use utility classes with non-scalable design decisions, design decisions that cannot be repeated accurately, okay? And then basically, if you were going to style at the ID level, there is an opportunity to perhaps use a utility class instead, and that makes things more efficient than, you know, reapplying the styling at every single ID that you want to use that styling on. Even if you’re using a token a utility class is more efficient in more ways than one. All right and then never when using BIM you never mix and match okay I would never create a BIM class like service card and then use a utility class inside of it like pad M for medium padding or something like that. Absolute violation prison time back to rehabilitation never do that don’t don’t ever let me catch you doing that straight off to jail all right so let’s take a look at what a good use of utility classes and what a not so good use of utility classes first thing we have to do is just make a utility class so I’m going to come in here and I’m going to decide that you know what this section right here should have a very very light purple background like very very very very very very light so what I’m going to do is do BG and we’re going to say that our purple color is our primary color of the website. So I’m going to say primary ultra light like that. So I’m saying that this utility class and what a utility class is is it adds very specific styling instructions like just one usually not even multiple just one styling instruction use that class. So BG primary ultralight is going to apply a background color of this purple which is our primary color at a very very light like that. Okay hopefully you guys can see that. I’ll do like this. I think you guys should be able to see that. We’ll go ahead and hit save and then I refresh and look at that.
0:26:22
That is a perfect use of a utility class. Now could I just do that with ID level styling? Let’s take off this class and say, well, Kevin, you could have just styled that at the ID level and you would have been fine. Sure. Well, what would I have to do? I’d have to come down here and I’d have to use this lightness slider. And then maybe even I save this as a token, right? So I save it and there it is right there. So it’s a token. But what did I still have to do? Let’s say I want to do that on this section as well. So I’d have to, let’s say I was in the content panel. One-click, two-click to get in the background panel, three-click, four-click. Now I get it, hit save, go to the front end, fine.
0:27:03
Hey, look at that, it’s good. Is that a proper use of ID styling by the way? Yes. That is actually a proper use of ID styling. Why? Because that’s a unique situation where I want to apply that section padding. And it’s a non-scalable situation, because if I have this our main options section on a different page, this background color may not be suitable depending on what order that section appears in. Because if it shows up right next to this section, for example, this other purple section, they’ll both have the same background color. And we don’t really want that to happen because visually, they’ll look like they’re the same section and there’ll be an odd gap in the middle from our section padding.
0:27:45
We don’t want it to look like that, right? So we need to apply this background color in one-off situations. So ID styling is appropriate here, but a utility class actually makes this more efficient. So watch this. I’m going to remove here, remove here. Now there’s no styling. Let’s say I want this one to have the background color. I don’t have to go click, click, click, click. Lots of clicks, right? All I have to do, BG, primary ultralight, come down here. This one gets it to BG, primary ultralight.
0:28:18
Now they both have primary ultralight. That is what a utility class does for you. It speeds up your workflow and notice it’s not called purple ultralight, right? Because if the color ever needs to change and it’s not purple anymore because Bevan accounting calls up, right? They change their brand colors overnight Then you know purple is not going to make sense in the class name So we use names like primary secondary accent base shade and so on there can be any color, right? But they’re used within a specific context on the site. So you see that is where a utility class comes in very handy.
0:28:56
Where does utility class not come in very handy? Well, services grid. Let’s take this away. Imagine I had a class called grid three. This is a three column grid class. And what this class does is it changes the display of a container to grid, and it creates that three column layout okay min max zero one fr there’s your three column grid so let’s say here i am from scratch and i’m like oh i want that to be a three column grid for my services grid three bam i’m i’m on you’re thinking wow utility classes saving the day so fast so great so phenomenal should use them all the time no no no no no no No, no, no, no, no, no, no, no.
0:29:40
Guys, this is a violation. This right here is a violation. Is it a horrible violation? It’s not horrible. Like, styling, you know, it’s still pretty bad. Honestly, it’s still pretty bad. Why? Because I’m using the services grid on five different pages. Dry alert, dry alert, dry alert, going off in my brain. Warning, low terrain, you’re gonna crash and kill everybody.
0:30:02
Stop it, fix the problem, stop what you’re doing okay grid 3 is a utility class it has no context right so remember when Bev was like needs to be two columns if it needs to be two columns I’ve got to go remove grid 3 and then add a grid 2 which I haven’t even made yet I have to make that if I’m not using automatic CSS it already be made for you but you got to go make this yourself min max 0 1 of our okay now I got a two column grid but that only is one grid fixed now I got to go to everywhere on the site where this services card is created and swap that utility class that’s Chumpville you don’t want to live that life that’s what we need to realize dry alert going off in your head oh this is not scalable this is not maintainable so I need to stop and give it a BIM class, something with context, services grid.
0:30:54
Now I have a contextual class that follows BIM principles and I can use that a million times and it’s all good because it’s related to the services grid. And if I need to change the structure of a services grid, I now have a single source of truth to be able to do that. So this is where a utility class is not the right thing to use, but we see with background color, good use of utility class. So it’s just knowing when to use a utility class, when to use a BIM style class.
0:31:25
Now we’re going to talk about universal targeting. I’m going to skim over this quite quickly because it’s fairly advanced. You’re going to see me do this in real builds. I want you to be familiar with it, but I’m not going to deep dive it right now. But what and why of universal targeting? When selecting non-specific children, like a fancy grid layout that shouldn’t rely on a specific class or element targeting or setting the behavior of all flex children, for example, advanced combinators with unknown ancestors or siblings, for example, a situation where you need to style any H2 element that has an adjacent sibling, you know, could be any other element, we don’t know what element it is exactly, and there’s many, many, many other advanced use cases.
0:32:07
And here is what it looks like. So I’m going to delete all of this. We don’t need this nonsense right here. In fact, I’m just going to delete everything. So we’re going to start over blank slate. Here we go. So I’m going to use it just a div container, and it’s going to have a bunch of children divs, okay? Div class equals child. This doesn’t even matter.
0:32:27
I’ll put div class equals parent just to help identify these a little bit. And we’re going to have a closing div. Awesome. Bam, bam, bam, bam, bam. It doesn’t matter how many there are. Okay, good. So what we’re going to do is we’re going to say the class of child. I’m going to target that and I’m going to say width is 20 pixels and height is 20 pixels and background color is red. Perfect. I just want to be able to see my blocks. Now on the parent, I’m going to come up here and I am going to say, I want to display this as flex, and then I want a gap of one M, just like that.
0:33:06
Now we’re going to see all of our little boxes on the screen. I can probably make these a little bit bigger. Let’s do 60 and 60. Instead of a background color of red, let’s do a background color of black. Perfect. Now, I could come in here and say, I want to obviously put a border on all children, on all children, a border of five pixels solid red. Right? Five pixels solid red.
0:33:32
But that’s only possible because I have this class called child, and all of these have a child. So what I’m gonna do is I’m gonna take the class off of here. They all have that class called child. Now we’re gonna say, ooh, we didn’t put any classes on here. Just like this. And everything disappears, right? Why? Because I’m targeting class of child, but there’s no elements with the class of child.
0:33:55
And that’s where the width and the background color and the height and the border were all coming from. So what I can do, there’s going to be situations where you have to target like this, okay. So I’m going to say everything in the parent, all direct children. I want to target every direct child of this parent and it might be a situation where some of them are images, some of them are divs, it doesn’t really matter what they are, I just need them to look like this, okay. So you can put a star and the star is the universal selector which basically means I will select everything. Okay if you just do a star by itself everything on your website look at that whoa crazy everything on your website will look like this. But in this case I said no no no only direct stars of a parent container get this styling which effectively selects all of these divs and applies this styling.
0:34:53
This is the universal selector. You need to be very careful with it. You need to only use it in very specific situations. You need to know exactly what you’re doing when you use it, but it is a very, very helpful selector. It is another way to target elements. Okay. Like I said, I’m not going to deep dive it, but if you ever see the star in, like you’re looking at CSS and you see a star Then you know what it does now. It is the universal selector. Okay, let’s hop back out and talk about ID styling You guys already know what ID styling is. It’s when I grab an element and there’s the ID right there I just start styling it up. I showed you with the background color, right? Not not scalable not maintainable an ID is basically like a fingerprint to this one individual finger right here. That’s this one section, there’s a finger, it’s got a fingerprint, you style to it, none of your other fingers gonna look like that, okay?
0:35:46
Just that one finger is gonna look like that. And it’s completely disconnected from every other element on the page. And this is what makes it not scalable, not maintainable, use very, very, very sparingly. When in doubt, bend it out, right? Then there’s times where usually, if you’re gonna style it at the ID level, if you have a utility class available, then use the utility class, right?
0:36:10
But if you’re in a repeating situation, a dry alert goes off in your head, BIM it out. BIM it out, okay? Next lesson, we start page building. I can’t wait, I can’t wait. You guys have made it this far. You’re doing fantastic. I’m reading the comments, I’m reading the feedback. You guys are doing phenomenal, you’re keeping up, and things are gonna really, really, really start to take off now because next lesson we’re actually going to start putting some pages together.
0:36:36
All right, I’ll see you in the next lesson, peace.
