Details

Avoid nesting selectors too deeply.

Bad: deeply nested

.one {
  .two {
    .three {
      .four {
        ...
      }
    }
  }
}

Good

.three:hover {
}

.three {
  &:hover {
    ...
  }
}

Overly nested rules will result in over-qualified CSS that could prove hard to maintain, output unnecessary selectors and is generally considered bad practice.

This linter will not report an error if you have selectors with a large depth of applicability. Use SelectorDepth for this purpose.

No error

.one .two .three {
  ...
}

Error

.one {
  .two {
    .three {
      ...
    }
  }
}