PR for clarify variant naming

[aaronamm]

Dear @rstacruz

Thank you so much for making RSCSS. It is such a good naming/guideline for CSS. I like it a lot.
However, I would like to make a PR to clarify variant naming. This is because:

Given:

• A variant class name can only start with a letter _ or - but dash are is easier to type than underscores so dash is preferred.

Therefore:

• These are valid variant names: -big, -disable, _wide, _active.

However, it is not clear to me how we name it if its name is longer than one word.
I have noticed that we use an underscore prefix for a helper and it can have dash in a middle name e.g. _pull-right

With this fact, we can distinguish variant naming by merging multiple word to one word and not use dash in a middle.
Do it like what we do for element naming.

FYI, the current document of variant can lead to misnaming convention if someone see the last example word -emit-last in this sentence.

It kind of resembles switches in UNIX commands (gcc -O2 -Wall -emit-last).

For your consideration, if I understand it correctly, please confirm it to me.
I am happy to create a PR to add a multiple words section in variant like what we have done in Elements section.

On multiple words
For a variant that need two or more words, concatenate them without dashes or underscores.

.shopping-card {
  > .title { /* ... */ }
  > .title.-small { /* ... */ } 
  > .title.-largeunderline { /* ... */ }
}

Thank you.

[rstacruz]

Hey there!

Variants start with dashes (-), while helpers start with underscores (_). I don't think there was any restrictions to concatenate multiple words in a variant in RSCSS, and in fact is probably best that it doesn't. I've seen this pattern pretty regularly like this:

.button.-icon-stop
.button.-icon-refresh
.flag.-country-us
.flag.-country-uk

[aaronamm]

Thank you so much, I will make a PR to clarify variants naming.