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.