SASS, when to extend?

Question

I'm currently working on a team that uses SASS. I see that we are extending styles that are very simple and to me I don't see the benefit of doing this. Am I missing something?

Here are some examples of a _Common.scss that is imported and used throughout other sass files:

.visibility-hidden{visibility: hidden;}
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.display-none { display: none; }
.display-box { display: box; }

.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; }

.width-percent-100 { width: 100%; }
.width-percent-65 { width: 65%; }
.width-percent-50 { width: 50%; }
.width-percent-45 { width: 45%; }
.width-percent-40 { width: 40%; }
.width-percent-33 { width: 33%; }
.width-percent-30 { width: 30%; }
.width-percent-20 { width: 20%; }

.height-percent-100 { height: 100%; }

.cursor-pointer { cursor: pointer; }

.underline { text-decoration: underline; }
.text-decoration-none { text-decoration: none; }
.bold { font-weight: bold; }
.font-weight-normal { font-weight: normal; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }

.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }

.font-percent-65 { font-size: 65%; }
.font-percent-80 { font-size: 80%; }
.font-percent-90 { font-size: 90%; }
.font-percent-100 { font-size: 100%; }
.font-percent-110 { font-size: 110%; }
.font-percent-120 { font-size: 120%; }
.font-percent-130 { font-size: 130%; }
.font-percent-140 { font-size: 140%; }
.font-percent-150 { font-size: 150%; }
.font-percent-160 { font-size: 160%; }
.font-percent-170 { font-size: 170%; }
.font-percent-180 { font-size: 180%; }

Example:

#CategoriesContainer
{
  ul{
    li{
        &:first-child{
          @extend .font-11;
        }
        a
        {
          @extend .font-11;
          @extend .text-decoration-none;
        }
    }
  }
}

Answer 1

You should only use extend when you have a certain attribute set that will be used multiple times. The sheer stupidy of extending a class with a class with one attribute that has the unit value worked into the name of it is incomprehensible.

A better example for a reason to extend can be found in the reference guide

Say we have 2 classes

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

.error is a general no interesting style but a serious error should be really clear.

.seriousError is created to thicken the line, the only problem is that now we have to use both classes in the html to combine the styles.

Because we're lazy and just want to use one class and not duplicate code that might be changed in the future we can extend .seriousError with .error

.seriousError {
  @extend .error;
  border-width: 3px;
}

Now we didn't duplicate the code in our sass file but did get the right styles on the page.

Check out the reference guide for more/better examples.

Just please for the sake of kittens stop extending classes with one attribute classes. And don't implicitly state the value/attributes in the selector, thats not very semantic.

You, and your team, should read this post which explains a few problems with the aproach you take here vs semantic code. Couldn't find a better tuned post this quick.

Answer 2

You aren't missing anything, this is just bloated code in poor form and not a great way to extend classes.

There is maybe one (bad) reason I can imagine why this would be used. If for example .font-10 needs to be .7em instead of 10px, it can be easily changed - but then you've just defeated the point of naming the class "font10". Something like small-font would even make more sense in that case (and I'm not suggesting you use that either).

I won't discuss the merits of semantic class names and the folly of presentational ones (especially as literal as these are), but I will suggest that this is a very narrow use of extending classes. With a 1:1 mapping of class name to property/value, you've practically defeated the purpose of @extend, which is supposed to make you write less CSS.

Better example of what to use @extend for:

.media {
    padding:1em;
    border-color:blue;
    background-color:red;
    clear:left;
}

.my-media {
    @extend .media;
    background-color:green;
}