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

Matthew Francis
Matthew Francis
6,967 Points

SCSS - creating a mixin or creating a new class?

Say you want to have

margin-bottom:10rem;

on a few elements. You could either create a mixin and include it to existing classes

or you could create a new class and include it in your HTML to the elements you want.

Which one is better practice?

1 Answer

Even if it's just for one thing, it's good practice to add it as a mixin, but name it something other than "margin bottom". Maybe name it "bottom piece" or "footer spacing" or something like that, because if you have something that is being repeated across more than one instance and it's being implemented the exact same way, then ALWAYS, ALWAYS, ALWAYS use a mixin, partial, or variable when you can. Here are some thoughts on why that is:

  1. Who is to say that next week, you don't like 10rem and want it to be 9.5rem, you would have to do that for each place it's done. And if you're like me, you'll be changing it 20 - 30 times before you are happy with it. See how that can multiply your work without a mixin?
  2. It keeps things the same. The $40 term is "data integrity" and it just makes sure that if you have 10rem margins for 5 classes, then all five classes will have EXACTLY 10rem. But what if you wanted to change it? Well then you go into all 4 of the classes...or was it 5? No, it was definitely 4...and then you find out that one of your pages has a weird spacing and now you have to fix that too. It's much easier to do a mixin.
  3. Then (here's why I said to change the name in the beginning) if you ever needed to add something to it, say text, or a copyright, or even different styling: you change ONE mixin and BOOM, you have changes everywhere you need them.

Hope this helps.