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.

1) 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 */

2) 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. :+1:

[sqndr]

:+1: For this.

[rob-bar]

I'm closing this one... Further follow up here https://github.com/Crosscheck/Jacket/issues/7