Number types and units in SASS - Performance & Optimization

Performance: Number types and units

MEDIUM IMPACT

How CSS number units affect layout calculations and rendering speed.

Defining sizes and spacing in styles

SASS

$width: 50%;
$margin: 1.25rem;
.element {
  width: $width;
  margin: $margin;
}

Using relative units like % and rem allows the browser to calculate sizes more efficiently and adapt to different devices without costly reflows.

📈 Performance GainSingle reflow on resize; better LCP due to flexible layout.

Defining sizes and spacing in styles

SASS

$width: 100px;
$margin: 20px;
.element {
  width: $width;
  margin: $margin;
}

Using fixed pixel units everywhere causes more layout recalculations on different screen sizes and can trigger reflows on resize.

📉 Performance CostTriggers multiple reflows on viewport changes; less flexible for responsive design.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fixed px units	No extra DOM nodes	Multiple reflows on resize	Moderate paint cost	[X] Bad
Relative units (%, rem)	No extra DOM nodes	Single reflow on resize	Lower paint cost	[OK] Good

Rendering Pipeline

Number units in CSS affect the Style Calculation and Layout stages. Fixed units like px require recalculations on viewport changes, while relative units allow smoother recalculations.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout

Core Web Vital Affected

LCP

How CSS number units affect layout calculations and rendering speed.

Optimization Tips

1Prefer relative units like %, rem, and em for sizes and spacing.

2Avoid fixed px units for responsive elements to reduce reflows.

3Use consistent units to help the browser optimize layout calculations.

Performance Quiz - 3 Questions

Which CSS unit type generally causes fewer layout recalculations on viewport resize?

A Fixed units like px

B Relative units like % and rem

C Unitless numbers

D Degrees (deg)

DevTools: Performance

How to check: Record a performance profile while resizing the browser window and observe layout recalculations and reflows.

What to look for: Look for fewer layout events and shorter layout durations indicating better performance with relative units.