Suggestion: Add guides for component css styling to the styleguide

[the-ult]

Was just thinking. In our project at work, we are playing with how to name components and how to use/name the css classes.

We were using ITCSS as a base for our css structure Kinda like BEM, SMACSS combined with some extra goodies. It helps a lot with the lexical scope and stuff. But when you're building components, your lexical scope is mostly gone and instead of using BEM classes to define your HTML structure you can use your component names (HTML elements) to define structure/make the HTML more readable.

But you're probably still gonna use global styles combined with component styles on your component, therefore it would be nice to see the difference between the two at once.

We thought this could be a nice solution:

Old bem style:

<div class="sd-card">
  // .blue is a global class
  <div class="sd-card__header sd-card__header--big  blue">
         header text
  </div>
  <div class="sd-card__content sd-card__content--wide>
     lorem ipsum
  </div>
</div>

Component style

<sd-card>
  <sd-card-header class="--big blue">
      header text
  </sd-card-header>
  <sd-card-content class="--wide">
    lorem ipsum
  </sd-card-content>
</sd-card>

So defining component style classes with a double dash prefix like: --wide. Since they are usually modifiers of the style of the component