Common-voice: Split stylesheet into multiple files

[nevik]

The CV web frontend's stylesheet, web/css/index.css, has grown rather large and unwieldy.

We should break it down into smaller files (e.g. component-related styles should go in files next to component TSX files), which are then joined during compilation.

This ticket is a discussion result from #470.

Edit: @mikehenrty, you can label this help-wanted, if you want ;)

[mikehenrty]

One idea here would be to move the page component css into separate files.
https://github.com/mozilla/voice-web/tree/master/web/src/lib/components/pages

[echonox]

Wouldn't be also nice if we used pre-processor like LESS?

[nevik]

@echonox, the matter of preprocessors is discussed in the linked issue #470.
To summarize: for this project, we prefer to use modern (plain) CSS to promote adoption of open standards

[Gregoor]

Created a PR for it. While splitting up the CSS I discovered a couple of unused selectors. Haven't yet found a good CSS methodology that prevents that kind of problem (which'll turn into bloat and unmaintainable CSS when the project gets large). The best solution I know is Styled Component, though that is radically different and not quite standard CSS (but standard JS) and would require a switch to Webpack.
Though I'd note that the switch to Styled Component can also be done gradually (did it like that for 2 rather large projects)

[nevik]

@mikehenrty i guess this is done with #542? ;)

[mxstbr]

Just to note this here (styled-components co-creator), this isn't correct:

Styled Components [...] would require a switch to Webpack.

We specifically built styled-components to work without any specific build tool out of the box, so it would not require a switch to webpack. (there is a Babel plugin which improves the debugging experience, but even that is mostly optional)

If y'all got any questions about styled-components just ping me! :blush: Would be happy to see Mozilla adopt it.

[Gregoor]

Heya @mxstbr, nice to hear from you! I'm still interested in adopting it (ty for creating this great lib btw :) ), but atm there are enough other things on my plate that I don't think it would happen any time soon.

RE Styled Components & Webpack: My language was misleading there, sorry. What I meant to say was that it would require this project to switch to webpack. At this point in time we used Gulp only had little enough dependencies that having them in the repo wasn't too much of a big deal. But it also meant that there was no straightforward way of adding dependencies. As we've made the transition to Webpack, that blocker is gone now.