Fix CSS specificity

[mimarz]

As we discovered during fix for #1448 we found out that some of our css has to high specificity due to combination of selectors. We should aim our css to have no higher specificity than 0,1,0 because thats what passed className normally have.

This is due to CSS in the component using double classname selectors such as .primary.first which has a specificity of 0,2,0 . This overrides passed classes on className which have specificity 0,1,0.

[Barsnes]

I found that using @layer in our css might fix all of our problems.
From the MDN docs, it shows us that we can create this style:

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

and the text will be purple, and not green - since layers come first.

Looking at the spec, it also seems like we can fix this with a one-liner, by updating our import statements:
https://drafts.csswg.org/css-cascade-5/#layer-declaration

• using an @import rule with the layer keyword or layer() function, assigning the contents of the imported file into that layer.

We will probably still have to do this for every component, since people can use single files.

This means our index.css will look like this:

@import url('./react-css-modules.css') layer;
@import url('./alert.css') layer;

[Barsnes]

After testing css layers in #1721, we have decided to implement it - but after #1696, to avoid merge conflicts

[Barsnes]

After reading though an article from css tricks, I suggest we use nested layers:

@layer fds.button { ... }

This makes sure everything is under a layer named fds, but still keeps components on separate layers, nested inside of fds.