rules.scsslint.SelectorDepth.html Maven / Gradle / Ivy

Go to download
Details
Don't write selectors with a depth of applicability greater than 3.
Bad: selectors with depths of 4
.one .two .three > .four {
  ...
}

.one .two {
  .three > .four {
    ...
  }
}
Good
.one .two .three {
  ...
}

.one .two {
  .three {
    ...
  }
}
Selectors with a large depth of applicability
lead to CSS tightly-coupled to your HTML structure, making it brittle to change.
Deep selectors also come with a performance penalty, which can affect rendering
times, especially on mobile devices. While the default limit is 3, ideally it
is better to use less than 3 whenever possible.


Configuration Option
Description



max_depth
Maximum depth before reporting errors (default 3)