Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Variables, Mixins, and Extending Selectors Extending Selectors

Posted by Luis Chiappe
Luis Chiappe
Courses Plus Student 10,636 Points

Use @extend is a bad practice?

Hey guys, what do you think about this:

I read some articles where say that is not really good to use @extend. I want to know what is your opinion.

Hampton Catlin Dave McFarland Guil Hernandez

Thanks, Luis.

Oziel Perez
Oziel Perez
61,321 Points
Oziel Perez
Oziel Perez
61,321 Points

Well I kinda read the article in a hurry, but my first thought about this is that the @extend function will copy and paste css properties from one selector to another selector, thus repeating code. This should only be used, in my opinion, if you have one element with a few css properties set and lets say about 2 - 3 other elements that will be using those same exact values in addition to unique properties. Something like this:

h1 {
     color:blue;
     font-family: 'Arial', sans-serif;
}

p {
     @extend h1;
     font-size:14px;
     width:85%;
}

div {
     @extend h1;
     background:#DDD;
     width:90%;
     margin-left:auto;
     margin-right:auto;
}

this will copy all the properties of h1 into the p and div tags. Now imagine you have several other tags or class selectors that will also be using these properties. That wouldn't be a good thing to do because of how much repetition of code that would take. You could say that mixins would be the same but with @extend, you would have to make sure that the h1 values are the only values you will need and you would have to make sure that h1 never changes. Imagine adding another property to h1 like background:#333; that would affect all other elements, which means you would have to go back out there and remove the @extend from each of those elements that have it and copy and paste only the properties that were needed in the first place. That's why mixins make more sense, since you can modularize your properties into a theme, sort of speak. and then apply them where necessary. If anything would change in the mixin, you can always go back and only edit element selectors where the mixin is no longer needed. Hopefully that makes sense, but that's my opinion and approach to this. I never even use @extend anyways.

1 Answer

Liam Linacre
PLUS
Liam Linacre
Courses Plus Student 386 Points
Liam Linacre
Liam Linacre
Courses Plus Student 386 Points

The reason to not use @extend is not because it repeats code (this would in my opinion be preferable) its because of how it groups the selectors.

An example i have is that i used to have a class .clearfix that i used with @extend all the time and i ended up with a huge selector list at the top of my stylesheet for the clearfix which is hard to maintain. Yes, your using SASS now but you might not always be using SASS and the next developer may not use SASS.

Here's an example of the problem

.class {
 color: red; 
}

//.... loads more css ....

.class-two {
  @extend .class;
  background: red;
}

Compiles to

.class, .class-two {
  color: red;
}

//.... loads more css ....

.class-two {
  background: red;
}

Which seems fine in this instance but image you have hundreds of lines of CSS between where your @extended class is defined and where its being used. You end you creating duplicate selectors that could be very far apart from each other in the compiled CSS. This makes the final CSS very hard to maintain.

Although you'll get a smaller file size when using @extend its not really worth it.

Also Harry Roberts ( CSS Wizardry ) is a bit of an authority on CSS, i'd listen to him carefully.

Oziel Perez
Oziel Perez
61,321 Points
Oziel Perez
Oziel Perez
61,321 Points

Oh wow, would you look at that! That just goes to show how much I don't use @extend to begin with: I didn't even know that @extend grouped selectors that way (looks like I misinterpreted what Hampton Catlin had mentioned about @extend). With that in mind, yes that sounds like a pain to deal with later on, especially if the css file is edited without sass.

Luis Chiappe
Luis Chiappe
Courses Plus Student 10,636 Points

Hi Liam,

I get it your point, but you can solve this problem using placeholders.

Like: %class { color: red; }

Liam Linacre
Liam Linacre
Courses Plus Student 386 Points

That's why you should use place holders instead of extend.

If you have some code that you want repeating in multiple places then placeholders are the correct tool for the job

Joe Piazza
Joe Piazza
5,544 Points

Thanks, Liam. That was very helpful.