Quick Edits: Computed Styles & Specificity

[00:00:02]
>> All right, we can also get computed styles. I'm gonna cover this a little bit later. But CSS is kind of an interesting language because it doesn't have a compile time or it doesn't have errors in the same way that maybe JavaScript does. So for example, if we wrote some CSS that was, class of foo background red, and then right afterwards we wrote, class of foo background blue.

[00:00:27]
How is CSS supposed to deal with that, right? We've got this kind of conflict. In JavaScript we throw an error or it would just assign the latest one that's been given, right? If you did like var foo equals red foo equals blue. It would just set it and it's just a constant with error.

[00:00:42]
But CSS is a little bit weird. And it's also weird because, the CSS when you write it isn't aware of the structure of the DOM, what it will be when it actually renders. So that sounds complicated, but I don't think it really is. So let's say we write CSS where we write, all divs are blue and anything with the class of foo is red.

[00:01:04]
That seems like pretty straightforward, right? Divs are blue things with foo are rad. But then let's say we make a div with the class of foo. Now all of a sudden CSS has a problem, right? Because you've told it now two different things apply. And so what it does is it follows these rules called CSS specificity, and it's basically a big giant fight, [LAUGH] right?

[00:01:24]
Where they all the selectors that exist on a given element fight. And so Estelle has this really great website, which I've linked to here called CSS Specifishity. And it's a little comic which kind of helps you understand how these CSS rules play out. And so you can see each type of selector in the top left, a cute drawing in the middle, and then it's kinda score down here.

[00:01:50]
So you can see the weakest selector of all is the star, the asterisk, and that will apply to everything universally. So sometimes you'll see like asterisk, margin 0, padding 0 on a website. So just kind of by default, stuff doesn't have padding. And then we get into an element selector, and then we get into a double element selector, then more and more selectors.

[00:02:10]
So if you have a ul with an li with a span in there, if you do span, blue, li span, red ul li span yellow, it'll be yellow cuz that's the most specific. Because it's got three in there. Then it goes into classes, then it goes into an asterisk with a class anyway kind of follows the whole way up.

[00:02:31]
But what's kind of important to know is that element selectors are the weakest type of selector besides the asterisks. And then it classes are also pretty weak. And then as you get up IDs are pretty strong. And then inline styles like in your HTML so if you do div style equals background blue is really strong and the only thing stronger than that is an important tag.

[00:02:52]
Which we all try to keep probably out of our sights, but they find their way in anyway. But that's just like, this isn't a CSS class. But that's a high level view which is needed for this next section because CSS has a really hard job where you author it, and it runs having no idea what DOM what HTML is gonna run on.

[00:03:11]
And so it needs these are rules for when there's conflicting information. So computed styles back to where I was before, is really cool. So you can click on an element like let's go find this h2 here. And then instead of being on the styles tab, which is probably the one we spend most of our time on, you can click computed.

[00:03:29]
And what computed is going to give you is a list of like okay after the fight happens, [LAUGH] I don't know how else to phrase it besides the fight. But after a CSS specificity rules are all applied, these are the things that won, right? These are the things, so if you had for an example, we can take the h2, and we can say okay, h2s are all blue, right?

[00:03:52]
And so that h2 turns blue. And then, but it's got an idea of quick edits, right? So we go ahead and we make a new selector and we do quick edits and we do okay. Well, quick edits, those are all red, right? And so as we'd expect, it turns red because an ID is stronger than an element, right?

[00:04:09]
But when you work on big apps with a lot of teams all contributing stuff, it's never quite this simple. It's like two selectors, right? It's like everybody's bringing selectors to the table. So you're like every component has its own stuff and different teams write different stuff. And, oftentimes people come up with these solutions like scoped styles or BEM or all these different things to try to deal with this cuz it gets really difficult.

[00:04:33]
When I work at Twitter which is a massive web app, I can't tell you how many times I would get a ticket like extra border appearing on tweets when you're logged out and you are viewing this and reply. And I'm looking at CSS to try and find specific role, it's like ul li so the idea of tweets and class of active tweet, all that stuff.

[00:04:51]
Really confusing. So computed styles can be really great because you can go to computed styles, you can try to find the thing you are looking for like, why is it red, right? You can find that color is red, that's fine. Then you can click this little caret here, and it'll say, look, here's a list of all the things that change the color, and here's the one that won out, right?

[00:05:11]
And so if you click on this little arrow next to the one, it'll take you back into the styles tab, right? So we've gone from computed back in the styles, and it'll show you where that is. So computed is really cool. It also shows you the full box model.

[00:05:26]
Again, this is not like an HTML or CSS class, but I assume a lot of people have heard the term box model before, the HTML box model. And so it's basically it's like you have a thing and it has a size, but then it has padding potentially, then it has border potentially, then it has margin potentially.

[00:05:43]
This is a really great way of visualizing it for any element. So you can see the element has a size 1200 by 38. It has no padding, no border and a margin of 33 on the top and 8 on the bottom. This is gonna be really cool too when you're just trying to visualize how stuff's gonna render.

[00:06:00]
Yeah, and so this is a great tool, especially for big apps where you're trying to figure out why something is the way it is. You can just go ahead and refresh, you can be like why is this black? Hover on it. See there's only one rule, click on the arrow and it will take me right to the actual line that sets the color to black.