react樣式方案 分析

在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開源項目

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末氧骤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子吃引,更是在濱河造成了極大的恐慌筹陵,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件镊尺,死亡現(xiàn)場離奇詭異朦佩,居然都是意外死亡,警方通過查閱死者的電腦和手機庐氮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門语稠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人弄砍,你說我怎么就攤上這事仙畦。” “怎么了音婶?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵慨畸,是天一觀的道長。 經(jīng)常有香客問我衣式,道長先口,這世上最難降的妖魔是什么型奥? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮碉京,結(jié)果婚禮上厢汹,老公的妹妹穿的比我還像新娘。我一直安慰自己谐宙,他們只是感情好烫葬,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著凡蜻,像睡著了一般搭综。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上划栓,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天兑巾,我揣著相機與錄音,去河邊找鬼忠荞。 笑死蒋歌,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的委煤。 我是一名探鬼主播堂油,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼碧绞!你這毒婦竟也來了府框?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤讥邻,失蹤者是張志新(化名)和其女友劉穎迫靖,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體兴使,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡袜香,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鲫惶。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡实抡,死狀恐怖欠母,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吆寨,我是刑警寧澤赏淌,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站啄清,受9級特大地震影響六水,放射性物質(zhì)發(fā)生泄漏俺孙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一掷贾、第九天 我趴在偏房一處隱蔽的房頂上張望睛榄。 院中可真熱鬧,春花似錦想帅、人聲如沸场靴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽旨剥。三九已至,卻和暖如春浅缸,著一層夾襖步出監(jiān)牢的瞬間轨帜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工衩椒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蚌父,地道東北人。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓烟具,卻偏偏與公主長得像梢什,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子朝聋,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案嗡午? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,751評論 1 92
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看冀痕,也希望更多的人看到...
    小小字符閱讀 8,164評論 7 35
  • 印象筆記這個app前前后后言蛇,我裝了幾次卸載了幾次僻他,之前體驗的感覺是有點復(fù)雜,用著不順手腊尚。但是每次要記錄點啥吨拗,去華為...
    Tinsi閱讀 253評論 0 0
  • 回家作業(yè): 1.workbook:Homework1 2.Tutorial book:Homework1 在線練習(xí)...
    EmilyJia閱讀 325評論 0 0
  • 2008年民宿,學(xué)駕照時遇到一個男孩娇妓,小師弟!陽春三月活鹰,桃李芬芳哈恰,草長鶯飛只估! 那年,仍是帶我裝逼帶我飛的年...
    宜溪竹君閱讀 177評論 0 0