原文鏈接：https://css-tricks.com/the-many-ways-to-include-css-in-javascript-applications/，作者：Dominic Magnifico

如有翻譯不準(zhǔn)確，請(qǐng)多指正。

歡迎來到這個(gè)在前端開發(fā)領(lǐng)域極具爭(zhēng)議性的話題！我相信讀到這篇文章的大多數(shù)人都曾遇到過關(guān)于#如何在JavaScript應(yīng)用程序中處理CSS#相關(guān)的熱門問題。

在這篇文章之前，我想聲明一句：沒有什么硬性標(biāo)準(zhǔn)可以確定在React、Vue或Angular應(yīng)用程序中處理CSS的哪一種方法是最好的。每個(gè)項(xiàng)目都是不同的，每個(gè)方法都有自己的優(yōu)點(diǎn)！這樣說好像有點(diǎn)含糊不清，但我知道的是，我們所處的開發(fā)社區(qū)中有很多人去不斷尋求新信息，他們希望以更加有意義的方式推動(dòng)web向前發(fā)展。

暫且把關(guān)于這個(gè)主題先入為主的概念放在一邊，讓我們來看看迷人的CSS體系結(jié)構(gòu)世界吧!

首先讓我們一起來盤點(diǎn)一下這些方法

簡(jiǎn)單地搜索“如何將CSS添加到[在此處插入框架]”就能出現(xiàn)一系列關(guān)于如何將樣式應(yīng)用于項(xiàng)目的意見。為了幫助大家進(jìn)行篩選摘除，我們將從各更高級(jí)的角度研究一些常用的方法及其目的。

選項(xiàng)1：傳統(tǒng)樣式表

我們完全可以用一種熟悉的方式開始：一個(gè)傳統(tǒng)樣式表，完全可以在應(yīng)用程序之中鏈接一個(gè)外部樣式表，這樣就可以完工了。

我們可以按照我們的習(xí)慣編寫CSS，然后繼續(xù)我們的生活。這根本沒有什么問題，但是隨著應(yīng)用程序越來越大、越來越復(fù)雜，維護(hù)單個(gè)樣式表就越來越難了。解析數(shù)千行CSS(這些CSS負(fù)責(zé)設(shè)計(jì)整個(gè)應(yīng)用程序的樣式)對(duì)于從事該項(xiàng)目的任何開發(fā)人員來說都是一件痛苦的事情。

樣式級(jí)聯(lián)看起來很美好但它也變得很難管理，因?yàn)槟慊蝽?xiàng)目上的其他開發(fā)者編寫的一些樣式會(huì)在應(yīng)用程序的其他部分引入回歸。我們之前也遇到過這些問題，并且引入了Sass之類的東西(以及最近的PostCSS)來幫助我們處理這些問題。

我們可以繼續(xù)沿著這條路走下去，利用PostCSS的強(qiáng)大功能來編寫非常模塊化的CSS部分，這些部分通過@import規(guī)則串在一起。這需要在webpack配置中進(jìn)行一些工作才能正確設(shè)置，但這些事情大家肯定可以處理!

無論你決定用哪種編譯器，你都可以通過標(biāo)題中的標(biāo)記獲得一個(gè)包含應(yīng)用程序所有樣式的CSS文件。根據(jù)應(yīng)用程序的復(fù)雜程度，這個(gè)文件可能會(huì)變得非常臃腫，難以異步加載，并且應(yīng)用程序的其余部分會(huì)出現(xiàn)租用者阻塞。(當(dāng)然，阻塞并不總是一件壞事，但是為了所有的意圖和目的，我們將在這里泛化一點(diǎn)，盡可能避免渲染阻塞腳本和樣式。)

這并不是說這種方法毫無優(yōu)點(diǎn)，對(duì)于小型應(yīng)用程序，或者由不太關(guān)注前端的團(tuán)隊(duì)構(gòu)建的應(yīng)用程序，單個(gè)樣式表可能是一個(gè)不錯(cuò)的選擇。它在業(yè)務(wù)邏輯和應(yīng)用程序風(fēng)格之間提供了清晰的分離，而且由于它不是由我們的應(yīng)用程序生成的，因此完全在我們的控制范圍內(nèi)，以確保我們編寫的內(nèi)容與輸出的內(nèi)容完全一致。此外，瀏覽器緩存單個(gè)CSS文件相當(dāng)容易，因此返回的用戶在下次訪問時(shí)不必重新下載整個(gè)文件。

但是假設(shè)我們正在尋找一個(gè)更健壯的CSS架構(gòu)，它允許我們利用工具的強(qiáng)大功能。它可以幫助我們管理一個(gè)需要更多微妙方法的應(yīng)用程序，輸入CSS模塊。

選項(xiàng)2:CSS模塊

單個(gè)樣式表中的一個(gè)相當(dāng)大的問題是回歸的風(fēng)險(xiǎn)。編寫使用相當(dāng)非特定選擇器的CSS可能最終會(huì)改變應(yīng)用程序中完全不同區(qū)域的另一個(gè)組件。這就是所謂的“作用域樣式”派上用場(chǎng)的地方。

帶作用域的樣式允許我們以程序化的方式生成特定于組件的類名。因此，將這些樣式限定到該特定組件，以確保其類名是唯一的。這將導(dǎo)致自動(dòng)生成的類名，例如header__2lexd。最后一點(diǎn)是一個(gè)哈希值，它是唯一的，因此即使你有另一個(gè)名為header的組件，也可以對(duì)其應(yīng)用標(biāo)題類，并且我們的作用域樣式將生成一個(gè)新的哈希后綴，如下所示：header__15qy_。

CSS模塊提供了控制生成的類名的方法(具體取決于實(shí)現(xiàn))，但是我將把這個(gè)問題留給CSS模塊文檔來討論。

