Avoiding over-nesting in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What is the output CSS selector?

Given this Sass code, what is the compiled CSS selector for the .button hover state?

SASS

$color: blue;
.button {
  color: $color;
  &:hover {
    color: darken($color, 10%);
  }
}

A .button:hover { color: #00008b; }

B .button .hover { color: #00008b; }

C .button:hover { color: darken(blue, 10%); }

D .button:hover { color: blue; }

💡 Hint

Remember that &:hover appends :hover to the parent selector.

The & symbol in Sass refers to the parent selector. So &:hover becomes .button:hover. The darken function darkens the color blue by 10%, resulting in #00008b.

❓ layout

intermediate

How many CSS rules are generated?

Consider this Sass code avoiding over-nesting. How many CSS rules will be generated?

SASS

.nav {
  display: flex;
  .item {
    padding: 1rem;
  }
  &.active {
    background: green;
  }
}

A 2

B 4

C 3

D 1

💡 Hint

Count each unique selector generated after nesting.

The Sass code generates three CSS rules: .nav { display: flex; }, .nav .item { padding: 1rem; }, and .nav.active { background: green; }.

🧠 Conceptual

advanced

Why avoid deep nesting in Sass?

What is the main reason to avoid deep nesting in Sass stylesheets?

A Deep nesting improves browser rendering speed.

B Deep nesting reduces the file size of the compiled CSS.

C Deep nesting automatically fixes accessibility issues.

D Deep nesting makes CSS selectors too specific and hard to override.

💡 Hint

Think about how CSS specificity affects styling and maintenance.

Deep nesting creates very specific selectors that are hard to override later. This makes the CSS harder to maintain and can cause unexpected styling issues.

📝 Syntax

advanced

Which Sass code avoids over-nesting?

Choose the Sass code snippet that avoids over-nesting while styling a card component with a title and description.

A

.card {
  .title {
    font-weight: bold;
    .description {
      color: gray;
    }
  }
}

B

.card {
  .title {
    font-weight: bold;
  }
  .description {
    color: gray;
  }
}

C

.card {
  & .title {
    font-weight: bold;
    & .description {
      color: gray;
    }
  }
}

D

.card {
  .title {
    font-weight: bold;
  }
}
.card .description {
  color: gray;
}

💡 Hint

Avoid nesting selectors inside each other more than one level deep.

Option B nests only one level deep inside .card. Both .title and .description are siblings, which avoids over-nesting and keeps CSS simpler.

❓ accessibility

expert

How does over-nesting affect accessibility?

Which statement best explains how over-nesting in Sass can indirectly impact web accessibility?

A Over-nesting can cause overly specific selectors that make it hard to update focus styles, reducing keyboard navigation clarity.

B Over-nesting automatically disables screen readers on nested elements.

C Over-nesting improves color contrast by grouping styles tightly.

D Over-nesting adds ARIA labels to nested elements by default.

💡 Hint

Think about how CSS specificity affects style overrides for accessibility features.

When selectors are too specific due to over-nesting, it becomes difficult to override styles like focus outlines. This can reduce keyboard navigation clarity, which is important for accessibility.