在react中乘凸,BEM他宛、ocss蝗锥、smamacss這些(外置)css不是合適(理由待補充)蚁堤,其后出現(xiàn)的css modules也不是很完美的解決方案
外置css文件來組織樣式會有全局污染問題(相同選擇器會全局覆蓋)嫩实,css modules是為了解決樣式模塊化
inline style沒有全局污染問題刽辙,但是:hover等偽類選擇器無法使用,以及代碼沒法復(fù)用
關(guān)鍵詞:模塊化甲献,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甚至依賴關(guān)系
radium支持inline styling宰缤,radium支持偽類選擇器,radium通過裝飾器模式使用
styled-jsx需要配置babel(好像也支持行內(nèi)使用)晃洒,
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開源項目