Priority of generated styles
Closed this issue · 8 comments
First of all thank you for awesome module!
Steps to reproduce
- Create component with bss
- Wrap component into mixin that override some styles using bss
- Render component and mixed component
- Look into generated classes
Expected behavior
We get output like: .component { ... }
and .component.mixed { ... }
Actual behavior
Output: .component.component { ... }
and .mixed.mixed { ... }
Live example
Thanks a lot 😊
The double classes are there to increase specificity such that common scenarios of overriding styles set using $nest works seamlessly. As far as i can tell your example is working as expected, you're just wondering about the generated css - correct?
Yes, it's correct. In example was not any problems.
I had changed example to show my problem. Last one button should be with green background.
May be this one can be fixed by adding $add, that would be $nest without a space in className definition
I don't think bss
lends itself well to mixins and this type of composition.
Notice how you can achieve the same thing, but in a much more simple way by doing like this
I do have some thoughts on how to improve bss and component composition, but I don't think those solves this kind of issue.
This is a simplified example.
Through this type of composition i trying to apply some additional behavior to components (like ability to select, drag'n'drop, additional onclick handlers). And some kind of mixins required a visual changes.
May be i need to change this approach to changing only attrs
of mixed component. And these components will be care about styling itself.
@LastDreamer ah, I see, and you want to avoid wrapping the component in an extra element to put the behavior there?
You could use .$nest(':nth-child(n)', ...)
to increase specificity.
I'm still curious if there is a better approach to solving your setup using a different kind of composition, but it's beside the issue and bss here, so if you want to explore / discuss that we could probably reach something interesting in the mithril gitter channel ;)
I think i found better solution without any problems.
Thank you for help!
Ah yes, that seems good. I wanted to make composing bss instances easier too, so at some point you could pass them around instead..