Question 1

How can SCSS architecture affect CSS performance?

Accepted Answer

Bloated compiled CSS increases download/parse; unused includes and duplicate mixin output add weight. Prefer shared classes, purge unused, and avoid generating exhaustive utility matrices without need.

Question 2

Does nesting depth hurt runtime performance?

Accepted Answer

Selector matching is usually not the bottleneck today; payload size and unused CSS matter more. Still avoid pathological selectors. Measure rather than mythologize selector speed.

Question 3

How do you prevent unused SCSS from shipping?

Accepted Answer

Modular @use (don't load unused components), PurgeCSS/content scans, and route-level CSS splitting. Global main importing everything is a common SPA footgun.

Question 4

Scenario: compiled CSS is 2MB from Sass maps generating every color utility.

Accepted Answer

Generate fewer utilities, use CSS variables + open-ended classes, or on-demand generation. Data-driven generation needs budgets. Not every token needs a class.

Question 5

@extend performance/maintainability concerns?

Accepted Answer

Can merge selectors in ways that create large groups and unexpected coupling across files. Often mixins or real shared classes are clearer. Profile output if using extend heavily.

Question 6

Sass compile time too slow in CI — fixes?

Accepted Answer

Reduce @import duplication (use @use once), simplify giant loops, upgrade Dart Sass, and cache builds. Generation of thousands of classes dominates. Split entrypoints.

Question 7

Critical rendering path: how SCSS delivery strategy helps?

Accepted Answer

Split critical vs deferred CSS, inline critical carefully, and defer non-route styles. Architecture that isolates route CSS enables this. Monolithic CSS blocks rendering.

Question 8

Are complex :nth-child selectors from SCSS loops costly?

Accepted Answer

Can be harder to maintain and occasionally costly in complex DOMs; prefer classes for stateful styling. Generate clear class hooks instead of relying on structural selectors for core UI.

Question 9

CSS containment / content-visibility vs SCSS role?

Accepted Answer

SCSS can't replace modern rendering optimizations — emit rules that enable containment where useful. Understand browser features; preprocessor is orthogonal but should not fight them.

Question 10

Duplicated media queries from nested @media — problem?

Accepted Answer

Slightly larger CSS; gzip mitigates repeated selectors/media text often — still keep breakpoints tidy. PostCSS tools can sort/merge sometimes. Prefer clarity first; optimize with metrics.

Question 11

How do source maps relate to SCSS performance debugging?

Accepted Answer

They map minified CSS back to partials for DevTools — essential for finding bloat sources. Ensure production can disable maps publicly while keeping internal access.

Question 12

Lead: set a CSS performance budget for Sass-heavy apps.

Accepted Answer

Max KB per route, unused CSS %, compile time SLO, and CI fail on regressions. Own budgets with design system team. Pair with LCP/INP monitoring.

Question 13

When do icon fonts in SCSS pipelines hurt performance?

Accepted Answer

Large font payloads, FOIT/FOUT, and extra glyphs; prefer SVG sprites/inline SVGs. Don't @include entire icon font for three icons. Tree-limit glyph sets.

Question 14

Best practice: token CSS variables vs generating many color classes?

Accepted Answer

Variables + a few utilities often smaller and more flexible than combinatorial class explosions. Generate only what product uses. Measure gzipped CSS.

Performance SCSS Interview Questions

Other SCSS interview topics