Placeholder selectors with % in SASS - Performance & Optimization

Performance: Placeholder selectors with %

MEDIUM IMPACT

This affects CSS bundle size and rendering speed by reducing duplicated styles and minimizing CSS rules sent to the browser.

Reusing common styles across multiple selectors

SASS

%common-style { color: red; font-weight: bold; }
.button { @extend %common-style; }
.alert { @extend %common-style; }

Reuses styles via placeholder selectors, generating only one set of CSS rules.

📈 Performance GainReduces CSS file size, improving load speed and parsing efficiency.

Reusing common styles across multiple selectors

SASS

.button { color: red; font-weight: bold; }
.alert { color: red; font-weight: bold; }

Repeating the same styles in multiple selectors increases CSS file size and parsing time.

📉 Performance CostAdds unnecessary CSS bytes, increasing download and parse time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeating styles in multiple selectors	N/A	0	Low	[X] Bad
Using % placeholder selectors with @extend	N/A	0	Low	[OK] Good

Rendering Pipeline

Placeholder selectors are processed at build time by Sass, producing optimized CSS with fewer duplicated rules. This reduces CSS file size and parsing work in the browser.

→CSS Parsing

→Style Calculation

⚠️ BottleneckCSS Parsing due to large file size

Core Web Vital Affected

LCP

This affects CSS bundle size and rendering speed by reducing duplicated styles and minimizing CSS rules sent to the browser.

Optimization Tips

1Use % placeholders to share common styles and avoid duplication.

2Avoid repeating identical CSS rules across selectors to keep CSS small.

3Smaller CSS files load and parse faster, improving page load speed.

Performance Quiz - 3 Questions

What is the main performance benefit of using Sass placeholder selectors (%)?

A They speed up JavaScript execution.

B They reduce CSS file size by avoiding duplicated styles.

C They improve image loading times.

D They reduce HTML file size.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect CSS file size and load time.

What to look for: Smaller CSS file size and faster CSS load time indicate good use of placeholder selectors.