Challenge 1: Solution

[00:00:00]
>> Mike North: We're going to go through the solution, or a solution to the first exercise, which involves nested selectors. So we're dealing with nesting and scoping. So what I have here on my screen, let me bump my font up just a little bit. This is the starting point for this exercise and let me just refresh here cuz my server is not running right now.

[00:00:23]
The way we would start this exercise up and this is the same way we're gonna be doing things all day, just changing the name of the exercise here. We're gonna do ./run-E, E for exercise, and then the name of the exercise, so this one is nesting. And you should get a little banner saying, we're doing nesting in Parent Selectors.

[00:00:47]
And it's telling you that the app is running on local host 3000. So if we go to that URL in our browser over here, we'll see the starting point for our exercise is all ready waiting for us. I have installed my LiveReload plugin. And it's a little difficult to see.

[00:01:06]
But, there's a button in Chrome, where this thing can be toggled on and off. So, if you've installed it, and you're not seeing the refreshing behavior, It's the difference between the little tiny box in the icon being outlined or filled in, that's on versus off. So I have mine on right now, so you're going to see me just saying my SCSS file and then app should be reloading.

[00:01:33]
Just to recap as to how things work here, the structure of the exercise. You should need to touch anything in the public folder directly. The useful thing to look at in here, is you can take a look at the CSS output from your Sass. And in fact, I'm gonna a split screen here so that we can write some Sass and I don't need my terminal here anymore.

[00:01:57]
We can write some sass and see what the resulting CSS looks like on the bottom. So we'll just leave that down here. So I want to close my public folder and I'm gonna just be working in source, sass app.css. This is a file that was already there waiting for us.

[00:02:17]
So we can get started. And let me make sure the live reload works. And it does, so we've gone to a different red and back to a different one. We can go white and make it disappear. Great. So, we'll just leave that there, and start looking at the requirements.

[00:02:34]
So the first thing is that my tests are telling me that I want my left padding to be 10 pixels. And, I know that I want my top-bottom padding to be 2 pixels. On button, button primary. And in this case, we described the b t n class or the size of this button should be defined.

[00:02:59]
There are many ways to solve this exercise. I always forget which order these things go in. 2 pixels, then pixels, look like that took. So this is the top bottom padding and this is the left right padding.
>> Audience 1: Do you think it's better to just declare them exclusively cuz you forget, I forget?

[00:03:22]
>> Mike North: Yes.
>> Audience 1: Okay.
>> Mike North: Personally, I like them to declare them specifically in my code. I'm just short on vertical screen real estate here and I wanna-
>> Audience 1: Okay Just wondering.
>> Mike North: But you're right, I do often do those rules one at a time. As far as I know, there's no detriment in terms of performance, there's no downside to doing it that way, there's less of a guessing game.

[00:03:47]
So the next thing is we need a border radius of 2 pixels, that's what my next test is telling me, it's saying currently it's zero pixels.
>> Mike North: Thankfully, we are in an age where we probably don't have worry about vendor prefixes, doing them special in Mozilla and WebKit and IE border radius'.

[00:04:07]
Border style solid, so we're gonna do a 1 pixel solid C46 border. This is one that I can remember, because it's not sensitive to the order of the arguments. It just takes a list, and it knows one of them is like a border type. One of them is a number, the one makes a lot the one of the color.

[00:04:30]
And they can sort it all out internally. We'll look at how we can define our own things to do it later on, Now, I have some errors that have to do with background colours. So, I'm gonna start defining rules that apply specifically to the primary and secondary button classes and I'm gonna use the Parent Selector here.

[00:04:53]
Let me get rid of my sidebar here. I'll use the Parent Selector, btn-primary. So if I had done this, I would have been describing styles that apply to things with a button primary class that are found inside things with a button class. That's not what I want. So here we're gonna say background color C46, not a coincidence that I gave you a hint up at the top, gave you that color so you don't have to keep flipping back and forth.

[00:05:26]
We know there's a secondary color as well. This one I will have to flip back for. Keep forgetting that one. All right. And now we've got sorry, secondary. Now we should be on font colors. So, it wants the button primary class to have a white,
>> Mike North: Background or white font color.

[00:05:57]
We can just do this and then black for the other. And then finally, we have to deal with opacity in the case of the button being disabled. So we're gonna use what's called a pseudo selector here. And these all begin with a colon. And this has to do with like a state that this particular button is in.

[00:06:23]
So other pseudo selectors include like hover, you can change the hover styling of a particular thing if we'd done this, right? So we are gonna just deal with disabled opacity, 0.5, and we should be done. And we are. So this is use of the parent selector, little bit of use of pseudo selectors, and if we look at our resulting CSS I wanna point out a couple things.

[00:06:54]
First off, we've done a decent job of not redundantly defining these styles in our button secondary and button primary class. If we had done something like this, like that, and this. Our style sheet would in fact be like a lot bigger. Just because we end up with these rules being defined over and over again.

[00:07:21]
We've got two places where we've got a two pixel border radius, right? So when we're thinking about like what belongs in that sort of base class if you will versus what belongs in those two specific primary and secondary sort of flags that we flip on. It's always going to be as close as we can get to things that are strictly pertinent to that particular state, right.

[00:07:53]
And nothing extra, so anything that's redundant we try to move out, so that it's defined once in our output CSS. And that's the solution to this. Yes, questions.
>> Audience 2: From online there's a question from Ivan, and he used the Parent Selector in the class declaration
>> Mike North: Yes.
>> Audience 2: And he's wondering, is there any difference?

[00:08:15]
>> Mike North: There is no difference. I've been spoiling my magic reveal, which is going to be happening later on today. So, here's what Ivan may have done,
>> Mike North: I've got some beach balling there. [SOUND] Really fancy use of the Parent Selector. Ta dah [LAUGH]. So, we'll make great use of this when we start working with Bem, but it's important to realize that you can put that Parent Selector once in every selector, only once.

[00:08:47]
So you couldn't do like this for example, right. See how all my styles disappear. I do wanna point out a subtle difference in the output CSS. You'll notice that button primary and secondary are no longer scoped to that BTN class anymore. We lost the ability to do that, right?

[00:09:08]
Now, this is really cool, but it is not exactly the result that we were looking for.