Recently, we had a question on maximum level of specificity in css that is considered good.
Considering the amount of nesting and other functionalities that Less/Sass have to offer, I am sure some of us must have figured out best ways to avoid high specificity in CSS.
How do you make sure Less/Sass don't produce many level of specificity?
BEM
Well I am using a BEM workflow with Sass. And it's working out pretty well. With Sass/Less you can easy make use of the
&operator.This will be generated into
The
&operator is really king. Otherwise you could do something like this:Which however is more restrictive. It would compile into this:
More Complex
This will also work if you have more complex components.
Well you need to be carefull with nesting. At some point it will get messy.
For better readability you can also make some mixins that are helping you.
I think this helps with readability, because you see in words, which components or subcomponents a component has and which variants.
This would compile into
And the HTML could be something like this: