Consider improving CSS segregation

CSS is hard to maintain. There might plenty of dead rules, and the only way to detect those is to use a recording tool (provided in Chrome's devtools) and use every single feature in Kresus. Then we get a list of all the unused CSS rules. I've done it in the past, and it was painful, and we didn't even have many features we do now have :p.

So one way to split this up better would be to segregate CSS better. We have plenty of options there:

• one CSS file per react component. This would probably imply too many files.
• a midway solution: one CSS file per top component directory (one for operations, one for settings, etc), or one CSS file per subdirectory, etc.
• embed CSS rules directly in JS. I am pretty sure this is less efficient than using plain CSS files, because then the styles are applied in JS and then the CSS engine cannot do smart things (caching etc). Also, it mixes concerns a lot, and we already have HTML in JS with JSX, so I'd rather not go this direction.
• keep using a single CSS file for the whole site, but use a better rule naming scheme. I know there's at least one, I personally think it's ugly because it's rather prolix, but I'd eat a frog and use it if people liked this.

I'm kind of tempted with the midway solution. With webpack, it's trivial to concatenate CSS files into a single CSS module. We could even use other languages that compile to CSS, if we wanted to. I don't have a strong opinion here.

@all, any thoughts about this?