-
-
Save sturobson/7450697 to your computer and use it in GitHub Desktop.
I'm front-end'ing a site for a client that has a 'favourite' or 'star-ing' functionality. | |
My question is, how to name whether the item has been starred or not. | |
Current logic in my CSS has things that are already .is-open, .is-closed, .is-active, .is-inactive, .is-visible and .is-hidden | |
I'm currently toying with | |
.is-favourited and .is-Notfavourited but that's pretty crap | |
Maybe .is-listed, .is-unlisted ? | |
Thoughts? |
Why do you bother with the negative state at all? I would set the thing as closed / inactive / not favourited by default and make your css changes to show it as is-open / is-active / is-favourtied when those classes are added. Makes the js much easier as you are just toggling the one class (ex. is-active) instead of having to add one class and remove the other.
I'd try to reuse if I could.
<span class="star is-active"></span>
How will the un-starred and un-favourited items differ from being the standard presentation you would see for the item initially? Based on this answer, I would say gives you a reason for the negative classes.
I can see a need for is-closed/is-open as you might re present this give the current state is-open, is-closed (in an expanded navigation as an example).
So with that in mind I would go for the positive classes for these being;
.is-starred
.is-favourite or .is-fav
I would avoid using favourite in the class title just because the word has spelling variations.
I've never used this kind of convention but if it is what you are after why not:
.is-liked--true, .is-liked--false
EDIT: Although I would tend to just have defaults and then override them when it is true.