1 00:00:00,580 --> 00:00:03,540 When categorizing our Sass rules with SMACSS, 2 00:00:03,540 --> 00:00:07,100 it's important to remember that our rule sets should only inherit and 3 00:00:07,100 --> 00:00:11,550 add to previous rules, so we shouldn't need to undo properties. 4 00:00:11,550 --> 00:00:15,820 So if we, for instance, ever need to remove an element's padding, margins, or 5 00:00:15,820 --> 00:00:18,860 borders, we probably applied them too early. 6 00:00:18,860 --> 00:00:20,830 Let's take a look at an example. 7 00:00:20,830 --> 00:00:24,710 So here, we're going to write three different types of modifiers for 8 00:00:24,710 --> 00:00:26,620 the image elements in our project. 9 00:00:27,800 --> 00:00:32,090 So, the first thing we're going to do is go over to our base directory and 10 00:00:32,090 --> 00:00:34,885 bring up our base.scss partial. 11 00:00:34,885 --> 00:00:38,631 And here, we're going to define some default styling for 12 00:00:38,631 --> 00:00:40,241 our main image element. 13 00:00:40,241 --> 00:00:45,088 So, right above our list rules or anywhere really, I'll go ahead and 14 00:00:45,088 --> 00:00:49,540 add a comment for images, then I'll target the image element. 15 00:00:50,800 --> 00:00:54,770 And let's give our images some default bottom margin, so 16 00:00:54,770 --> 00:01:01,620 we'll say margin-bottom and we'll make the value equivalent to 24 pixels in ems. 17 00:01:01,620 --> 00:01:07,207 And right below that, let's also give it a max width of 100% and 18 00:01:07,207 --> 00:01:10,910 we'll also wanna set its height to auto. 19 00:01:10,910 --> 00:01:13,080 So we'll say height auto. 20 00:01:13,080 --> 00:01:13,580 Okay. So 21 00:01:13,580 --> 00:01:17,940 before we move on, we'll need to go over to our console and have Sass watch for 22 00:01:17,940 --> 00:01:25,450 changes in our project by writing the command sass --watch scss:css. 23 00:01:25,450 --> 00:01:31,350 So now when we save our base.scss partial and refresh the preview, 24 00:01:31,350 --> 00:01:37,970 we can see how our images are now at a 100% max width. 25 00:01:37,970 --> 00:01:42,730 So, what we'll do next is go over to our modules directory and 26 00:01:42,730 --> 00:01:47,500 bring up the newimage.scss partial for images. 27 00:01:47,500 --> 00:01:51,000 And we're going to write our image module rules 28 00:01:51,000 --> 00:01:55,620 by first defining a class of image or img. 29 00:01:55,620 --> 00:02:01,380 Inside the rule, we're going to include modifiers for wrap, avatar and hero. 30 00:02:01,380 --> 00:02:04,380 Those are the types of modifiers we'll want for our images. 31 00:02:04,380 --> 00:02:10,610 So first, let's go ahead and include a modifier selector with the modifier mixin. 32 00:02:10,610 --> 00:02:16,000 And we'll want to create the class image wrap by passing wrap as an argument. 33 00:02:17,090 --> 00:02:18,370 So now we'll create two more, so 34 00:02:18,370 --> 00:02:22,910 I'll just go ahead and copy the one we just wrote and paste it right below. 35 00:02:22,910 --> 00:02:30,290 And to create the class image avatar, we'll pass avatar as our argument. 36 00:02:30,290 --> 00:02:32,770 And finally, we'll want to create the modifier class, 37 00:02:32,770 --> 00:02:35,600 image hero, for our main hero images. 38 00:02:35,600 --> 00:02:38,850 So instead of wrap, we'll pass hero as our argument. 39 00:02:39,950 --> 00:02:42,880 So, each of these image modifier rules are going to 40 00:02:42,880 --> 00:02:47,550 inherit the base styles we just gave the image element. 41 00:02:47,550 --> 00:02:49,970 And now, we're gonna add to those rules. 42 00:02:49,970 --> 00:02:54,510 So first, inside the wrap modifier rule, let's give it a border property, 43 00:02:54,510 --> 00:02:58,850 and we'll make the value 1 pixel solid gray. 44 00:02:58,850 --> 00:03:04,540 So we'll use the palette function to call an extra light shade of gray, 45 00:03:04,540 --> 00:03:08,540 so we'll say grey, x-light. 46 00:03:08,540 --> 00:03:12,270 And let's also give our wrap modifier some padding. 47 00:03:12,270 --> 00:03:14,149 So we'll say padding and 48 00:03:14,149 --> 00:03:19,320 we'll make the padding value equivalent to 12 pixels in ems. 49 00:03:19,320 --> 00:03:22,930 Next, let's go inside our avatar modifier rule and 50 00:03:22,930 --> 00:03:29,220 let's start by giving it a display block, and we'll give it a border radius. 51 00:03:29,220 --> 00:03:32,214 So, we'll use the border-radius property and 52 00:03:32,214 --> 00:03:37,500 we're going to use the br--round variable that's located in our config file. 53 00:03:37,500 --> 00:03:43,848 Finally, in our hero modifier rule, we'll want to give it a margin-bottom property. 54 00:03:45,710 --> 00:03:49,490 And let's make the value equivalent to 42 pixels. 55 00:03:51,230 --> 00:03:53,250 Our hero image will [LAUGH] usually be pretty big, so 56 00:03:53,250 --> 00:03:55,510 we'll wanna give it additional margins. 57 00:03:55,510 --> 00:03:59,780 Now, here's a case where we're resetting that base margin 58 00:03:59,780 --> 00:04:04,640 of 24 pixels with this new one here in our hero modifier. 59 00:04:04,640 --> 00:04:10,055 Now, we could have extended the base margin property with a placeholder since 60 00:04:10,055 --> 00:04:15,483 it's shared by the two modifiers above here, the wrap and avatar modifiers. 61 00:04:15,483 --> 00:04:19,964 But in some cases, instead of extending absolutely everything in sight, 62 00:04:19,964 --> 00:04:24,040 resetting certain styles is okay if and when it makes sense. 63 00:04:24,040 --> 00:04:28,780 Remember, we're not aiming to remove every last bit of property duplication from our 64 00:04:28,780 --> 00:04:30,270 CSS output. 65 00:04:30,270 --> 00:04:33,240 We just need to make good decisions on when it makes sense and 66 00:04:33,240 --> 00:04:34,730 I think it does here. 67 00:04:34,730 --> 00:04:38,550 Okay, so now let's try our classes out in our markup. 68 00:04:38,550 --> 00:04:44,060 So, we'll bring up the HTML file and let's find our main hero image. 69 00:04:44,060 --> 00:04:45,470 There it is. 70 00:04:45,470 --> 00:04:47,210 So, let's give it a class attribute. 71 00:04:48,980 --> 00:04:52,706 And we'll give it that image hero modifier class. 72 00:04:52,706 --> 00:04:57,380 Then, all the way down in our image examples right here under media, 73 00:04:57,380 --> 00:05:02,863 we'll leave the first one alone since we don't wanna apply any modifier classes 74 00:05:02,863 --> 00:05:07,801 to that one, but we'll give the next one the image wrap modifier class. 75 00:05:07,801 --> 00:05:12,769 [BLANK_AUDIO] 76 00:05:12,769 --> 00:05:19,200 And finally, we'll give our avatar image the image avatar modifier class. 77 00:05:21,880 --> 00:05:25,050 I forgot an extra dash here in the image wrap class. 78 00:05:25,050 --> 00:05:28,120 Okay, so let's save our index.html file and 79 00:05:28,120 --> 00:05:30,500 let's take a look at our workspace preview. 80 00:05:30,500 --> 00:05:34,270 So, I'll refresh and it looks like we're all set. 81 00:05:34,270 --> 00:05:37,390 Let's scroll to the bottom and take a look at our images. 82 00:05:37,390 --> 00:05:42,890 So, the wrap now has the border and padding, and the avatar is nicely rounded. 83 00:05:42,890 --> 00:05:46,610 And as we can see, the max width is still set to 100%. 84 00:05:46,610 --> 00:05:47,330 Cool. 85 00:05:48,830 --> 00:05:52,650 Hopefully now, you're seeing the benefits of using a naming convention inside 86 00:05:52,650 --> 00:05:55,140 an organization method like SMACSS. 87 00:05:55,140 --> 00:05:59,090 Again, these are merely suggestions and guidelines to help you out. 88 00:05:59,090 --> 00:06:02,840 What's important is that you find what works for you and stick with it. 89 00:06:02,840 --> 00:06:03,850 Just try to be consistent.