有些人極為討厭 css-in-JS，單單提起這個(gè)名字都會(huì)讓他們反感，總之就是拒絕二字。他們認(rèn)為樣式不屬于 JAVAScript，而是屬于 CSS，并且 CSS 有著很長(zhǎng)的歷史，瀏覽器支持非常完善。關(guān)注點(diǎn)必須分離，其他路子都走錯(cuò)了，我們要以史為鑒（比如標(biāo)簽等）。
有些人非常喜歡 CSS-in-JS。他們看到模板和功能并存的理念和大多數(shù)的 JavaScript 框架都非常成功，所以包裝在樣式里似乎就是順其自然。Vue 的單文件組件就是一個(gè)例子。
Brent Jackson 列舉了一些 CSS-in-JS 能做和不能做的事情：
CSS-in-JS 能做什么？
- 讓你用 JavaScript 語法編寫 CSS
- 組件和樣式共用
- 利用原生 JS 語法功能
- 利用 JS 生態(tài)系統(tǒng)
CSS-in-JS 沒法讓你了解：
- 如何將樣式應(yīng)用于 DOM
- 繼承如何工作
- CSS 屬性如何工作
- CSS 布局如何工作
CSS-in-JS 并不能減輕你學(xué)習(xí) CSS 的負(fù)擔(dān)，大多數(shù)情況下就是如此。
CSS-in-JS 的正方辯友和反方辯友
我聽過很多對(duì) CSS-in-JS 的排斥言論，諸如“你用 CSS-in-JS 是因?yàn)槟悴欢?CSS”或者“你們這樣做是因?yàn)槟愫ε录?jí)聯(lián)。我已經(jīng)知道如何定位 CSS 了。“但這些言論只是在挑事而已。
Lara buns 的那篇“沒有 Web 的 Web 世界”寫的很好，其中就提到了 React 和 CSS-in-JS：
我討厭 React，因?yàn)槟J(rèn)情況下 CSS-in-JS 方法需要你編寫完全自包含的組件，而不是從宏觀層面構(gòu)建網(wǎng)站的 UI。
不是說你用了 React 就得用 CSS-in-JS，但這種做法很流行，上面這段評(píng)價(jià)也很公正有趣。如果你什么東西都要打包，難道不是在引入更多不一致的風(fēng)險(xiǎn)嗎？
我一直都是 CSS 模塊的粉絲，因?yàn)樗拖?CSS-in-JS 一樣簡(jiǎn)單，而且和 SASS 并用可以保證一致性。但人們使用它時(shí)也很容易陷入太多一次性使用的陷阱中。
這些只會(huì)用一次的代碼可以拋棄，可以分離，一切都很平衡。
Laura 還說她喜歡 CSS-in-JS 方法，它提供了一些強(qiáng)大的功能和靈活性：
我喜歡 CSS-in-JS，因?yàn)樗峁┝俗銐虻某橄螅屇慵饶苡猛ㄓ眠x擇器之類的技巧，同時(shí)也能充分利用 JS 來做容器查詢之類的東西。
Martin Hofmann 創(chuàng)建了一個(gè)網(wǎng)站，用一個(gè)很小的“警報(bào)組件”來客觀地對(duì)比 BEM 與 Emotion 。BEM 有一些優(yōu)點(diǎn)，特別是不需要任何工具，并且可以輕松地與任何 Web 項(xiàng)目共享。但 Emotion 方法在很多方面都比較干凈，看起來更容易處理。
我希望有更多這種客觀的技術(shù)比較，公正地列出每項(xiàng)技術(shù)的優(yōu)勢(shì)和代價(jià)。
Scott Jehl 的一篇文章討論了異步加載 CSS。文章開頭寫到：
我們可以用一種不會(huì)拖累頁面渲染的方法加載 CSS，大幅提升頁面性能和適應(yīng)性。
值得一提的是 CSS-in-JS 方法天然就有這種能力，因?yàn)闃邮奖焕壍搅?JavaScript 中。當(dāng)然這種做法需要付出性能代價(jià)，但是如果我們消除一些阻塞渲染的障礙就能減輕一些代價(jià)。起碼這種方法值得多用一些數(shù)據(jù)。
我不覺得 CSS-in-JS 就一定提高了行業(yè)的門檻。我們并沒有強(qiáng)行排除 CSS，強(qiáng)迫大家用別的語言。這種方法適合某些項(xiàng)目，適用于特定規(guī)模。
我覺得以下情況下你應(yīng)該考慮一下 CSS-in-JS：
- 你正在開發(fā)一個(gè)有大量組件的 JavaScript 項(xiàng)目。
- 你要把模板、功能和數(shù)據(jù)查詢做在一起。
- 你認(rèn)為利用這種方法的同時(shí)不會(huì)影響用戶體驗(yàn)。
- 你的團(tuán)隊(duì)喜歡這種技術(shù)，不會(huì)因此萌生退意。
Max Stoiber 寫的文章介紹了這種方法給他帶來的信心和為他節(jié)省的時(shí)間。但他也認(rèn)為這種方法只適合 JavaScript 框架應(yīng)用程序。
如果你使用 JavaScript 框架來構(gòu)建包含組件的 Web 應(yīng)用程序，那么 CSS-in-JS 可能非常適合你的需求。如果你的團(tuán)隊(duì)成員都具備基本的 JavaScript 能力那就最好不過了。
英文原文： https://css-tricks.com/the-differing-perspectives-on-css-in-js/
