This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Specificity and DOM Nodes" Lesson
[00:00:00]
>> Jon Kuperman: You can display the computed styles. So this one's really good as we're kind of getting back towards the specificity question. So one thing that's important is like, sometimes you'll go and you'll see the styles for something. Like if we go to maybe to the body or something like that, and we'll see that the body has a few different body selectors.
[00:00:18] This is really common, right? Like you have your browser provides a style sheet, right? Like this user agent style sheet. And then maybe use a CSS reset, like normalize or something like that. And that has a body selector in it, and it adds something. And then maybe you use Bootstrap and so you grab Bootstrap and that adds a body selector.
[00:00:34] And then maybe you have your main style.css, and that adds another one. And then later on you do something else. So you can kinda have all these conflicting things. Right? And so one thing that's really helpful, cuz I get a lot of tickets when I do UI work that's like, the border is gray on this.
[00:00:50] It's supposed to be blue. Right? And then I see the thing, it's totally gray. It should be blue. And I open it up and I see a thousand selectors with a really big app. Right, you'll see a ton of them. So you can click. Instead of the Styles tab, you can click on the Computed Styles.
[00:01:02] And the computed styles is great because it's like, okay, ignore all that noise. When everything's said and done, when the browser has run all of its what should trump what and what should be officially in there in the information, this is what you're left with. And so you get this really concise list of what margin is there?
[00:01:18] There's zero margin. What display is there? It's block. You don't have to look through all the styles to get that information. And then if you're wondering where something comes from you can just go ahead and click on this arrow. And it'll take you back into the styles tab.
[00:01:32] And it'll highlight the thing that's winning right then. So this is a lot more helpful on big apps where you'll have like potentially hundreds of specificity clashes that the browser has to resolve.
>> Jon Kuperman: You can find event lists in this. This is another one that's really handy. It sort of has deminishing returns on a really big app because you'll end up with so many event listeners.
[00:01:52] But, you can click on this Event Listeners tab, and it will show you all of the event listeners on that document and you can go right to the code that's triggering them. If you have like slow scroll performance and you want to see, what am I doing on scroll?
[00:02:05] Rather than looking through all the code, you can go to the event listeners. You can go to the scroll event and you can see how many you have and where they are. So I can see I only have one. It's on the window element and it's right here in this code.
[00:02:16] So if I click this it will take me to the sources tab which is over here, the sources panel, and it'll show me this window at EventListener scroll, do nothing. But it's just a concept right, you can see that where things are coming from. This is handy with any kind of event like ClickEvent, ResizeEvent, scroll, if you know kind of where the bug is.
[00:02:35] I think this is like a trend we'll see a lot in dev tools as they're really helpful for If you don't know the code really well, but you know the problem or you know what you are trying to fix, there is a lot of cool tools that will help you easily navigate the code base.
[00:02:52] Change color formats. This is another nice one. If we click on the nav element, click on styles, we can see the color format for this is hex, right? It is a six digit hex code. A lot of times design guidelines or whatever will require that all of your stuff be done in different color formats like HSL or RGB or anything like that.
[00:03:12] This kind of cool thing you can do is you can hold shift and you can click on one of these, any color box and you can cycle through all the different color options right? So, shift one takes me to RGB Shift again takes me to hsl and then back to hex.
[00:03:25] So this is true for any color format, or however you author it, you can hit Shift and you can change it, view it in any way. So, I can just copy this. I like to work in hex. I know a lot of them. So, I'll write it in hex, get the color I want, change it to RGB, then I'll copy it and move it in to my codebase.
[00:03:43] Dragon drop dominos. I don't know how useful this one is but it's pretty cool. So you can if we have like two items like so we have let's go back up to the navigation maybe. Nav, scroll into view and then we'll see we have these lessons and we have exercises right so we've got this unordered list.
[00:04:00] We've got these list items in it. This one is lessons, this one is exercises. At any time you can take and you can hold and click any DOM element, like this li here, and you can move it around. You can kind of see, hopefully, this little blue bar shows where it's going to be dropped, like an Excel sheet.
[00:04:16] And, so, you can move things around and now it's exercises-lesson. So, you can move different DOM elements around. You can also, if they're nested, you can drag them out of your nest. So, if it's got a div with a span in it, you can drag that span on top of the div and bring it out.
[00:04:28] Visualize CSS specificity. So I'm not sure how many people are familiar with specificity. I wasn't for a really long time, but. I'll just cover it just for people that aren't familar with it. So the basic concept, this is what I was just kind of harping on which is that like one example is like you have two different classes.
[00:04:57] Both apply to the same element. So you have like div, class foo, and bar. And your like well foo should be red. Bar should be blue. Whats the browser supposed to do with that. Another example is that you have more specific or less specific. Ways of grabbing elements, right?
[00:05:13] So in CSS you can do something like anchor tag, like a. You can be like all anchor tags should be blue. And then you can have an anchor with a class, and you should be like well this one should be green, right? That's pretty common to do. And we know, or a lot of people know, that if you add that class it'll trump the anchor tag selector.
[00:05:30] And the reason why is the browser has these specified rules of what they call specificity. The least specific that you can be is just a general element selector. So you can do all anchors should be blue or all list items should be margin 10 or something like that.
[00:05:45] You can get a little bit more specific by nesting those, right. So you can be like all list items inside of an unordered list and we can see some css that looks like this right. So these are not all allies these are only allies that are nested inside this class.
[00:05:59] And then as you get more specific you can add a class name to something. As you get more then that you can get nested class names right so you can be like only the class of bar when its in the class of foo. You go all the way, then you can have IDs.
[00:06:10] So IDs trump classes, classes trump elements. And then you go all the way into having inline CSS. So you can actually apply a style tag to your list element. LI style equals color blue. And that's the most specific you can get. And so it goes from elements nested to classes to IDs to inline styles.
[00:06:29] The one thing that kind of can throw a wrench in that a little bit is the important tag. and, so, I think in a lot of big apps we try to avoid the important tag because of this. A, it can cause some issues with specificity and B, because it's usually a good sign to take a step back and kind of refactor your class structure.
[00:06:46] But the important tag can bump it up a level of specificity. And especially when you have two of the same specificity. So, in the example where you have just two classes That are arguing with each other. The way that it will normally do it is the one that gets parsed second will win.
[00:07:01] But if you add an important tag to one of them then that's the one that will always win. Yeah, Mike.
>> Speaker 2: There's a very in-depth look at CSS [CROSSTALK].
>> Jon Kuperman: Yes, I love this. Is Estelle still in the chat? That's awesome, yes.
>> Speaker 2: Yeah, Estelle's This CSS in-depth course, and she has Specifishity.
[00:07:19]
>> Jon Kuperman: Sorry, Estella, if I spell this wrong.
>> Jon Kuperman: Yes, this is brilliant. So Estella, does she have classes here? Yes. Yeah, she has classes here. She's awesome. I've seen her at a bunch of converences. She's a CSS guru. Yes, this is really really cute. I'm gonna steal this with attribution if that's okay with you.
[00:07:42] This is awesome. So, yes, so this starts all the way with this general wildcard selector. So you could say all text should be blue, elements, nested elements, really nested elements, classes, the same kind of thing. This is awesome. Yeah, so it's in the chat. Thank you very much for sharing that.
[00:07:59] And so what's cool on the dev tool side is that you can use that to kind of visualize things. So if I go ahead and I hover on this visualize CSS specificity, I can see that there's multiple things that are trying to apply color to it. And they're being crossed out because they're getting trumped there.
[00:08:17] So I have a class on it, right? Some class called a red. And then I have this nested one, right? So an element inside a class trumps it. So this one is color black. And then I have an ID on it, this one is color purple. So you can see that the id wins.
[00:08:31] If you just care about what won, we can go to computed, and we can look at color. But if you kind of want to visualize why, you can look this way and you can see that the ones that lose the specificity battle get crossed out. You can pretty print source code, so this one is hopping ahead a little bit.
[00:08:48] If I go to the sources tab I think actually all of mine might be already, here we go, and we've got this [INAUDIBLE]. This is really common when you serve production code. It's common that you kind of minify it. So you take out all the white space possible, so you serve les bytes over the network.
[00:09:02] So it'll be pretty common when debugging production apps that you'll inspect, you'll go to a source page and it will just be like this thing of text, like if you download J queary. It's just this condensed bundle. So there's this pretty print button that's always here. So you can click it and it'll pretty print as best it can for you.
[00:09:19] One caveat is. A lot of the times are build pipelines when they're doing this kind of compression, they also do what's called uglification. And so uglification is again trying to save bytes so it'll go through and it'll like replace variables with single letter or number variable names, right.
[00:09:34] And so everything will get really tiny. So the pretty print will help visually expand that, but it's still best not to debug on production code if you can help it cuz you're still gonna be Having a hard time understanding. Like what is C.B mean, those kind of things.