Design token management in SASS - Performance & Optimization

Performance: Design token management

MEDIUM IMPACT

Design token management affects CSS generation and runtime style recalculations, impacting page load speed and rendering consistency.

Using design tokens for consistent theming in a large project

SASS

$colors: (
  primary: #007bff,
  secondary: #6c757d
);

@function color($name) {
  @return map-get($colors, $name);
}

.button {
  color: color(primary);
  background-color: color(secondary);
}

// Centralized tokens with map and function

Centralizing tokens in a map and using functions avoids duplication and keeps CSS smaller and consistent.

📈 Performance Gainreduces CSS bundle size by 20-50kb, improves maintainability and reduces layout shifts

Using design tokens for consistent theming in a large project

SASS

$primary-color: #007bff;
$secondary-color: #6c757d;
$primary-color: #0056b3; // redefining tokens multiple times

.button {
  color: $primary-color;
  background-color: $secondary-color;
}

// Tokens scattered and redefined in many files

Redefining tokens multiple times and scattering them causes larger CSS output and inconsistent styles, leading to more CSS to parse and potential layout shifts.

📉 Performance Costadds 20-50kb to CSS bundle, increases style recalculation on theme changes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Scattered and redefined tokens	No direct DOM impact	Triggers multiple style recalculations	Higher paint cost due to inconsistent styles	[X] Bad
Centralized tokens with Sass maps and functions	No direct DOM impact	Single style calculation on load	Lower paint cost with consistent styles	[OK] Good

Rendering Pipeline

Design tokens are compiled into CSS during build time, affecting style calculation and layout stages in the browser. Efficient token management reduces CSS size and complexity, speeding up style calculation and paint.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation

Core Web Vital Affected

LCP

Design token management affects CSS generation and runtime style recalculations, impacting page load speed and rendering consistency.

Optimization Tips

1Centralize design tokens in Sass maps to avoid duplication.

2Use functions to access tokens for consistent and maintainable styles.

3Avoid redefining tokens multiple times to reduce CSS size and style recalculations.

Performance Quiz - 3 Questions

How does centralizing design tokens in Sass maps improve performance?

A It reduces CSS bundle size and avoids duplicated styles.

B It increases CSS specificity for better overrides.

C It forces the browser to recalculate styles more often.

D It adds more CSS files to the project.

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the 'Style Recalculation' events to see if multiple recalculations occur due to CSS complexity.

What to look for: Look for fewer and shorter 'Style Recalculation' events indicating efficient CSS and token usage.