介紹

JSS是CSS的創(chuàng)作工具，它允許你使用JavaScript以聲明，無沖突和可重用的方式描述樣式。它可以在瀏覽器，服務(wù)器端或在構(gòu)建時在Node中編譯。JSS與框架無關(guān)。它由多個包組成：核心部分，插件以及框架集成等。

---

---

Github

https://github.com/cssinjs/jss stars:5.1k

---

快速開始

如果你已經(jīng)對使用JSS感興趣，可以使用在線代碼編輯器。在CodeSandbox(一個非常實用的在線編輯器，可以用來學(xué)習(xí)各種編程技能)上嘗試Hello World示例。以下是三種不同框架下的用法(代碼圖片生成自carbon網(wǎng)站)：

• JSS

---

• React-JSS

---

• Styled-JSS

---

---

特性

• 真實的CSS

JSS生成實際的CSS，而不是內(nèi)聯(lián)樣式。它支持每個現(xiàn)有的CSS功能。CSS規(guī)則只創(chuàng)建一次，并使用其類名與元素重復(fù)使用，與內(nèi)聯(lián)樣式相反。此外，當DOM元素更新時，將應(yīng)用先前創(chuàng)建的CSS規(guī)則。

• 無沖突選擇器

JSS默認生成唯一的類名。它允許避免典型的CSS問題，默認情況下一切都是全局的。它完全消除了命名約定的需要。

• 代碼重用

使用JavaScript作為宿主語言使我們有機會以常規(guī)CSS無法實現(xiàn)的方式重用CSS規(guī)則。您可以利用JavaScript模塊，變量，函數(shù)，數(shù)學(xué)運算等。如果做得好，它仍然可以完全聲明。

• 易于拆卸和修改

CSS規(guī)則的明確使用允許您跟蹤消費者并確定是否可以安全地刪除或修改它。

• 動態(tài)Style

使用JavaScript函數(shù)和Observable可以在瀏覽器中動態(tài)生成樣式，使有機會訪問應(yīng)用程序狀態(tài)，瀏覽器API或遠程數(shù)據(jù)以進行樣式設(shè)置。你不僅可以定義一次樣式，還可以在任何時間點以有效的方式更新樣式。

• 用戶控制的動畫

JSS可以高效地處理CSS更新，可以使用它創(chuàng)建復(fù)雜的動畫。使用函數(shù)值，Observables并將它們與CSS過渡相結(jié)合，可以為用戶控制的動畫提供最大的性能。對于預(yù)定義的動畫，使用@keyframes和transition更好，因為它們將完全取消阻止JavaScript線程。

• 關(guān)鍵的CSS

要優(yōu)化第一次繪制的時間，你可以使用服務(wù)器端渲染并提取關(guān)鍵CSS。可以將CSS的呈現(xiàn)與HTML的呈現(xiàn)結(jié)合起來，這樣就不會生成未使用的CSS。它將導(dǎo)致在服務(wù)器端呈現(xiàn)期間提取的最小關(guān)鍵CSS，并允許內(nèi)聯(lián)它。

• 插件

JSS核心實現(xiàn)了基于插件的架構(gòu)。它允許您創(chuàng)建可以實現(xiàn)自定義語法或其他強大功能的自定義插件。JSS有許多官方插件，可以單獨安裝或使用默認預(yù)設(shè)。社區(qū)插件的一個很好的例子是jss-rtl。

• Expressive 語法

由于各種插件，JSS允許您使用現(xiàn)有的全局類名來嵌套，全局選擇器和組合。例如，允許您以比CSS更可讀的方式表達屬性。如果要直接從瀏覽器開發(fā)工具復(fù)制粘貼樣式，也可以使用模板字符串。jss-plugin-expandbox-shadow

• 完全隔離

另一個有用的插件示例是，它允許您完全隔離元素與全局級聯(lián)規(guī)則，并可能覆蓋不需要的屬性。在創(chuàng)建應(yīng)該在第三方文檔內(nèi)部呈現(xiàn)的窗口小部件時尤其有用。jss-plugin-isolate

• React整合。

React-JSS包提供了一些額外的功能：

動態(tài)主題 - 允許基于上下文的主題傳播和運行時更新。

關(guān)鍵CSS提取 - 僅提取渲染組件中的CSS。

延遲評估 - 樣式表在組件安裝時創(chuàng)建。

樣式表的靜態(tài)部分在所有元素之間共享。

使用props作為參數(shù)自動更新函數(shù)值和規(guī)則。

• JavaScript構(gòu)建管道

CSS不需要額外的構(gòu)建管道配置。無論你選擇構(gòu)建JavaScript的工具是什么，它都可以與JSS一起使用。

安裝使用

yarn add jss

---

yarn add jss-preset-default //使用默認設(shè)置

---

import jss from 'jss'import preset from 'jss-preset-default'jss.setup(preset())// 創(chuàng)造你的style.const style = { myButton: { color: 'green' }}//編譯樣式，應(yīng)用插件。const sheet = jss.createStyleSheet(style)//如果要在客戶端上呈現(xiàn)，請將其插入DOM。sheet.attach()//如果要渲染服務(wù)器端，請獲取CSS文本。sheet.toString()

---

• 使用自定義插件進行設(shè)置

import jss from 'jss'import camelCase from 'jss-plugin-camel-case'import somePlugin from 'jss-some-plugin'//使用插件。jss.use(camelCase(), somePlugin())// Create your style.const style = { myButton: { color: 'green' }}//編譯樣式，應(yīng)用插件。const sheet = jss.createStyleSheet(style)// 如果要在客戶端上呈現(xiàn)，請將其插入DOMsheet.attach()// 如果要渲染服務(wù)器端，請獲取CSS文本。sheet.toString()

---

• 指定DOM插入點

JSS

---

import jss from 'jss'jss.setup({insertionPoint: 'custom-insertion-point'})

---

JSS in body 這可能是你選擇的任何DOM節(jié)點，可以作為插入點。 import jss from 'jss'jss.setup({ insertionPoint: document.getElementById('insertion-point')})

簡單案例

通過兩張圖片來體驗：

總結(jié)

JSS的功能是十分強大的，不僅僅讓寫css的方式放到了JavaScript，這樣對更加喜愛編寫javascript的小伙伴來說是值得嘗試的，而且還支持服務(wù)器端渲染等更多高級的特性，前端技術(shù)百花齊放，但目前仍然不變的是掌握JavaScript者得天下的時代！

總結(jié)

以上是生活随笔為你收集整理的服务器怎么控制忽略样式_使用JavaScript来编写你的CSS样式代码——JSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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