所有這些都完成之后，我們?nèi)匀辉谏梢粋€(gè)CSS文件，該文件通過標(biāo)頭中的標(biāo)記傳遞給瀏覽器。這帶來了同樣的潛在缺點(diǎn)(渲染阻塞、文件大小膨脹等)，當(dāng)然也有好處主要是緩存作用。但是，由于這種方法的作用域樣式附帶了另一個(gè)警告:刪除全局作用域——至少在最初是這樣。

假設(shè)你想使用.screen-reader-text全局類，該類可以應(yīng)用于應(yīng)用程序中的任何組件。如果使用CSS模塊，則必須使用：global偽選擇器，該選擇器將其中的CSS明確定義為可被應(yīng)用程序中其他組件全局訪問的對(duì)象。只要將包含global聲明塊的樣式表導(dǎo)入到組件的樣式表中，就可以使用該全局選擇器。這不是一個(gè)很大的缺點(diǎn)，但是需要逐漸適應(yīng)。

這是一個(gè)：global偽選擇器的示例：

你可能會(huì)冒著將一堆用于字體，表格以及大多數(shù)站點(diǎn)的通用元素的全局選擇器放到一個(gè)單獨(dú)的global選擇器中的風(fēng)險(xiǎn)。幸運(yùn)的是，通過諸如PostCSSNested或Sass之類的魔術(shù)，你可以將部分代碼直接導(dǎo)入選擇器中，以使事情更簡(jiǎn)潔：

這樣，你可以不使用：global選擇器來編寫局部文件，而直接將其直接導(dǎo)入到主樣式表中。

需要習(xí)慣的另一點(diǎn)是如何在DOM節(jié)點(diǎn)中引用類名。我將在這里以Vue，React和Angular的各個(gè)文檔為例。我還將為你提供一些示例，說明這些類引用在React組件中的使用方式：

同樣，CSSModules方法具有一些很好的用例。對(duì)于希望利用范圍樣式，同時(shí)保持靜態(tài)但已編譯樣式表的性能優(yōu)勢(shì)的應(yīng)用程序，CSS模塊可能是最適合你的選擇！

在這里也要注意，CSS模塊可以與你喜歡的CSS預(yù)處理功能結(jié)合使用。Sass，Less，PostCSS等都可以使用CSS模塊集成到構(gòu)建過程中。

但是，假設(shè)你的應(yīng)用程序可以通過包含在JavaScript中而受益。也許獲得對(duì)組件各種狀態(tài)的訪問權(quán)并根據(jù)不斷變化的狀態(tài)做出反應(yīng)也將是有益的。如果你也想輕松地將關(guān)鍵CSS集成到的應(yīng)用程序中去，那就輸入CSS-in-JS吧。

選項(xiàng)3:CSS-in-JS

CSS-in-JS是一個(gè)相當(dāng)廣泛的主題。有幾個(gè)包可以使CSS-in-JS的編寫變得盡可能輕松。像JSS、Emotion和樣式組件之類的框架只是構(gòu)成本主題的眾多包中的一小部分。

作為大多數(shù)這些框架的粗略解釋，CSS-in-JS基本上以相同的方式運(yùn)行。你編寫與單個(gè)組件關(guān)聯(lián)的CSS，并且構(gòu)建過程將編譯該應(yīng)用程序。發(fā)生這種情況時(shí)，大多數(shù)CSS-in-JS框架只會(huì)輸出在任何給定時(shí)間在頁(yè)面上呈現(xiàn)的組件的關(guān)聯(lián)CSS。CSS-in-JS框架通過在應(yīng)用程序的

中的

我們還需要解決CSS-in-JS解決方案的潛在缺點(diǎn)——而且絕對(duì)不要試圖引發(fā)更多的鬧劇。使用這樣的方法，我們很容易陷入一個(gè)陷阱，這會(huì)導(dǎo)致我們得到一個(gè)膨脹的JavaScript文件，其中可能包含數(shù)百行CSS——而這一切甚至在開發(fā)人員看到任何組件的方法或其HTML結(jié)構(gòu)之前就已經(jīng)出現(xiàn)了。

然而，我們可以將此視為一個(gè)機(jī)會(huì)，來非常仔細(xì)地檢查我們是如何以及為什么以這種方式構(gòu)建組件的。通過更深入地考慮這一點(diǎn)，我們可以潛在地利用它，并使用更多可重用組件編寫更簡(jiǎn)潔的代碼。

此外，此方法絕對(duì)模糊了業(yè)務(wù)邏輯和應(yīng)用程序樣式之間的界限。但是，有了一個(gè)有據(jù)可查且經(jīng)過深思熟慮的體系結(jié)構(gòu)，該項(xiàng)目中的其他開發(fā)人員可以輕松地采用這種想法，而不會(huì)感到不知所措。

寫在最后

有多種方法可以處理任何項(xiàng)目上的CSS體系結(jié)構(gòu)的難題，并且可以在使用任何框架時(shí)進(jìn)行處理。作為開發(fā)人員，我們擁有如此眾多的選擇，這既令人興奮，又令人難以置信。但是，我認(rèn)為，最終我們會(huì)在超短的社交媒體對(duì)話中迷失的首要原因是——每種解決方案都有其優(yōu)點(diǎn)和效率低下的弊病。這是關(guān)于我們?nèi)绾沃?jǐn)慎，周到地實(shí)施使我們自己/或其他可能接觸代碼的開發(fā)人員的系統(tǒng)的感謝，感謝我們花時(shí)間建立該結(jié)構(gòu)。

總結(jié)

以上是生活随笔為你收集整理的css如何调整红心样式_在JavaScript应用程序中包含CSS的多种方法「渡一」的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。