- Nesting:
.anElement {
&_aBlock {
…
}
&_anotherBlock {
…
}
&_anotherBlockAgain {
&:hover {
…
}
}
}
- Limiting Nesting to Pseudo Elements:
.anElement {
…
}
.anElement_aBlock {
…
}
.anElement_anotherBlock {
…
}
.anElement_anotherBlockAgain {
&:hover {
…
}
}
@thebrainroom
Never thought of this, solves the problem while keeping it DRY. A little susceptible to typos but at least they won't break the output.
Definitely going to try that.
I personally use
Nesting
. I like to think ofanElement
as a Class in the truest sense, and the contents as extensions of it.I can absolutely see why, on a large project, this would be horribly unwieldy though, in which case, nesting pseudo only is the best solution.