Nested components and how to handle interactive states (pseudo class)

[mzdr]

I'm using RSCSS at work and in private for quite a while now and I really love it. Though there is one thing where I would like to receive some feedback from other users or the author.

How do you guys handle interactive states like :hover etc. between multiple components? Let me demonstrate it with a simple example.

.user-profile {}

.user-image {

    // the actual user image
    > .image {}
    > .caption {}

    // etc…
}

.user-details {
    > .name {}
    > .bio {}
}

<div class="user-profile">
    <div class="user-image">
        <img src="" alt="" class="image">
        <span class="caption">Lorem ipsum…</span>
    </div>
    <div class="user-details">
        <span class="name">John Doe</span>
        <span class="bio">What's up?</span>
    </div>
</div>

Now imagine I want to change the appearance of .user-details > .name and .user-image > .image when I hover .user-profile — remember this is quite a simple example. How do you guys do that? Is this the case where you break the rules and do something like this:

// …
.user-details {
    .user-profile:hover & > .name {
        // …
    }
}

Or do you handle it with JS? I know it's quite simple if we just talk about hover states on a single component, but when you need to change multiple nested components when a parent component is interacted with it's quite tricky I think.

So, how do you guys have solved this?

[ghost]

I would do this with CSS:

.user-profile:hover {
    .user-details > .name,
    .user-image > .image {
        // ...
    }
}

Edit: I adjusted the code a little bit, I forgot you mentioned that the styles would be applied to both elements.

[rstacruz]

Unfortunately this is one of the edge cases that RSCSS falls short of. .user- details { .user-profile:hover & { .. } } (or the variant James mentioned) seems like a pretty good workaround.

On Aug 9 2016, at 12:14 am, James Kolce notifications@github.com wrote:

I would do this with CSS:

.user-profile:hover {
.user-details > .name {
// ...
}

.user-image > .image {

    // ...

}

}

I think that's the minimum amount of code you can use without falling into ambiguities.

You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[mzdr]

Thanks for your replies!

Rico, I think you're right. It actually is rather an edge case but it's quite an interesting though. I spent some time thinking about it and what do you guys think about that:

Maybe you could see it as something like a variant – strictly seen it actually is – but only for interactive states or as a kind of glue. Right now I'm abusing the component pattern just for having a class/identifier to style other nested components. Maybe this could also be something that could reside in the helpers section?

Something like ._hover & > .name { } ? Since I don't actually care what's the name of the glue that is connecting the nested components it could be just another helper class. But there might be another edge case where this could cause conflicts if you are in a nesting hell.

Nevertheless this is something that shouldn't occur on purpose and should actually be avoided if you stick to RCSS and think twice about your components!

Doesn't it?