First SASS stylesheet - Performance & Optimization

Performance: First SASS stylesheet

LOW IMPACT

This affects the CSS bundle size and the browser's style calculation and paint performance.

Writing styles for a website with repeated colors and fonts

SASS

$primary-color: #3498db;

.button {
  color: $primary-color;
  border: 1px solid $primary-color;
}

.link {
  color: $primary-color;
}

Using variables reduces repetition and CSS file size, making styles easier to update.

📈 Performance GainSaves a few bytes in CSS, improving load speed and LCP marginally.

Writing styles for a website with repeated colors and fonts

SASS

$primary-color: #3498db;

.button {
  color: #3498db;
  border: 1px solid #3498db;
}

.link {
  color: #3498db;
}

Repeating the same color value multiple times increases CSS size and maintenance effort.

📉 Performance CostAdds unnecessary CSS bytes increasing bundle size slightly, which can delay LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated raw colors in CSS	No extra DOM nodes	0 reflows	Slightly higher paint cost due to larger CSS	[X] Bad
Using SASS variables for colors	No extra DOM nodes	0 reflows	Lower paint cost due to smaller CSS	[OK] Good

Rendering Pipeline

SASS compiles to CSS before the browser loads the page. The browser then parses CSS, calculates styles, performs layout, and paints pixels.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation can slow down if CSS is large or complex.

Core Web Vital Affected

LCP

This affects the CSS bundle size and the browser's style calculation and paint performance.

Optimization Tips

1Use SASS variables to avoid repeating values and reduce CSS size.

2Keep nesting shallow to prevent generating overly complex selectors.

3Remove unused styles to keep the compiled CSS minimal.

Performance Quiz - 3 Questions

How does using SASS variables affect CSS performance?

A It reduces CSS file size by avoiding repeated values.

B It increases CSS file size by adding extra code.

C It causes more DOM nodes to be created.

D It triggers more reflows during page load.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and check the size of the compiled CSS file.

What to look for: Look for large CSS file sizes that can delay LCP; smaller CSS files load faster.