SCSS Best Practices: Tips and Tricks for Clean Code

Habits that keep your stylesheets clean, maintainable, and free of the bloat that preprocessors can accidentally create.

What SCSS gives you

SCSS is a CSS preprocessor. It adds variables, mixins, functions, nested rules, and more on top of plain CSS. Used sensibly, those features save repetition and make large stylesheets easier to manage. Used carelessly, they create selectors nobody can override and CSS files nobody wants to touch.

1. Keep it DRY (don’t repeat yourself)

Variables are for colours, font stacks, and any value you use more than once. Mixins are for reusable chunks of CSS – the same group of properties you keep copying and pasting.

Example

$primary-color: #3498db;

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  background-color: $primary-color;
  @include flex-center;
}

2. Nesting: useful, but easy to overdo

Nesting mirrors your HTML structure, which is handy. It also tempts you to nest too deep. As a rule of thumb, stop at three levels. Beyond that, selectors get overly specific and hard to override.

Fine

.navbar {
  li {
    a {
      // Styles for nav links
    }
  }
}

Avoid

.navbar {
  li {
    a {
      &:hover {
        span {
          // Too specific, hard to maintain
        }
      }
    }
  }
}

3. Use variables wisely

Colours and fonts are the obvious ones, but breakpoints, spacing units, and anything that might change across the project are worth storing in variables too.

Example

$small: 600px;
$medium: 900px;
$large: 1200px;

@media (min-width: $medium) {
  // Styles for medium-sized devices
}

4. Organise your files

On larger projects, split styles into partials: variables, mixins, base styles, components, layouts, themes. One file per concern keeps things findable.

5. Comment your code

Comments should explain why, not restate what the code already says. Future you (and anyone else on the project) will thank you for a note on the non-obvious bits.

Example

// This mixin handles cross-browser box-shadow with a fallback for IE
@mixin box-shadow($shadow) {
  // IE Fallback
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');
  // Standard box-shadow
  box-shadow: $shadow;
}

6. Be consistent in naming

Pick a convention – BEM, OOCSS, whatever suits the project – and stick to it. Consistent naming makes stylesheets much easier to read.

7. Use functions for calculations

SCSS functions handle maths and dynamic values, keeping mixins and styles tidy.

Example

@function calculate-grid-width($columns: 12) {
  @return 100% / $columns;
}

.col-4 {
  width: calculate-grid-width(4);
}

8. Use @extend carefully

@extend shares property sets between selectors, which is useful. Overuse it and you get bloated, tangled CSS. For anything complex or dynamic, prefer mixins.

9. Check the compiled CSS

SCSS is a convenience layer. What matters to the browser is the CSS it compiles to. Glance at the output now and then to catch unexpected bloat or specificity problems.

10. Keep up with changes

SCSS evolves. Worth knowing what is new, but do not chase every feature for the sake of it.

Good SCSS is CSS that is easier to write and maintain. These habits help you get there without creating a stylesheet that fights you on every change.