- Nesting:
.anElement {
&_aBlock {
…
}
&_anotherBlock {
…
}
&_anotherBlockAgain {
&:hover {
…
}
}
}
- Limiting Nesting to Pseudo Elements:
.anElement {
…
}
.anElement_aBlock {
…
}
.anElement_anotherBlock {
…
}
.anElement_anotherBlockAgain {
&:hover {
…
}
}
I'm pretty strict on DRY, personally I'd avoid repeating
anElement
over and over for all the classes because of points @jaikdean mentioned.It does trade off readability and doesn't make your code base searchable for the whole class name which can make it unwieldily for large scale projects.
Source maps usually resolve the search issue though and I'd use stylelint's
max-nesting-depth
rule to avoid over use.