Partial files with underscore prefix in SASS - Performance & Optimization

Performance: Partial files with underscore prefix

MEDIUM IMPACT

This affects CSS build time and bundle size by controlling which Sass files are compiled directly.

Organizing Sass files to optimize CSS build and bundle size

SASS

@import 'buttons';
@import 'header';
// Using _buttons.scss and _header.scss as partials with underscore prefix

Only main Sass files compile to CSS; partials are included but not compiled separately.

📈 Performance GainReduces CSS bundle size by up to 50%, speeds up build and initial page render

Organizing Sass files to optimize CSS build and bundle size

SASS

@import 'buttons.scss';
@import 'header.scss';
// All Sass files compiled directly without partials

Compiling all Sass files directly causes redundant CSS output and larger bundle size.

📉 Performance CostIncreases CSS bundle size by 20-50%, blocks rendering longer during initial load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Compiling all Sass files directly	N/A	N/A	High due to large CSS	[X] Bad
Using underscore-prefixed partials	N/A	N/A	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

Sass partials with underscore prefix prevent direct CSS generation, reducing CSS file size and parsing time in the browser.

→Build Time

→Network Transfer

→Style Calculation

⚠️ BottleneckNetwork Transfer and Style Calculation due to large CSS files

Core Web Vital Affected

LCP

This affects CSS build time and bundle size by controlling which Sass files are compiled directly.

Optimization Tips

1Prefix Sass partial files with an underscore to prevent direct CSS compilation.

2Import partials into main Sass files to keep CSS bundle size small.

3Smaller CSS bundles improve page load speed and LCP.

Performance Quiz - 3 Questions

What is the main benefit of prefixing Sass partial files with an underscore?

A They load faster in the browser

B They are not compiled directly to CSS, reducing bundle size

C They enable CSS animations automatically

D They increase the number of DOM nodes

DevTools: Network

How to check: Open DevTools > Network tab, filter by CSS files, check total CSS size and load time.

What to look for: Look for smaller CSS file sizes and faster load times indicating partial usage.