Flexbox utility class generation in SASS - Performance & Optimization

Performance: Flexbox utility class generation

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling how flexbox utility classes are generated and applied, impacting CSS size and browser layout calculations.

Creating reusable flexbox utility classes for layout

SASS

$flex-utilities: (
  justify-content: (center, flex-start, flex-end),
  align-items: (center, flex-start),
  flex-direction: (row, column)
);

@each $prop, $values in $flex-utilities {
  @each $value in $values {
    .#{$prop}-#{$value} {
      #{$prop}: #{$value};
    }
  }
}

Generates only needed utility classes, reducing CSS size and improving load and parse times.

📈 Performance GainSaves 10-30kb in CSS bundle, reducing LCP by 100-200ms on slow connections

Creating reusable flexbox utility classes for layout

SASS

@each $prop in (justify-content, align-items, flex-direction) {
  @each $value in (center, flex-start, flex-end, row, column) {
    .#{$prop}-#{$value} {
      #{$prop}: #{$value};
    }
  }
}

Generates many classes including unused ones, increasing CSS file size and causing longer CSS parsing and slower initial rendering.

📉 Performance CostAdds 20-50kb to CSS bundle depending on number of properties and values

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Generating all possible flexbox utilities	No extra DOM nodes	No direct reflows but large CSS slows style calculation	Medium paint cost due to slower layout	[X] Bad
Generating only needed flexbox utilities	No extra DOM nodes	No direct reflows, smaller CSS speeds style calculation	Lower paint cost due to faster layout	[OK] Good

Rendering Pipeline

Flexbox utility classes affect the Style Calculation and Layout stages by adding CSS rules that the browser must parse and apply. Larger CSS files increase Style Calculation time, and more layout changes can trigger reflows.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS size

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling how flexbox utility classes are generated and applied, impacting CSS size and browser layout calculations.

Optimization Tips

1Only generate flexbox utility classes you actually use to keep CSS small.

2Use Sass maps and loops to control which classes are created.

3Minify CSS to reduce file size and speed up style calculation.

Performance Quiz - 3 Questions

What is a main performance drawback of generating all possible flexbox utility classes in CSS?

A Adds extra DOM nodes to the page

B Triggers JavaScript re-execution on load

C Increases CSS file size and slows style calculation

D Causes images to load slower

DevTools: Performance

How to check: Record a performance profile while loading the page, then inspect the 'Style Recalculation' and 'Layout' sections to see time spent parsing CSS and calculating layout.

What to look for: Look for long style recalculation times and layout durations indicating large CSS or complex layout calculations.