CSS-in-JS 褒貶不一。有人強烈反對這種做法，認為將樣式寫入JavaScript 是錯誤的，樣式應(yīng)該放在CSS 中，這是瀏覽器優(yōu)化的方案，遵循關(guān)注點分離原則。任何其他做法都是可笑的錯誤，是未能吸取過去錯誤教訓(xùn)的標誌（例如

但也有人熱衷于 CSS-in-JS。他們認為將模板和功能放在一起（大多數(shù) JavaScript 框架的做法）很成功，因此添加樣式似乎很自然。Vue 的單文件組件就是一個典型例子。（如果您需要入門指南，請觀看我和 Dustin Schau 制作的關(guān)于 CSS-in-JS 的視頻。）

Brent Jackson 認為應(yīng)該學(xué)習(xí) CSS-in-JS，但也提出了一些務(wù)實的觀點：

CSS-in-JS 能做什么？

• 使用 JavaScript 語法編寫 CSS
• 將樣式與組件放在一起
• 利用原生 JS 語法特性
• 利用 JS 生態(tài)系統(tǒng)中的任何內(nèi)容

CSS-in-JS 不能免除你理解：

• 樣式如何應(yīng)用于 DOM
• 繼承如何工作
• CSS 屬性如何工作
• CSS 布局如何工作

CSS-in-JS 并不能免除你學(xué)習(xí) CSS，至少大部分情況下是這樣。

我聽到很多關(guān)于 CSS-in-JS 的反對意見，例如“你們使用 CSS-in-JS 是因為你們不懂 CSS”或“你們這樣做是因為你們害怕級聯(lián)。我已經(jīng)知道如何作用域 CSS 了”。我認為這些說法并不特別有幫助。

Laura Buns 有一篇精彩的兩面性文章，標題為“沒有網(wǎng)絡(luò)的網(wǎng)絡(luò)”，其中一部分是關(guān)于 React 和 CSS-in-JS 的：

我討厭 React，因為它默認的 CSS-in-JS 方法鼓勵你編寫完全自包含的一次性組件，而不是嘗試將網(wǎng)站 UI 作為一個整體構(gòu)建。

你不需要因為使用 React 就必須使用 CSS-in-JS，但它很流行，這是一個非常有趣且合理的批評。如果你將所有內(nèi)容都作用域化，是不是會增加不一致的風險？

到目前為止，我一直是 CSS 模塊的粉絲，因為它在 CSS-in-JS 中盡可能輕量級，只處理作用域和位置，僅此而已。我將它與 Sass 一起使用，以便我們可以訪問有助于保持一致性的 mixin 和變量，但我可以看出它如何導(dǎo)致過多的單一組件的危險境地。

然而，它們將是一次性的組件?？纱a分割的一次性組件。一切都是平衡的。

Laura 接著說，她喜歡 CSS-in-JS 方法提供的一些強大功能和靈活性：

我喜歡 CSS-in-JS 提供足夠的抽象，讓我仍然可以使用盲目貓頭鷹選擇器之類的技巧，同時也讓我可以使用 JS 來做容器查詢之類的事情。

Martin Hofmann 創(chuàng)建了一個網(wǎng)站，比較了 BEM 與 Emotion，查看了一個小的“警報”組件。我喜歡它是一個沒有感情色彩的（字面意思，不是指庫）比較，它關(guān)注語法。BEM 有一些優(yōu)點，特別是它不需要工具，并且可以輕松地共享到任何 Web 項目中。但 Emotion 方法在許多方面更簡潔，看起來更容易處理。

我希望看到更多對這些技術(shù)的客觀比較。選擇 A 在這三方面做得很好，但在這些方面很痛苦，而選擇 B 在其他方面做得很好，并解決了其他一些痛點。

我們最近鏈接了 Scott Jehl 的文章，該文章探討了異步加載 CSS。Scott 的開篇白：

為提高頁面性能和彈性，我們可以做的最重要的事情之一是以不延遲頁面渲染的方式加載 CSS。

值得注意的是，全面的 CSS-in-JS 方法可以自然地獲得這種能力，因為樣式被捆綁到 JavaScript 中。這是有代價的。性能的代價。但是，如果我們消除了其他阻塞渲染的內(nèi)容，我們就能收回部分成本。這很有趣，至少值得更多的數(shù)據(jù)。

我可能會為此挨罵，但我對試圖將 CSS-in-JS 歸咎于提高行業(yè)入門門檻的討論不太感興趣。這是一個需要認真考慮的大問題，但我們這里討論的不是關(guān)閉 CSS 并強迫每個人使用其他語言。我們討論的是針對特定類型項目和特定規(guī)模的利基庫。

我認為，如果……值得考慮一下 CSS-in-JS 的理念：

• 你無論如何都在做一個組件繁重的 JavaScript 項目。
• 你已經(jīng)將模板、功能和數(shù)據(jù)查詢放在一起了。
• 你認為你可以利用它而不損害用戶體驗，例如在其他地方獲得速度提升。
• 你的團隊對所需的科技很熟悉，也就是說，你不會排斥人才。

Max Stoiber 是一個不折不扣的粉絲。他在這個主題上的文章談到了這種風格給他帶來的信心以及他節(jié)省的時間，這兩點我發(fā)現(xiàn)都是真的。但他還認為這種方法專門用于 JavaScript 框架應(yīng)用程序。

如果你正在使用 JavaScript 框架來構(gòu)建一個帶有組件的 Web 應(yīng)用程序，CSS-in-JS 可能是一個不錯的選擇。特別是如果你是一個團隊的一部分，團隊中的每個人都理解基本的 JavaScript。

我很想在評論中聽到你們的看法。你對這一切有什么看法？瘋狂地愛著？充滿厭惡？我最感興趣的是聽到真實項目中的成功案例或失敗案例。

以上是CSS-IN-JS的不同觀點的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！