Style calculation

Style calculation maps CSS rules to elements, resolves cascade and inheritance, computes values, and invalidates affected subtrees after class, attribute, media, or stylesheet changes. Selector performance matters less than invalidation scope in most apps, but broad dynamic selectors can still make changes harder to predict.

					.theme-dark .card .title { color: var(--text); }
/* toggling .theme-dark may restyle many descendants */
				

Scoped ownership — component roots, layers, and local state classes — shrinks invalidation surprises. Profiling beats rewriting every selector micro-optimization.

On interviews: explain why changing a class on a root can affect many descendants and how cascade architecture reduces recalculation surprises.

Common pitfalls: micro-optimizing every selector is rarely the main win. Unbounded global selectors and state classes can expand invalidation.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

• Know cascade resolution order.
• Watch invalidation scope on class toggles.
• Prefer local style ownership.
• Profile before rewriting selectors.