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

Go to download

Show more of this group Show more artifacts with this name
Show all versions of sonar-web-frontend-scss Show documentation

Consume reports generated by scsslint for code quality. Also consume reports for code duplication (either simian or cpd). The information generated by reports are added in Sonar

There is a newer version: 2.1.0

Show newest version

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)