Pseudo selectors.

[jamen]

Since RSCSS is just a guideline, quite a bit of it is open to interpretation...

Should I delegate pseudo selector events like :hover, :active, and :focus to the elements themselves, or through a variant?

I feel like having them be declared through variants is the better option, but I'm not really a front-end expert.

Perhaps you could touch a little bit on them. I'd like to know a good style to declare them in since pretty much everything else defined in the guide I agree with and like.

[rstacruz]

Variants (.-hover) are interesting, but you probably will need JS to make those work. Pseudo-selectors work just fine.

.user-link:hover { ... }
.user-link > .name:hover { }

Related: #30

[jamen]

Yeah, there is always that route. However what I meant with variants is maybe something like this:

.foo-bar
  > .baz
    background-color:blue;
    width:200px; height:200px;

    &.-hoverable:hover
      background-color:red;

(Stylus)

Then you can structure your HTML like this:

<div class='foo-bar'>
  <div class='baz -hoverable'></div>
  <div class='baz -hoverable'></div>
  <div class='baz'></div>
</div>

Makes it feel more flexible. Like in this scenario you can opt out of the hover styles if you want, rather than having to use a helper to overwrite them.

Maybe you could touch up on that in the guide? Or do you think it's best left open to the developer?

[jamen]

I also think the variants are better JS-wise. Since it's easier to toggle a class than it is multiple styles.

[rstacruz]

Ah, I see what you mean. It certainly makes sense to make the hovering behavior an opt-in variant for some scenarios. However, it seems like a use case that's pretty specific, whereas RSCSS right now only contains general guidelines.

Another way to approach this would perhaps be to only enable hoverability only for elements where they make sense. For instance, in a menu with links (let's call it .menu-item), it's common for the active link to be using a span instead of a, where you might want to disable the hover effect:

.menu-item {
  /* ... */
}

a.menu-item,
button.menu-item {
  &:focus,
  &:hover {
    /* hover styles */
  }
}

But yes, it might be worth writing more material for specific cases such as these in a new chapter.

[albertorestifo]

On that matter, I've recently came across this article from the eBay engineers.

Example ported in RSCSS

Instead of using a -hidden modifier to mark an element as invisible, style the aria-hidden preudo-selector:

.menu-item {
  &[aria-hidden="true"] {
    display: none;
  }
}

[bash]

@albertorestifo Wouldn't the HTML5 "hidden" attribute be easier?
https://davidwalsh.name/html5-hidden

<div hidden></div>

[albertorestifo]

@bash Well, the main issue here is that I was not aware of that attribute 😄