react样式方案 分析

在react中，BEM、ocss、smamacss这些（外置）css不是合适（理由待补充），其后出现的css modules也不是很完美的解决方案

外置css文件来组织样式会有全局污染问题(相同选择器会全局覆盖)，css modules是为了解决样式模块化
inline style没有全局污染问题，但是:hover等伪类选择器无法使用，以及代码没法复用

关键词：模块化，CSS in JS

1. Traditional CSS-file-based styling (including SASS, PostCSS etc)
2. CSS in Js styling

radium, styled-jsx, glamor,style-it, styled-components
tips:这些方案之间有的有inspired by甚至依赖关系

radium支持inline styling，radium支持伪类选择器，radium通过装饰器模式使用

styled-jsx需要配置babel（好像也支持行内使用），

https://byjoeybaker.com/react-inline-styles
https://learnnextjs.com/basics/styling-components
https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04

对比
https://github.com/MicheleBertoli/css-in-js

其实，就用css外部文件来使用媒体查询、伪类选择器等都没有问题，但是css in js会更加方便

有没有完全react化的bootstrap开源项目