在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开源项目