When categorizing our Sass rules with SMACSS,

it's important to remember that our rule sets should only inherit and

add to previous rules, so we shouldn't need to undo properties.

So if we, for instance, ever need to remove an element's padding, margins, or

borders, we probably applied them too early.

Let's take a look at an example.

So here, we're going to write three different types of modifiers for

the image elements in our project.

So, the first thing we're going to do is go over to our base directory and

bring up our base.scss partial.

And here, we're going to define some default styling for

our main image element.

So, right above our list rules or anywhere really, I'll go ahead and

add a comment for images, then I'll target the image element.

And let's give our images some default bottom margin, so

we'll say margin-bottom and we'll make the value equivalent to 24 pixels in ems.

And right below that, let's also give it a max width of 100% and

we'll also wanna set its height to auto.

So we'll say height auto.

Okay. So

before we move on, we'll need to go over to our console and have Sass watch for

changes in our project by writing the command sass --watch scss:css.

So now when we save our base.scss partial and refresh the preview,

we can see how our images are now at a 100% max width.

So, what we'll do next is go over to our modules directory and

bring up the newimage.scss partial for images.

And we're going to write our image module rules

by first defining a class of image or img.

Inside the rule, we're going to include modifiers for wrap, avatar and hero.

Those are the types of modifiers we'll want for our images.

So first, let's go ahead and include a modifier selector with the modifier mixin.

And we'll want to create the class image wrap by passing wrap as an argument.

So now we'll create two more, so

I'll just go ahead and copy the one we just wrote and paste it right below.

And to create the class image avatar, we'll pass avatar as our argument.

And finally, we'll want to create the modifier class,

image hero, for our main hero images.

So instead of wrap, we'll pass hero as our argument.

So, each of these image modifier rules are going to

inherit the base styles we just gave the image element.

And now, we're gonna add to those rules.

So first, inside the wrap modifier rule, let's give it a border property,

and we'll make the value 1 pixel solid gray.

So we'll use the palette function to call an extra light shade of gray,

so we'll say grey, x-light.

And let's also give our wrap modifier some padding.

So we'll say padding and

we'll make the padding value equivalent to 12 pixels in ems.

Next, let's go inside our avatar modifier rule and

let's start by giving it a display block, and we'll give it a border radius.

So, we'll use the border-radius property and

we're going to use the br--round variable that's located in our config file.

Finally, in our hero modifier rule, we'll want to give it a margin-bottom property.

And let's make the value equivalent to 42 pixels.

Our hero image will [LAUGH] usually be pretty big, so

we'll wanna give it additional margins.

Now, here's a case where we're resetting that base margin

of 24 pixels with this new one here in our hero modifier.

Now, we could have extended the base margin property with a placeholder since

it's shared by the two modifiers above here, the wrap and avatar modifiers.

But in some cases, instead of extending absolutely everything in sight,

resetting certain styles is okay if and when it makes sense.

Remember, we're not aiming to remove every last bit of property duplication from our

CSS output.

We just need to make good decisions on when it makes sense and

I think it does here.

Okay, so now let's try our classes out in our markup.

So, we'll bring up the HTML file and let's find our main hero image.

There it is.

So, let's give it a class attribute.

And we'll give it that image hero modifier class.

Then, all the way down in our image examples right here under media,

we'll leave the first one alone since we don't wanna apply any modifier classes

to that one, but we'll give the next one the image wrap modifier class.

[BLANK_AUDIO]

And finally, we'll give our avatar image the image avatar modifier class.

I forgot an extra dash here in the image wrap class.

Okay, so let's save our index.html file and

let's take a look at our workspace preview.

So, I'll refresh and it looks like we're all set.

Let's scroll to the bottom and take a look at our images.

So, the wrap now has the border and padding, and the avatar is nicely rounded.

And as we can see, the max width is still set to 100%.

Cool.

Hopefully now, you're seeing the benefits of using a naming convention inside

an organization method like SMACSS.

Again, these are merely suggestions and guidelines to help you out.

What's important is that you find what works for you and stick with it.

Just try to be consistent.