Namespace control with @use as in SASS - Performance & Optimization

Performance: Namespace control with @use as

MEDIUM IMPACT

This affects CSS bundle size and style calculation by controlling how styles and variables are imported and referenced.

Importing Sass modules with controlled namespaces to avoid style duplication

SASS

@use 'colors' as c;
.button {
  color: c.$primary-color;
}

Using @use with a namespace imports styles once and references variables explicitly, preventing duplication.

📈 Performance Gainreduces CSS bundle size by up to 20%, single style calculation

Importing Sass modules with controlled namespaces to avoid style duplication

SASS

@import 'colors';
@import 'colors';
.button {
  color: $primary-color;
}

Using @import multiple times duplicates styles and variables, increasing CSS size and causing redundant style recalculations.

📉 Performance Costadds extra CSS rules increasing bundle size by 10-20%, triggers multiple style recalculations

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@import multiple times	N/A	N/A	Higher paint cost due to larger CSS	[X] Bad
@use with namespace alias	N/A	N/A	Lower paint cost due to smaller CSS	[OK] Good

Rendering Pipeline

The Sass compiler processes @use with namespaces once, generating a single CSS output. This reduces redundant CSS rules, lowering style calculation and layout costs in the browser.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to duplicated CSS rules

Core Web Vital Affected

LCP

This affects CSS bundle size and style calculation by controlling how styles and variables are imported and referenced.

Optimization Tips

1Use @use with namespaces to import Sass modules once and avoid CSS duplication.

2Avoid multiple @import statements for the same module to reduce CSS bundle size.

3Smaller CSS bundles improve Largest Contentful Paint (LCP) by speeding up style calculation.

Performance Quiz - 3 Questions

What is a main performance benefit of using @use with a namespace alias in Sass?

A It reduces the number of DOM nodes created.

B It automatically minifies the CSS output.

C It prevents duplication of CSS rules in the final bundle.

D It speeds up JavaScript execution.

DevTools: Network

How to check: Open DevTools, go to Network panel, reload page, filter by CSS files, and compare file sizes of CSS bundles.

What to look for: Smaller CSS file size indicates better use of @use with namespaces; larger files suggest duplicated styles from @import.