Blog

Modern development teams move fast—but complex stylesheets can slow everything down.

At Visus, we recently helped a client streamline a bloated SCSS structure that had become difficult to maintain as designs evolved. The challenge wasn't creativity. It was scale.

This effort required precision, efficiency, and long-term sustainability. Clean systems outperform manual repetition every time.

The Challenge: Repetition at Scale

The client managed a wide range of color variables—each requiring individual utility classes for background colors, text colors, and pseudo-elements (:after).

The stylesheet contained roughly 80 lines of color variables and hundreds of lines of corresponding classes. Every time branding evolved or a new shade was introduced, updates required manual edits across multiple blocks.

The structure looked like this:

//Primary
$primary-900: #001A69;
$primary-800: #001F83;
$primary-700: #1C358A;
$primary-600: #2C459F;
$primary-500: #4E60AC;
$primary-400: #8E9ACC;
$primary-300: #9EA7D1;
$primary-200: #BFC5E2;
$primary-100: #E6E8F3;
$primary-50:  #F2F3F8;

:root {
  .bg-primary-900 { background-color: $primary-900; color: $white;
    &:after { background-color: $primary-900; }
  }
  .bg-primary-800 { background-color: $primary-800; color: $white;
    &:after { background-color: $primary-800; }
  }
  .bg-primary-700 { background-color: $primary-700; color: $white;
    &:after { background-color: $primary-700; }
  }
  .bg-primary-600 { background-color: $primary-600; color: $white;
    &:after { background-color: $primary-600; }
  }
  .bg-primary-500 { background-color: $primary-500; color: $white;
    &:after { background-color: $primary-500; }
  }
  .bg-primary-400 { background-color: $primary-400; color: $gray-800;
    &:after { background-color: $primary-400; }
  }
  .bg-primary-300 { background-color: $primary-300; color: $gray-800;
    &:after { background-color: $primary-300; }
  }
  .bg-primary-200 { background-color: $primary-200; color: $gray-800;
    &:after { background-color: $primary-200; }
  }
  .bg-primary-100 { background-color: $primary-100; color: $gray-800;
    &:after { background-color: $primary-100; }
  }
  .bg-primary-50 { background-color: $primary-50; color: $gray-800;
    &:after { background-color: $primary-50; }
  }
}

This approach worked—but it didn't scale. It created redundancy, increased maintenance time, and introduced room for human error.

The Solution: Dynamic SCSS with Maps and Loops

Instead of continuing to manually expand the stylesheet, we leveraged SCSS maps and the @each loop to dynamically generate classes.

Here is the optimized solution:

// Maps
$primary-colors: (
  900: #001A69,
  800: #001F83,
  700: #1C358A,
  600: #2C459F,
  500: #4E60AC,
  400: #8E9ACC,
  300: #9EA7D1,
  200: #BFC5E2,
  100: #E6E8F3,
  50:  #F2F3F8
);

$text-colors: (
  900: $white,
  800: $white,
  700: $white,
  600: $white,
  500: $white,
  400: $gray-800,
  300: $gray-800,
  200: $gray-800,
  100: $gray-800,
  50:  $gray-800
);

:root {
  @each $shade, $color in $primary-colors {
    .bg-primary-#{$shade} {
      background-color: $color;
      color: map-get($text-colors, $shade);
      &:after { background-color: $color; }
    }
  }
}

Why This Works

This solution transforms repetition into logic. Maps provide structure, loops generate classes dynamically, and centralized configuration simplifies maintenance.

The Impact

With minor adjustments tailored to the client's environment, this approach eliminated hundreds of redundant lines. The stylesheet became more readable, easier to extend, less error-prone, and faster to update. Most importantly, it shifted development from manual repetition to structured automation.

Lessons Learned

This engagement reinforced a core principle: smart abstraction scales better than brute force.

AI-assisted development, when applied strategically, accelerates problem-solving and enhances code quality. The real value isn't just speed—it's clarity. By reframing the problem and introducing scalable architecture, the team gained a reusable pattern that applies to future styling challenges.

At Visus, we focus on building systems that grow with our clients. Whether optimizing digital infrastructure or refining front-end architecture for a modern web application, the goal remains the same: Design for performance. Build for scale. Simplify for the future.