什么是CSSX，它如何工作？為什么開發(fā)人員已經(jīng)對它提供的觀點(diǎn)著迷了？本文解釋了CSSX為何逐漸成為流行語的原因。唯一的缺點(diǎn)-可能需要一些時(shí)間來適應(yīng)它。

JavaScript一直在為網(wǎng)站提供動(dòng)態(tài)功能，并且一直沒有停止發(fā)展。任何網(wǎng)站都主要由三個(gè)基本組件組成，即標(biāo)記，邏輯和樣式。標(biāo)記語言由HTML處理，邏輯由JavaScript處理，CSS負(fù)責(zé)網(wǎng)站的樣式方面。在JavaScriptX出現(xiàn)并在JavaScript代碼中包含HTML 5之后，處理邏輯和標(biāo)記兩個(gè)方面的問題終于得到了解決。唯一遺漏的元素是CSS。

任何Web開發(fā)人員都會同意JavaScript確實(shí)是無與倫比的語言，因?yàn)樗哂胸S富的功能，動(dòng)態(tài)的功能和通用的容納特性?，F(xiàn)在，它已成為任何Web體驗(yàn)的一部分，以至于我們不再欣賞JavaScript在提供如此多汁的功能和流暢的界面方面的卓越表現(xiàn)。我們已經(jīng)習(xí)慣了這種語言。當(dāng)許多站點(diǎn)僅限于使用JavaScript編寫后端代碼時(shí)，F(xiàn)acebook給JavaScript帶來了一種新的名稱，稱為JSX，即HTML標(biāo)記與JavaScript的混合。一直存在的問題如下：為什么不對CSS進(jìn)行相同處理，以便我們可以擁有完整的Web語言，將與邏輯，標(biāo)記和樣式有關(guān)的所有元素組合在一起。

如果您認(rèn)為包含所有Web組件且僅作為單個(gè).js文件分發(fā)的文件，則為CSSX。該文件仍將提供基本樣式表，但JavaScript將包含動(dòng)態(tài)CSS。將所有Web組件打包在一起的新方法已經(jīng)獲得了開發(fā)人員的支持。與JSX一樣，CSSX帶有封裝，允許用戶查看每個(gè)組件的所有部分。綁定在一起只會使Web開發(fā)體驗(yàn)更加復(fù)雜和流暢。

簡而言之

新的CSSX如何工作？基本上，使用CSSX，您需要使用JavaScript創(chuàng)建對象，然后將所有對象文字轉(zhuǎn)換為CSS。因此，樣式保持與JavaScript結(jié)合在一起，并且不會影響加載速度，而這需要花費(fèi)與JavaScript相同的時(shí)間。盡管它剛剛出現(xiàn)，并且全世界的開發(fā)人員都對它提供的觀點(diǎn)很著迷，但可能需要一些時(shí)間才能習(xí)慣CSSX。

未樣式化文本（FOUT）的閃爍被認(rèn)為是一個(gè)主要問題。當(dāng)您依靠JavaScript交付CSS時(shí)，會在顯示實(shí)際樣式化頁面之前立即顯示未樣式化的內(nèi)容。結(jié)果是布局發(fā)生了變化，用戶體驗(yàn)也變得非常差。

其次，JavaScript沒有提供完整的樣式表。樣式可以應(yīng)用于JavaScript，但主要限于內(nèi)聯(lián)樣式。這要求采用樣式的每個(gè)元素并更改其屬性。即使這樣，也不能將所有元素都放在style屬性中。例如，不能向媒體查詢和偽類提供這種樣式屬性。因此，總而言之，JavaScript的樣式方面缺少很多東西。

您如何解決這兩個(gè)問題？解決這些問題對于JavaScript保持樣式的動(dòng)態(tài)能力至關(guān)重要。許多開發(fā)人員認(rèn)為使用JavaScript處理CSS是解決這些問題的最終解決方案。

CSS如何在JavaScript中工作？

顯然，必須在代碼和頁面上提供的樣式之間放置一個(gè)庫。該庫將創(chuàng)建一個(gè)帶有<style>標(biāo)簽的虛擬樣式表。之后，將有一個(gè)用于管理CSS規(guī)則的API。每當(dāng)您與JavaScript樣式表進(jìn)行交互時(shí)，都會在<style>標(biāo)記中進(jìn)行鏡像。這將導(dǎo)致將樣式元素耦合到JavaScript控件。此外，不再需要定義新的CSS類，因?yàn)樗试S您在運(yùn)行時(shí)生成CSS規(guī)則。

關(guān)鍵優(yōu)勢

詢問任何人，他們會說他們更喜歡生成和注入CSS，因?yàn)镴avaScript中的內(nèi)聯(lián)樣式缺乏可伸縮性。它可能更易于實(shí)現(xiàn)，但可伸縮性問題使其難以按要求縮放樣式。另一方面，使用JavaScript中的CSS，我們可以像樣式表一樣完全控制樣式。這將允許開發(fā)人員定義樣式，然后在內(nèi)部進(jìn)行更改。更新后的更改將很容易反映出靜態(tài)文件樣式表中的情況。

無樣式文本閃爍（FOUT）問題是推動(dòng)該概念合并的另一個(gè)至關(guān)重要的問題。通過將CSS放入JavaScript中，我們可以調(diào)整許多樣式元素，例如版式，網(wǎng)格和顏色，就像靜態(tài)文件一樣，允許瀏覽器在最快的時(shí)間內(nèi)在頁面上呈現(xiàn)樣式。

您有很多不需要頻繁訪問的東西，例如與狀態(tài)相關(guān)的類。因此，應(yīng)該在JavaScript中訪問CSS的哪一部分很重要。讓我們承認(rèn)一些事實(shí)。單個(gè)頁面的Web應(yīng)用程序（其中所有元素都是由JavaScript生成的）也都使用JavaScript設(shè)置樣式。另一方面，在大型Web應(yīng)用程序中，通過形成不同的塊并加以分離來解決各種需求至關(guān)重要。目的是減少每個(gè)組件的依賴性。

盡管HTML和CSS在客戶端的JavaScript視圖都具有很多依賴關(guān)系，但將它們組合到JavaScript中可以減少Web開發(fā)項(xiàng)目中各種依賴關(guān)系以及隨之而來的復(fù)雜性。到目前為止，降低復(fù)雜性的承諾似乎是CSSX的最大優(yōu)勢。