Question 1

What is SCSS nesting and what problem does it solve?

Accepted Answer

Nesting mirrors HTML structure in CSS selectors, reducing repetition of parent selectors. Compiled output flattens to descendant/compound selectors. Over-nesting creates overly specific CSS — a classic maintainability issue.

Question 2

What is the parent selector & used for?

Accepted Answer

References the parent selector — for BEM modifiers, pseudo-classes, and state (.btn { &:hover {} }). Also &--modifier or .is-active & patterns. Misplaced & creates surprising selectors.

Question 3

Why is deep nesting considered harmful?

Accepted Answer

High specificity, brittle coupling to DOM depth, larger selectors, and harder overrides. Limit to 2–3 levels. Prefer BEM/flat utility compositions. Nesting is not permission to mirror entire DOM.

Question 4

How does nesting interact with media queries?

Accepted Answer

You can nest @media inside a selector so queries stay co-located with component styles. Compiled CSS repeats the selector inside each media query. Prefer mobile-first breakpoints. Don't scatter conflicting breakpoints.

Question 5

Nesting @media vs separate breakpoint files — trade-offs?

Accepted Answer

Co-located media keeps component cohesion; separate files ease global breakpoint audits. Teams often nest media for components and keep tokenized breakpoints in one module.

Question 6

Output: .nav { li { a { color: red } } } compiles to?

Accepted Answer

.nav li a { color: red; } — descendant selectors, not child combinators unless > is written. Candidates sometimes think nesting implies >. Be explicit with combinators when needed.

Question 7

How do you nest pseudo-elements cleanly?

Accepted Answer

Use &:before / &::before inside the parent rule rather than repeating the parent selector. Prefer :: modern syntax. Keep content property accessible (don't convey critical info only in pseudo-elements).

Question 8

Scenario: nested styles broke after HTML refactor moved a wrapper.

Accepted Answer

Over-coupled nested selectors depended on DOM shape — flatten with BEM classes. Component class hooks survive structure changes better than .a .b .c chains.

Question 9

Native CSS nesting vs SCSS nesting — awareness?

Accepted Answer

Browsers now support CSS nesting; SCSS still helps with mixins/maps and older toolchain needs. Know when you can ship native nesting and when Sass features still justify the preprocessor.

Question 10

How can & create a suffix modifier pattern?

Accepted Answer

.block { &--active { } } → .block--active; useful for BEM. Ensure naming conventions are consistent. Avoid inventing conflicting conventions mid-codebase.

Question 11

Debugging: unexpectedly high specificity from nesting + IDs.

Accepted Answer

Nested #id compounds specificity; prefer classes and reduce depth. Specificity wars lead to !important. Audit with coverage tools.

Question 12

Nesting at-rules like @supports inside selectors — useful?

Accepted Answer

Yes for progressive enhancement co-located with the component rule. Keep fallbacks clear. Don't hide critical layout behind poorly supported features without fallbacks.

Question 13

Architecture: nesting guidelines for a large design system.

Accepted Answer

Max depth rule, BEM-ish selectors, nest only states/elements/media, lint with stylelint. Document examples. Reject PRs that nest for tidiness alone.

Question 14

Lead: migrate deeply nested legacy SCSS to flatter structure.

Accepted Answer

Codemod gradual unwrap, introduce component classes, stylelint specificity budgets, and snapshot visual diffs. Prioritize hot paths/UI breakage risk. Don't rewrite everything at once.

Nesting SCSS Interview Questions

Other SCSS interview topics