Reusing Style with Mixins

[00:00:00]
>> Mike: So, some people have been waiting for this section all day and I want to just revisit something we spoke about earlier called style reuse that we use mixins to reuse styles. We defined them once, and then we were able to include that mixin into multiple places. And here's the result in CSS on the right side.

[00:00:21]
You see that if we bring danger in both for a button and alerts, because we want both to have a red background, white text, these are obviously two unrelated concerns, right. For us to share a class between these, that would sort of that doesn't really feel right in this.

[00:00:40]
What we end up with this style on the right. And what I want you to consider is how much your styles end up growing as the mixin danger ends up growing. Right, so that was ten lines. We have 20 lines of that mixin code on the right side, that's because what ends up happening when you use a mixin is that it's almost evaluated like a function.

[00:01:05]
And the return value of that function is just drop into that style declaration block wherever that mixin was included, right. And sometimes we wanna be a little bit more efficient and there is a way to do it. And it is using extend. Extend is a little bit different than Mixin.

[00:01:26]
It's another tool we can use to reuse styles. But, you can think of this almost as opting in to all behavior defined, or all styles defined on another class. So in this case, we define a class called danger. And then .btn-danger is basically defined as, I wanna do everything that .danger was doing, but in addition to that, also to pixels of padding.

[00:01:53]
And then alert danger says, same here. Everything that danger was doing, but in addition to that 100% width. And what we end up with is style that doesn't repeat itself at all on the right hand side, yes.
>> Speaker 2: Unless you're using LESS.
>> Mike: Unless you're using-
>> Speaker 2: LESS.

[00:02:12]
>> Mike: LESS.
>> Speaker 2: LESS doesn't handle it that way and it's stupid.
>> Mike: LESS does-
>> Speaker 3: LESS as opposed to SASS.
>> Speaker 2: Yeah.
>> [CROSSTALK]
>> Mike: Yes.
>> Speaker 2: Yeah.
>> Mike: So extend works differently in LESS than it does in SASS.
>> Speaker 2: Yeah, in a bad way, that's good, just as an FYI.

[00:02:32]
>> Mike: Good point, yeah, so you'll see a similar concept in less, but it doesn't try to consolidate there concerns into a single declaration block here. Where you're basically adding selectors to the same declaration block. Now this can get you into trouble because if I were looking at this code and it started to get big, you sometimes lose track of which classes are around just to be extended from.

[00:03:02]
So maybe some of them are extended from, and they're also used in and of themselves. And if you imagine that these three things were broken out across different files different partials in your collection of SASS files. It would be really easy to change danger without having any awareness that is going to effect these two other things.

[00:03:24]
SASS also has an answer for this and it is the idea of placeholders. So placeholders are just like classes, they begin with a percent sign and the key difference here is that the output here does not contain danger at all. It exists solely to to be extended from.

[00:03:45]
It is there only as a construct that can be extended from. And therefore, when you come across one of these, you know that obviously, same as when I change a variable. This is going to have a ripple effect throughout my code. And I probably should do a search to see who is consuming this and talk to them and make sure this is okay that I modify this thing.

[00:04:07]
So a practice that sounds pretty good to me and I haven't really clipped over my shoes laces yet with it, so I have advocated it as much as I am comfortable advocating. It is the idea that this is an approach you can take Instead of mixins, when no variables are involved.

[00:04:27]
When we simply want to share a style block, across multiple concerns and there are no colors to pass, or no hue rotation involved in the picture. This is totally fine to use. And I would say using placeholders is really the one of the only safe ways to use extend.

[00:04:48]
Extend can get out of control really quickly. So if we have a situation like this even with a placeholder and a seemingly innocent selector here can end up generating a whole bunch of garbage in your in your output CSS. So especially remember, when you have like, in the source of the problem here of course is that, we've got a lot of nesting and we've also got multiple selectors pend to each declaration block.

[00:05:19]
So we almost get the all possible per mutations of these thing is now added to the same style role. And this can cause your CSS to blow up in size faster than just about anything. So some people have linting rules in place that prevent the use of extend.

[00:05:39]
And it is for this reason, and the reason I just mentioned. Inadvertent modifications to your code, they seem fine, but then you realize that six people were hopping on top of this rule and you had no idea. You didn't know that you were gonna affect that and they just started inheriting from this rule, and now you've broken their stuff, right?

[00:06:03]
And this is the other reason because pretty soon your CSS is just really, really selector heavy. No amount of minification is gonna solve this problem, it's bad. Gzipping does help, but this is not good, so avoid it. And the way to avoid it is to keep your extends at a relatively high level.

[00:06:30]
Don't go incredibly deep. Deep selectors in general are not a great idea. So, I forget the name of who the author of this blog post but there's a great concept put forward called the inception rule. If anything you'll see inception, if you don't go more than four layers deep into the dream world, or it just starts to get the hell at the bottom where there's the building scrambling all over the place.

[00:06:57]
So that's number one, and then number two like always his place holder. It should extend, even if it involves, like creating another adapt danger class that also comes from that place holder. At least, then if someone goes to modify that danger 'cause it's directly used somewhere. So, they are only like messing with that one thing.

[00:07:18]
Right, they are not sending those ripples unintentionally through your code.