Multi-brand stylesheet generation in SASS - Performance & Optimization

Performance: Multi-brand stylesheet generation

MEDIUM IMPACT

This affects page load speed and rendering by increasing CSS file size and complexity, impacting LCP and potentially causing slower style calculations.

Creating stylesheets for multiple brands in a project

SASS

$brand-colors: (
  brand1: #123456,
  brand2: #654321
);

:root {
  --primary-color: map-get($brand-colors, brand1);
}

// Use CSS variables and shared styles, override only brand-specific values

Shares common styles and uses CSS variables for brand differences, reducing duplication.

📈 Performance GainSaves 50-70% CSS size per brand, reduces LCP by loading smaller CSS, and speeds style calculation.

Creating stylesheets for multiple brands in a project

SASS

@each $brand in $brands {
  @import "brand-#{$brand}.scss";
}

// Each brand file duplicates many common styles with minor changes

Duplicates common CSS across multiple brand files, increasing total CSS size and load time.

📉 Performance CostAdds 100-200kb per brand to CSS bundle, increasing LCP and blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated brand stylesheets	Low	Low	High due to large CSS	[X] Bad
Shared styles with CSS variables	Low	Low	Low	[OK] Good

Rendering Pipeline

The browser downloads CSS files, parses them, calculates styles, performs layout, paints pixels, and composites layers. Large or duplicated CSS increases parsing and style calculation time.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS and duplicated rules

Core Web Vital Affected

LCP

This affects page load speed and rendering by increasing CSS file size and complexity, impacting LCP and potentially causing slower style calculations.

Optimization Tips

1Avoid duplicating common CSS across brand stylesheets to reduce bundle size.

2Use CSS variables to manage brand-specific colors and styles efficiently.

3Keep CSS files small and shared to improve Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

What is a main performance drawback of generating separate full stylesheets for each brand?

A Increases CSS bundle size and slows page load

B Improves caching efficiency for all brands

C Reduces style recalculation time

D Eliminates layout shifts

DevTools: Performance

How to check: Record a page load, then inspect the 'Style Recalculation' and 'Layout' timings to see CSS impact.

What to look for: Long style recalculation or layout times indicate heavy or duplicated CSS slowing rendering.