Maps for grouped values in SASS - Performance & Optimization

Performance: Maps for grouped values

MEDIUM IMPACT

Using maps for grouped values affects CSS generation size and style recalculation speed in the browser.

Organizing related style values for reuse

SASS

$theme: (
  colors: (
    primary: #0055ff,
    secondary: #ffaa00
  ),
  font-sizes: (
    small: 0.8rem,
    large: 1.5rem
  )
);

.button-primary {
  color: map-get(map-get($theme, colors), primary);
  font-size: map-get(map-get($theme, font-sizes), large);
}
.button-secondary {
  color: map-get(map-get($theme, colors), secondary);
  font-size: map-get(map-get($theme, font-sizes), small);
}

Groups related values in maps, reducing repetition and generating cleaner CSS.

📈 Performance GainSmaller CSS output and fewer style recalculations improve load and render speed.

Organizing related style values for reuse

SASS

$primary-color: #0055ff;
$secondary-color: #ffaa00;
$font-size-small: 0.8rem;
$font-size-large: 1.5rem;

.button-primary {
  color: $primary-color;
  font-size: $font-size-large;
}
.button-secondary {
  color: $secondary-color;
  font-size: $font-size-small;
}

Repeating individual variables leads to scattered values and duplicated CSS declarations.

📉 Performance CostIncreases CSS file size and causes redundant style recalculations.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using individual variables repeatedly	N/A	N/A	Higher due to larger CSS	[X] Bad
Using grouped maps for values	N/A	N/A	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

Maps in Sass organize style values before CSS generation, reducing CSS size and complexity, which speeds up browser style calculation and layout.

→CSS Generation

→Style Calculation

→Layout

⚠️ BottleneckStyle Calculation due to large or duplicated CSS

Core Web Vital Affected

LCP

Using maps for grouped values affects CSS generation size and style recalculation speed in the browser.

Optimization Tips

1Use Sass maps to group related style values to reduce CSS duplication.

2Smaller CSS files improve Largest Contentful Paint (LCP) by loading faster.

3Avoid repeating individual variables for similar values to keep CSS lean.

Performance Quiz - 3 Questions

How does using Sass maps for grouped values affect CSS file size?

A It reduces CSS file size by avoiding repeated values.

B It increases CSS file size by adding extra code.

C It has no effect on CSS file size.

D It duplicates CSS rules for each map entry.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect CSS file size and number of CSS files loaded.

What to look for: Smaller CSS file size and fewer redundant CSS rules indicate better performance.