porsager/bss

Priority of generated styles

Closed this issue · 8 comments

First of all thank you for awesome module!

Steps to reproduce

  1. Create component with bss
  2. Wrap component into mixin that override some styles using bss
  3. Render component and mixed component
  4. Look into generated classes

Expected behavior

We get output like: .component { ... } and .component.mixed { ... }

Actual behavior

Output: .component.component { ... } and .mixed.mixed { ... }

Live example

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..