Chris J. Lee

Dallas Drupal Developer

You are here

Sass code smells

A nod to Harry Roberts

Harry Roberts, also the father of inuitcss, wrote an article germane to CSS code smells. I haven't really seem any articles related to sass code smells. Thus, I thought it'd be a good opportunity to discuss and review some easy signs of code smell signals or symptoms.

I am not perfect

Admittedly, when i started writing sass, I'm very much on the doing end of such atrocities. I would often write sass that would be bloated and probably sometimes do accidentally without taking care. With sass, comes a lot of power. Sass can easily generate sloppy css and cause a lot of issues quickly in terms of performance.

On the flip side, Sass has lots of great advantages: ease of use, reducing redundancy, ability to improve readability and maintainability.

A living document

I'm writing this as a form of a living or working document. I intend to rewrite and improve this document over time. If you have suggestions, or feedback i'd love to hear your comments, jeers, or even salutations.


Excessive Use of an Ampersand

With sass, the ampersand allows you to create nested selectors. Here's an example of overuse:

.foo {

    &.bar {

     &.baz { background: #fc0; }

    }

}

Dude, where is my end bracket?

If you can't instantly find your end bracket you might have a problem. Large blocks of sass is never good for lean and well written processed css.

Mixin to the Max

Mixins are very useful for brevity and allowing the ability to reduce repeating yourself. Mixins allow you to essentially provide a pointer to a css selector. Mixin's should be used with care to reduce repeated css. This happens often when you want something just quickly completed, but at the price of file size.

Given the following example:

@mixin row($width) {
  width: $width;
  clear: both;
}

.l-header {
  @include row(500px);
}

.l-footer {
  @include row(500px);
}

In the aforementioned example, reuse isn't a priority here. It should. There are advantages of this. This would allow easier maintainability if you take advantage of the mixin / parametric / extend pattern in sass:

@mixin row($width) {
  width: $width;
}

%row-500 {
  @include row(500); 
}

.l-header {
  @extend %row-500;
}

.l-footer {
  @extend %row-500;
}

In this example, you'll see styles being reused where possible and code duplication is minimized.

© 2017 Chris J. Lee