Challenge 10: Solution

[00:00:00]
>> Mike North: We're going to go through the example where we're using extend to create our primary and secondary buttons. So all I've done here is start the server up and running in the background. So you can see I've got the same starting point that you should have had. Take note that these are the way my buttons look by default in this particular browser with these particular settings.

[00:00:24]
Your buttons might look different, that's totally fine. So what we're gonna do is go to our app.scss inside the extend exercise here, that's the one we're working on. And now we can get rid of this. So, oops, that does not look right. Let's see, extend, nope, apparently that's what I left there, interesting.

[00:00:51]
So what we're gonna do, is we're going to first create what's called a placeholder. And this is gonna serve as sort of the base for my buttons. I'm gonna define some common styles here, just like I was doing before in exercise one. But, in this case, I'm going to end up extending from this instead of using those secondary and primary classes as modifiers.

[00:01:18]
So, ultimately, we're gonna end up doing this and give ourselves a secondary.
>> Mike North: So what I can then do is start to apply some of the rules here, like the padding that we're supposed to have.
>> Mike North: Probably, nope, I got that wrong. Padding top is supposed to be 2 pixels.

[00:01:46]
Border radius is supposed to be two pixels.
>> Mike North: And border style is suppose to be solid.
>> Mike North: All right, now we're getting in the background color. So the primary button is gonna have a background of c49, I think. Yep, and the color white, this one is gonna have the color black.

[00:02:20]
And we're expecting to have this other color, I'm just gonna grab it in RGB form. You could copy it from excercise one if you want, this will also work. So, interesting, maybe it's c46. I think that's it, there we go. All right, so now we've extended from our button, and we've added some of these.

[00:02:47]
We're starting to see our test pass. I just wanna take a look at what our CSS looks like at this point. So you can see here, it's pretty simple. We don't have a base button class, but we have this BTN placeholder that primary and secondary both opted into sharing, right.

[00:03:05]
They want those styles, so they also extend. They add some styles of their own on top of those. And so what we get in the end is that the commonalities are defined together in a single style declaration with two selectors. And then each has their own style declaration as well for those things that make these buttons different.

[00:03:25]
So we've still got that sort of stuff that makes them safe and stuff that makes them different, defined in a way where we're minimizing redundancy. So we can keep going here and add the opacity pseudo selector here on the disabled, sorry, add the opacity style to the disabled pseudo selector

[00:03:52]
>> Mike North: And finally, button secondary still did not like the background color there. Hm, 200, c46 was found instead. What's going on here?
>> Mike North: I'm not sure what's happening here. So it says expected button secondary to have value for background color this, c46 was found instead.
>> Mike North: I think that's an error in my tests.

[00:04:33]
>> Speaker 2: Background color?
>> Mike North: No, I have the RGB values incorrect here.
>> Mike North: There we go, all right, so here we are at the end. Let's take a look at our CSS. You'll see that disabled that, because that's another selector deep, that got broken out into it's own role.

[00:04:50]
Again, consolidating the two concerns into a single button. Now we could change it and we can do this just as as easily. Just changing our placeholder to a .vtn. This would fail a test here, because I've laid a trap where I am just using the button selector by itself.

[00:05:09]
But you can see here, now we've got this button base class also as part of this thing here. And you'd be at risk for someone saying, well I created button other, which has nothing to do with primary or secondary. And I needed to make this change to the base button.

[00:05:25]
And you could send ripple effects through anything that extends from it. So this is why I like to keep the idea of extending from something and using something directly in your styles as separate concerns. So this is the example for using extend. And this, what we've done here, I don't think you'd find people that would argue that anything here is treading into the unsafe use of extend territory.

[00:05:50]
So the only thing you could object to is if, in principle, you think it is dangerous enough to allow the use of extend in your code base, that you wanna avoid it entirely.