簡(jiǎn)介
CSS-in-JS是什么老翘，看到這個(gè)詞就能大概猜到是在JavaScript里寫CSS，那為什么要在JavaScript里寫CSS呢屑宠，像之前一樣寫在css文件里哪里不好么困檩？
在介紹這個(gè)概念之前，先來回顧一下在日常編寫CSS代碼時(shí)都有哪些痛點(diǎn)：
- 全局污染 - CSS的選擇器是全局生效的飒焦，所以在class名稱比較簡(jiǎn)單時(shí)蜈膨，容易引起全局選擇器沖突，導(dǎo)致樣式互相影響牺荠。
- 命名混亂 - 因?yàn)榕氯治廴疚涛。匀粘Ｆ餭lass名稱時(shí)會(huì)盡量加長(zhǎng)，這樣不容易重復(fù)休雌，但當(dāng)項(xiàng)目由多人維護(hù)時(shí)灶壶，很容易導(dǎo)致命名風(fēng)格不統(tǒng)一。
- 樣式重用困難 - 有時(shí)雖然知道項(xiàng)目上已有一些相似的樣式杈曲，但因?yàn)榕禄ハ嘤绊懗哿荩桓抑赜谩?/li>
- 代碼冗余 - 由于樣式重用的困難性等問題，導(dǎo)致代碼冗余担扑。
進(jìn)化史介紹
在CSS的進(jìn)化歷史上恰响，出現(xiàn)過各種各樣的框架致力于解決以上的問題：
- SASS, LESS - 提供了變量、簡(jiǎn)單函數(shù)涌献、運(yùn)算胚宦、繼承等，擴(kuò)展性洁奈、重用性都有了很大的提升间唉，解決了一些樣式重用冗余的問題，但是對(duì)于命名混亂問題的效果不大利术。
- BEM (.block__element--modifier) - 比較流行的class命名規(guī)則呈野，部分解決了命名混亂和全局污染的問題，但class定義起來還是不太方便印叁，比較冗長(zhǎng)被冒，而且和第三方庫的命名還是有可能沖突。
- CSS Modules - 模塊化CSS轮蜕，將CSS文件以模塊的形式引入到JavaScript里昨悼，基本上解決了全局污染、命名混亂跃洛、樣式重用和冗余的問題率触，但CSS有嵌套結(jié)構(gòu)的限制（只能一層），也無法方便的在CSS和JavaScript之間共享變量汇竭。
可以看一個(gè)簡(jiǎn)單的CSS Modules例子了解一下：
生成的dom結(jié)構(gòu)如下圖葱蝗，基于css文件中的class名稱生成了唯一的class名稱穴张，樣式會(huì)定義到生成的class上。
styles打印出來如下圖两曼，定義了css中的class名字和生成的唯一class名字的對(duì)應(yīng)關(guān)系皂甘。
可以看出，以上框架都解決了不少痛點(diǎn)悼凑，但也還是各有一些不足偿枕，當(dāng)然CSS-in-JS也并不是完美的解決了所有問題，我們先來詳細(xì)介紹一下户辫。
流行框架介紹
現(xiàn)在隨著組件化概念的流行渐夸，對(duì)從組件層面維護(hù)CSS樣式的需求日益增大，CSS-in-JS就是在組件內(nèi)部使用JavaScript對(duì)CSS進(jìn)行了抽象寸莫，可以對(duì)其聲明和加以維護(hù)捺萌。這樣不僅降低了編寫CSS樣式帶來的風(fēng)險(xiǎn)，也讓開發(fā)變得更加輕松膘茎。它和CSS Modules的區(qū)別是不再需要CSS樣式文件桃纯。
來看一下幾個(gè)流行的CSS-in-JS框架六個(gè)月內(nèi)的下載趨勢(shì)：
我們來看看幾個(gè)下載量靠前的框架的風(fēng)格是什么樣的：
styled-components
先來看看下載量最高的styled-component的代碼風(fēng)格：
從上圖可以看出，Title和Wrapper都是框架包裝好的component披坏，可以直接在react的jsx語法中使用态坦，在包裝component的時(shí)候還定義了標(biāo)簽分別是h1和section。此段代碼產(chǎn)生的html dom如下圖所示：
可以看到section和h1上分別生成了唯一的class名稱棒拂，樣式也對(duì)應(yīng)的定義在生成的class上了伞梯。
這樣就可以解決命名混亂和全局污染的問題。組件相關(guān)的代碼都在一起帚屉，可以統(tǒng)一查看谜诫，也可以方便的重用樣式。
glamorous
再來看看glamorous攻旦，這個(gè)框架是PayPal開發(fā)的喻旷。（前兩個(gè)logo看下來，恍惚間感覺進(jìn)了化妝品專柜）牢屋。
和styled-component不同的是且预，glamorous的樣式直接以attribute的形式定義在了dom上，之后雖然也為其生成了class名稱及樣式烙无，但這種以attribute定義的方式對(duì)偽類選擇符（如 :hover）支持的不好锋谐，會(huì)帶來一些不方便，而且需要再記住一套attributes名稱和值與真正的css樣式代碼的對(duì)應(yīng)關(guān)系截酷。
JSS
和上面兩個(gè)框架類似涮拗，jss也是會(huì)定義styles對(duì)象，并附到component上，最后生成的dom也是會(huì)有生成的唯一class名稱多搀，并有對(duì)應(yīng)的樣式歧蕉，但樣式并不是真正的css語法，而是對(duì)象的屬性和值康铭，這樣也是對(duì)偽類選擇符支持的不好，而且也需要記住屬性和css樣式代碼之間的對(duì)應(yīng)關(guān)系赌髓。
Radium
Radium在定義樣式對(duì)象上看似和其他相似从藤，但在生成dom結(jié)構(gòu)的時(shí)候并沒有生成唯一的class名稱，而是直接把樣式放到了style屬性上锁蠕，這樣會(huì)帶來諸如可讀性差夷野、CSS權(quán)重過大、不支持偽類選擇符等問題荣倾。
測(cè)試
下面再來看一個(gè)styled-component提供的基于jest的測(cè)試框架：
這個(gè)框架主要是通過生成Snapshot并比較的方式來保證component樣式的每次更改都會(huì)被檢測(cè)到悯搔，并且樣式是期望的樣式。這樣就又降低了重構(gòu)CSS樣式帶來的風(fēng)險(xiǎn)舌仍。
優(yōu)劣勢(shì)總結(jié)
看了這些框架后妒貌，可以發(fā)現(xiàn)CSS-in-JS的優(yōu)勢(shì)還是挺多的：
- 因?yàn)橛辛松傻奈ㄒ籧lass名稱，避免了全局污染的問題
- 唯一的class名稱也解決了命名規(guī)則混亂的問題
- JavaScript和CSS之間可以變量共享铸豁，比如一些基礎(chǔ)的顏色和尺寸灌曙，這樣再當(dāng)需要在JavaScript里計(jì)算一些高度的時(shí)候，可以取到和dom相關(guān)的一些padding节芥，margin數(shù)值在刺，統(tǒng)一管理
- 只生成頁面需要用到的代碼，縮減了最終包的大小头镊，提升了性能
- CSS的單元測(cè)試增加了樣式重構(gòu)的安全性
但是CSS-in-JS也存在著一些不足和爭(zhēng)議：
- 有些觀點(diǎn)覺得JS和CSS的關(guān)系沒這么近蚣驼，把CSS寫進(jìn)JS里引入了新的一套依賴，增加了復(fù)雜度相艇，新人加入項(xiàng)目后需要學(xué)習(xí)的東西就更多了颖杏，也讓學(xué)習(xí)曲線更加陡了
- 對(duì)前端框架確實(shí)有些依賴性，更適合于組件化的框架厂捞，如React等
- Debug的時(shí)候需要花更多的功夫才能找到對(duì)應(yīng)的樣式代碼
- 覆蓋第三方插件樣式時(shí)會(huì)有權(quán)重不夠的問題
- Lint工具對(duì)于JavaScript內(nèi)部的CSS代碼樣式支持的還不夠
