摘要：庫通過在中插入標(biāo)簽在運行時創(chuàng)建樣式。結(jié)論是一體化的樣式解決方案，用于彌合和之間的差距。零運行時解決方案通過恢復(fù)工具來緩解一些缺點，這些工具將討論提升到更有趣的水平。

Web開發(fā)是需要掌握多種技術(shù)。我們習(xí)慣于與多種語言密切合作。而且，隨著開發(fā)Web應(yīng)用程序變得越來越普遍和差別細微化，我們經(jīng)常尋找創(chuàng)造性的方法來彌合這些語言之間的差距，從而使我們的開發(fā)環(huán)境和工作流程更容易，更高效。

最常見的示例通常是使用模板語言時。例如，可以使用一種語言來生成更詳細的語言（通常是HTML）的代碼。這是前端框架的關(guān)鍵作用之一 -操作HTML。這個領(lǐng)域最出名的就是JSX，因為它不是真正的模板語言;它是JavaScript的語法擴展，它使得使用HTML非常簡潔。

Web應(yīng)用程序經(jīng)歷了許多狀態(tài)組合，多帶帶管理狀態(tài)通常很有挑戰(zhàn)性。這就是為什么CSS有時會被淘汰的原因 - 即使通過不同的狀態(tài)和媒體查詢管理樣式同樣重要且同樣具有挑戰(zhàn)性。在這個由兩部分組成的系列中，我想將CSS放在聚光燈下，并探索彌合它與JavaScript之間的差距。在本系列中，我將假設(shè)您正在使用像webpack這樣的模塊解析器。因此，我將在我的示例中使用React，但相同或類似的原則適用于其他JavaScript框架，包括Vue。

CSS領(lǐng)域正朝著多個方向發(fā)展，因為要解決許多挑戰(zhàn)并且沒有“正確”的路徑。我一直在花費大量精力嘗試各種方法，主要是在個人項目上，所以這個系列的目的只是告知，而不是給你解決方案。

在深入研究代碼之前，有必要解釋W(xué)eb應(yīng)用程序樣式化方面最顯著的挑戰(zhàn)。 我將在本系列中討論的是范圍，條件和動態(tài)樣式以及可重用性。

作用域定是眾所周知的CSS挑戰(zhàn)，它的目的是編寫不會影響到組件外部的樣式，從而避免意外的副作用。 我們希望在不影響編碼體驗的情況下實現(xiàn)功能。

雖然前端應(yīng)用程序中的狀態(tài)開始變得越來越先進，但CSS仍然是靜態(tài)的。 我們只能有條件地應(yīng)用樣式集 - 如果按鈕是主要的，我們可能會應(yīng)用“primary”類并在多帶帶的CSS文件中定義它的樣式以應(yīng)用它在屏幕上的樣式。 有幾個預(yù)定義的按鈕變化是可管理的，但如果我們想要有各種按鈕，如為Twitter，F(xiàn)acebook，Pinterest定制的特定按鈕，可能還會有其他很多種？ 我們真正想要做的只是傳遞顏色并使用CSS定義狀態(tài)，如懸停，焦點，禁用等。這稱為動態(tài)樣式，因為我們不再在預(yù)定義樣式之間切換 - 我們不知道接下來會發(fā)生什么。 可能會想到內(nèi)聯(lián)樣式來解決此問題，但它們不支持偽類，屬性選擇器，媒體查詢等。

重用規(guī)則集，媒體查詢等是我最近很少看到的一個主題，因為它已經(jīng)被Sass和Less等預(yù)處理器解決了。 但是我仍然想在這個系列中再次提起它。

我將列出一些處理這些挑戰(zhàn)的技術(shù)以及它們在本系列的兩個部分中的局限性。 沒有任何技術(shù)優(yōu)于其他技術(shù)，它們甚至不相互排斥; 您可以選擇一個或組合它們，具體取決于您的決定是否能改善您的項目質(zhì)量。

我們將使用名為Photo的示例組件演示不同的樣式技術(shù)。 我們將呈現(xiàn)可能具有圓角的響應(yīng)式圖像，同時將替代文本顯示為標(biāo)題。 它會像這樣使用：

在構(gòu)建實際組件之前，我們將抽象出srcSet屬性以保持示例代碼簡潔。 那么，讓我們創(chuàng)建一個帶有兩個實用程序的utils.js文件，用于使用Cloudinary生成不同寬度的圖像：

import { Cloudinary } from "cloudinary-core"

const cl = Cloudinary.new({ cloud_name: "demo", secure: true })

export const getSrc = ({ publicId, width }) =>
  cl.url(publicId, { crop: "scale", width })

export const getSrcSet = ({ publicId, widths }) => widths
  .map(width => `${getSrc({ publicId, width })} ${width}w`)
  .join(", ")

我們設(shè)置Cloudinary實例以使用Cloudinary的演示云名稱，以及根據(jù)指定選項為圖像publicId生成URL的url方法。 我們只對修改此組件的寬度感興趣。

我們將分別將這些實用程序用于src和srcset屬性：

getSrc({ publicId: "balloons", width: 200 })
// => "https://res.cloudinary.com/demo/image/upload/c_scale,w_200/balloons"

getSrcSet({ publicId: "balloons", widths: [200, 400] })
// => "https://res.cloudinary.com/demo/image/upload/c_scale,w_200/balloons 200w,
      https://res.cloudinary.com/demo/image/upload/c_scale,w_400/balloons 400w"

如果你不熟悉srcset和sizes屬性，我建議先閱讀一下有關(guān)響應(yīng)式圖像的內(nèi)容。 這樣，您可以更輕松地按照示例進行操作。

CSS-in-JS是一種樣式方法，它將CSS模型抽象到組件級別，而不是文檔級別。 這個想法是CSS可以限定為特定組件 - 并且只限于該組件 - 以使這些特定樣式不與其他組件共享或泄露到其他組件，并且僅在需要時才調(diào)用。 CSS-in-JS庫通過在中插入