Question 1

What is ITCSS and how does it apply to SCSS?

Accepted Answer

Inverted Triangle CSS layers: settings → tools → generic → elements → objects → components → utilities. Controls specificity growth and cascade. Map layers to partial folders. Utilities win when needed.

Question 2

BEM with SCSS — recommended nesting style?

Accepted Answer

Nest only &__element and &--modifier under the block; avoid tagging elements by tag name. Keeps specificity low and intent clear. Don't nest .block .other-block deeply.

Question 3

How do you structure theming for white-label products?

Accepted Answer

Primitive tokens + semantic aliases per brand; swap brand maps or CSS variable layers at runtime/build. Avoid forking component SCSS per brand. Override tokens, not components.

Question 4

Utility-first vs component SCSS — coexistence rules?

Accepted Answer

Utilities for layout spacing; components for recurring UI; forbid one-off utilities that duplicate components. Document decision tree. Lint for banned patterns if needed.

Question 5

Where should global resets live?

Accepted Answer

Once in base/generic layer of the entrypoint — never re-included by components. Normalize/reset conflicts are painful. Own a single reset strategy.

Question 6

Scenario: marketing site and app shell share SCSS kit but diverge visually.

Accepted Answer

Shared primitives; separate semantic themes; optional component subsets per surface. Don't force identical components if UX differs — share tokens/tools first.

Question 7

How does specificity budgeting work in SCSS architecture?

Accepted Answer

Prefer single-class components, limit nesting, ban IDs in styles, and review !important usage. Stylelint plugins help. High specificity is a leading indicator of architecture debt.

Question 8

Design system package versioning for SCSS?

Accepted Answer

Semver on token/mixin public API; changelogs; codemods for renames; peer dependency on Sass. Breaking token renames break apps — treat seriously. Provide migration guides.

Question 9

CSS Modules + SCSS architecture pitfalls?

Accepted Answer

Composing globals accidentally, duplicating tokens, and unclear ownership of shared partials. Central tokens module; local styles for structure. Agree on :global usage policy.

Question 10

When to prefer plain CSS over SCSS in modern apps?

Accepted Answer

If you only need variables/nesting now native, and toolchain cost exceeds benefits. SCSS still wins for maps/mixins/design-system packages. Choose deliberately.

Question 11

Documentation standards for SCSS architecture?

Accepted Answer

Architecture decision records, folder README, public API of mixins/tokens, and examples in Storybook. Undocumented partials become landfill. Link visual examples.

Question 12

Lead: consolidate three divergent SCSS stacks post-merger.

Accepted Answer

Inventory tokens/components, pick target architecture, bridge themes, migrate high-traffic UI first. Freeze new divergence. Measure CSS weight and visual regressions.

Question 13

How do critical CSS and SCSS architecture interact?

Accepted Answer

Componentize so critical path CSS can be extracted; avoid huge shared bundles of unused components. Purge/content detection and modular imports matter. Architecture enables performance.

Question 14

Ownership model: who approves new global tokens?

Accepted Answer

Design + eng guild; RFC for semantic tokens; automated publish; no ad-hoc hex in apps. Prevents token sprawl. Apps consume, don't invent primitives.

Architecture SCSS Interview Questions

Other SCSS interview topics