PROPOSAL: Style all the components using boring old CSS

[caesarsol]

Styling @accurat/react-components, such pixel-precise and interactive components, is not ideal with all the approaches I can think, because our projects cover such a huge amount of use-cases and situations (one-page apps, embedded viz, articles, normal websites), but maybe one of them wins:

Problems:

1. Tachyons
   • PROS: no CSS growth
   • PROS: CSS output is very simple and embeddable in any page
   • CONS: very limited set of variables for such precise components
   • CONS: not overridable to customize from outside the component [DEAL BREAKER]
2. Inline styles
   • PROS: easily overridable, simple
   • CONS: no pseudoclasses (:hover, :active) [DEAL BREAKER]
3. Styled components / Glamour
   • PROS: computed at runtime, great customizability
   • CONS: requires creating too many components
   • CONS: requires a compilation step to extract from a library
4. Emotion
   • PROS: overridable styles
   • PROS: pseudoclasses supported in an inline fashion
   • PROS: computed at runtime, so variables are easy to apply
   • CONS: impossible to create a CSS file out of them [DEAL BREAKER]
5. CSS Modules
   • PROS: class names guaranteed to not clash
   • CONS: non simply overridable from outside [DEAL BREAKER]
6. Boring old CSS!
   • PROS: overridable, pseudoclasses-supported
   • PROS: can use CSS variables we already have in Tachyons
   • can have theming by simply changing name of the wrapper class
   • works together with Tachyons, not forcing out of a particular approach: CSS for UI components, Tachyons for layout
   • we can move the CSS anywhere we want, not attached to any styling system, and minify it
   • documentation is easy: just a list of class names hardcoded inside the JSX
   • making the CSS imported from outside, we can offer different out-of-the-box themes (dark, light, blue wireframe) and enable the use of custom ones
   • can be also themable using a body class, to make the dark/light variations reflecting OS theme
   • styles for all components can be done in one go, without even changing the React code or creating more components
   • supported by everything in the world
   • can be used in ShadowDOM instantly (good approach to create components to be included in client's website/article)
   • applying styles from another project is one cp away

Comments?

/cc @marcofugaro @lucafalasco @ivanross @ilariaventurini @ruggerocastagnola