Psuedo styles override other styles about aphrodite HOT 9 CLOSED

This seems like expected behavior to me, and I'm not really sure what the ask is.

If you want active to override the :hover state, then override the :hover state, as you mentioned.

I'm having a hard time understanding why you'd want blue to prevail as the winner here, but I suspect the answer to that question has to do with the abstractions that you're trying to build. Having a priority mechanism like you describe is a non-starter, IMO, since it complicates the semantics of style precedence, something we specifically want to be simpler in Aphrodite than it is in CSS.

The semantics at the moment act mostly like a reduced subset of CSS.

If you have, in regular CSS + HTML,

.link:hover { color: red; }
.active { color: blue; }

and <div class="link active">, then you will indeed get red when you hover over the div.

from aphrodite.

The ask is pretty simple: to be able to have styles stronger than hover without using another hover.

This is something that's very easy in CSS: just use a stronger selector. Or in other CSS-in-JS libraries like Radium: just use the right order.

But with Aphrodite there's no way to have a stronger style than any pseudo selector, unless you use that specific pseudo selector. So, it's a simple request for that. I'd be willing to code it, just wanted to discuss implementation.

Otherwise there are some really bad patterns that emerge. If I have 4 styles on a hover, and I want to override all 4 on some state (say, selected). I now have to write the same 4 styles twice: once for selected, and another time for selected hover.

from aphrodite.

Sorry, I'm still confused (I'm also unsure if your reply was written before my edit to the post above). I made a jsfiddle to confirm my assumptions about how CSS works: https://jsfiddle.net/9pvLr5hw/

The semantics of Aphrodite, as far as I can tell, match those of CSS. Setting the color of text, and setting the color of text on hover are independent.

As for Radium, Radium's semantics don't map to CSS's because it doesn't use real pseudo selectors -- it implements hover in JavaScript using mouse events.

Consider the converse case: what if i want some label to inherit the hover color but to change the non-hover color?

from aphrodite.

Sure thing, how would you code this in aphrodite:

https://jsfiddle.net/9pvLr5hw/2/

Edit: basically what I'm saying is, I don't want it to be red on hover, if its active. But I can't do that right now with Aphrodite without writing lots of duplicate styles (overriding every one in the :hover attr of active)

from aphrodite.

Ahh, interesting. The result of that case is surprising to me, and it looks like I misunderstood how specificity rules apply when combined with pseudo-selectors. Thanks for the clear example!

There is indeed no way to easily do that in Aphrodite.

I'm still not terribly excited by the prospect of adding a priority scheme with more complex mechanics than the deep-merge we have at the moment. What were the semantics you had in mind for determining when a non-hover style should over-ride a hover style? Same priority means you get both, higher priority non-hover style will over-ride hover style as it appears it does in CSS?

from aphrodite.

No worries, I realized a couple lines of code was better than me going on about it in english!

Also not an exciting feature because it seems to open up a lot of complexity. I think you need some way of prioritizing it though because you need both types of functionality: non-overriding and overriding. And so there has to be some way to indicate it. Perhaps a really simple way would be to not do nesting:

{
  // this will be overriden by other styles applied (perhaps only later in the css merge)
  'link:hover': { color: 'red' }
}

Otherwise priority key, which is the most flexible but hardest to implement probably.

Actually, just did a test. CSS lets you put the same class twice to trigger precedence (https://jsfiddle.net/9pvLr5hw/3/) so this wouldn't be too bad. Priority == multiply classname in selector.

Other options would be some sort of explicit thing (just throwing out bad ideas): { active: { ':hover': false } }

from aphrodite.

@natew @jlfwong is this addressed by the code examples given here? https://github.com/Khan/aphrodite#overriding-styles My team is considering using Aphrodite and we're curious about this.

from aphrodite.

@thisissami it's been a while since I've looked at this, but anecdotally, upgrading to 1.0 seemed to fix a different bug related to this one, so perhaps this is fixed now.

from aphrodite.

I'm closing this issue to clear things out. Please feel free to open it again!

from aphrodite.