rules.scsslint.NestingDepth.html Maven / Gradle / Ivy
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 {
...
}
}
}
Configuration Option
Description
max_depthMaximum depth before reporting errors (default 3)
ignore_parent_selectorsWhether to report errors for parent selectors (default false)