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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,227评论 7 35
  • 印象笔记这个app前前后后,我装了几次卸载了几次,之前体验的感觉是有点复杂,用着不顺手。但是每次要记录点啥,去华为...
    Tinsi阅读 272评论 0 0
  • 回家作业: 1.workbook:Homework1 2.Tutorial book:Homework1 在线练习...
    EmilyJia阅读 330评论 0 0
  • 2008年,学驾照时遇到一个男孩,小师弟!阳春三月,桃李芬芳,草长莺飞! 那年,仍是带我装逼带我飞的年...
    宜溪竹君阅读 180评论 0 0