SCSS Nesting

Improve this page

Avoid unnecessary nesting. Just because you can nest, doesn’t mean you should. Consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested.

// Bad nesting

.parent {
  h1 { }
  span { }
  a { }
}

// Good nesting (in this case no nesting)

.parent-heading { }
.parent-subheading { }
.parent-permalink { }

// Bad nesting

.parent {
  .parent-child { }
  .parent-child2 { }
  .parent-modifier { }
  .parent-modifier2 { }
}

// Good nesting

.parent-child { }
.parent-child2 { }
.parent-modifier { }
.parent-modifier2 { }

Additional reading: