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 [email protected] 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](https://github.com/rstacruz/ rscss/issues/49#issuecomment-238287876&r=cmVwbHkrMDAwMTIyOTE2MzZlOTFlY2RiMGQ0M jA0MzYwYzA2MDgzYjcwZWExYjliMGNmOTBhOTJjZjAwMDAwMDAxMTNjMDcxZjQ5MmExNjljZTBhMjE xODM1QHJlcGx5LmdpdGh1Yi5jb20=), or [mute the thread](https://github.com/notifications/unsubscribe-auth/AAEikZ3XSTyVQ0EzEQPI _qEJHqzo_Yr_ks5qd1X0gaJpZM4JfHjq&r=cmVwbHkrMDAwMTIyOTE2MzZlOTFlY2RiMGQ0MjA0MzY wYzA2MDgzYjcwZWExYjliMGNmOTBhOTJjZjAwMDAwMDAxMTNjMDcxZjQ5MmExNjljZTBhMjExODM1Q HJlcGx5LmdpdGh1Yi5jb20=).

[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?