Do you ever feel overwhelmed by the complexity of your app? If you’re a sane individual then the answer should likely be yes, all the time. It doesn’t matter if you’re building a landing page or solving the toughest technical challenges of a large conglomerate corporation. It’s easy to lose yourself in a component (assuming you have components and are using a modern javascript library).

One of the simplest things i’ve found that helps to clean up my components is removing the unnecessary clutter, the scoped styles. In a single file component, such as the components you find in Vue, it’s easy to see your file line count soar past 1000, 2000, 3000 lines, with the <style> chunk taking up a good majority. You might be tempted to throw all your styles in a separate file, like in angular, but that’s no different than cleaning your room only by hiding all your clutter in drawers and under the bed. You’re not solving the root problem.

Take a look at the scss below, does anything stick out at you?

.activity-navigation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: $brand-primary;
  display: flex;
  justify-content: space-between;
  align-items: center;

  div {
    display: flex;
    justify-content: center;
    flex: 1;
  }

  button {
    margin: 0 24px;
  }
  .previous {
    justify-content: flex-start;

    button {
      &:hover {
        background-color: $brand-secondary;
      }
      background: transparent;
      border-color: $white;
      color: $white;
    }
  }
  .slides {
    span {
      color: $white;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
  .next {
    justify-content: flex-end;
  }
}

To some, the above scss might look pretty typical of something you’d find in one of your own apps. This is actual scss that exists in one of mine, and if you noticed how often I’m repeating myself just defining flex classes then you’ve got a good eye for DRY code.

What if instead of creating all of these custom classes for each element in our component stylesheet, we instead created generic enough classes that could work for any element and add them all instead directly to the <html>.

.pos-abs {
  position: absolute;
}
.d-flex {
  display: flex;
}
.fx-1 {
  flex: 1 1 auto;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-space-between {
  justify-content: space-between;
}
.align-center {
  align-items: center;
}
.no-background {
  background: transparent;
}
.primary {
  background-color: $brand-primary;
}
.white--text {
  color: $white;
}
.clickable {
  cursor: pointer;
}

Pretty easy to see that the above classes are all simple enough to be applied anywhere, and accomplish just about everything that all our custom element css did before.

So what would this change look like on the first stylesheet example? If we removed all the duplicate flex styles, and only kept the essential less frequently used properties.

.activity-navigation {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
 
  button {
    margin: 0 24px;
  }
  .previous {
    button {
      &:hover {
        background-color: $brand-secondary;
      }
      border-color: $white;
    }
  }
}

That’s it! What’s left is only the essential styles, and the rest has moved directly to the element on the <html>. An example of what that might look like is this

<div class="activity-navigation pos-abs d-flex justify-space-between align-center primary">
    <div class="previous justify-start">
      <button class="no-background white--text">
        Previous
      </button>
    </div>
    <div class="slides">
      <span class="d-flex justify-center align-center clickable white--text">
        {{ index + 1 }} of
        {{ slides.length }}
        <i>
          {{
            checkingDropdownTrigger.menuOpen
              ? 'arrow_drop_up'
              : 'arrow_drop_down'
          }}
        </i>
      </span>
    </div>
</div>

By removing all of our duplicated styles from our custom element classes, and instead creating re-usable single use classes and applying them directly to our element, we’ve solved the root problem of our busy stylesheets and made it a lot easier to build out flexible layouts.

Some front-end frameworks, like bootstrap, and vuetify do a lot of this work for you. Leaving you with only the more custom classes you might need, like clickable for defining cursor: pointer;.

Creating more re-usable and flexible generic classes will not only clean up all of the repeated code you might have hiding in your component stylesheets, but it also makes developing your flexible layouts a lot simpler and cleaner cause a majority of the work is done and styled all at once as you build out your <html>.

Sometimes, It’s the little refactors that have the biggest impact, for me and my applications, being smarter about my styles and classes has dramatically improved my front-end apps, and it might do the same for you!

Categories: front-end

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *