No Deep Nesting in SASS

Name: sass-no-deep-nesting
Rating: 78
Author: LePhenix47

Rule

Maximum 3 levels of nesting.

✅ Good (Shallow)

scss

.card {
  padding: 20px;

  &__header {
    font-size: 1.5rem;
  }

  &__body {
    margin-top: 10px;

    &--expanded {
      height: auto;
    }
  }
}

❌ Bad (Deep Nesting)

scss

.card {
  .header {
    .title {
      .icon {
        .svg {
          // 5 levels deep!
        }
      }
    }
  }
}

Why?

•High specificity is hard to override
•Slower CSS performance
•Harder to maintain
•Creates tight coupling

Refactoring Tip

Use BEM instead of nesting:

scss

// Instead of deep nesting
.modal {
  .content {
    .body {
      .text { }
    }
  }
}

// Use BEM
.modal__content { }
.modal__body { }
.modal__text { }