Review the helper classes based on BEVM

[rob-bar]

BEVM: Block__element--modifier -variation

The helper styles we now have like bgc-#{color} for example is thus a variation.
They should be prefixed with a - sign so the variation is -bgc-red for example.
It's more clear we are talking about helper/variations with the - sign.

But! We should agree that the -variation applies on everything, so -dib (display: inline-block) can go on every component/tag for example.

A problem I have encountered with this decoupled variation approach is that it needs a important statement to override the component styles. No really big issue, but we should keep that in mind, the component style selector will be stronger then the -variation one.

With tags and base styling this is no problem at all, for example
<h1 class="-c-red">test</h1>

h1 {
  color: grey;
}
.-c-red {
  color: red;
}
/* the h1 will be red without important */

Another problem is that there should still be modifiers attached to the component.
I understand that class="btn btn--green btn--large btn--underlined" is too much btn :)

But there should be a difference between variation and modifier so my suggestion is to still use,
something like this class="btn --green --large --underlined -dib -c-red"

--class applies to this component only
-class applies to all tags

With this approach we get the whole shebang :D
No component name clutter, -variation for all tags, --modifiers for components.
👍

[rob-bar]

@sqndr for problem 1 of this issue we could create variations with ! important in them to make it override the component.

I think we should do this because we will eventually run into these issues were the component is stronger than the variation styling.

So I'm thinking either something like a combo class or a valid sign in the class at the end or begin.

Option 1 with extra important class => imp

<div class="btn btn-red -dn -c-blue -imp">

This class will make all variations important to override the component.

Option 2 sign on every class separate

<div class="btn btn-red -dn-imp -c-blue-imp">

like that you can deside which variation needs the important and which not.

I personally like option 1