Universal selector in CSS - Performance & Optimization

Performance: Universal selector

MEDIUM IMPACT

The universal selector affects the style calculation and layout phases by applying styles to all elements, which can slow down rendering.

Applying a style to many elements on the page

CSS

body, h1, p, ul, li { margin: 0; padding: 0; }

Targets only necessary elements, reducing the number of nodes affected and minimizing style recalculation and layout work.

📈 Performance Gainreduces style recalculation and layout to only targeted elements, improving rendering speed

Applying a style to many elements on the page

CSS

* { margin: 0; padding: 0; }

The universal selector applies styles to every element, triggering style recalculations and layout for all nodes, even those that don't need it.

📉 Performance Costtriggers style recalculation and layout for all DOM nodes, increasing rendering time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Universal selector (*)	All elements matched	Triggers reflow for all elements	High paint cost due to many styled nodes	[X] Bad
Specific element selectors	Only targeted elements matched	Reflow limited to fewer elements	Lower paint cost	[OK] Good

Rendering Pipeline

The universal selector causes the browser to apply styles to every element, increasing the work during style calculation and layout stages.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation and Layout due to broad element matching

Core Web Vital Affected

LCP

The universal selector affects the style calculation and layout phases by applying styles to all elements, which can slow down rendering.

Optimization Tips

1Avoid using the universal selector for broad styling to reduce style recalculation cost.

2Target only necessary elements with specific selectors to improve rendering speed.

3Monitor style recalculation and layout times in DevTools to catch performance issues.

Performance Quiz - 3 Questions

Why can using the universal selector (*) slow down page rendering?

A Because it reduces the number of CSS rules

B Because it only styles one element at a time

C Because it applies styles to every element, increasing style calculation and layout work

D Because it caches styles for faster rendering

DevTools: Performance

How to check: Record a performance profile while loading the page, then look at the 'Style Recalculation' and 'Layout' events to see if many nodes are affected.

What to look for: Long style recalculation or layout times indicate broad selectors like the universal selector impacting performance.