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

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

最常見(jiàn)的示例通常是使用模板語(yǔ)言時(shí)。例如，可以使用一種語(yǔ)言來(lái)生成更詳細(xì)的語(yǔ)言（通常是HTML）的代碼。這是前端框架的關(guān)鍵作用之一 -操作HTML。這個(gè)領(lǐng)域最出名的就是JSX，因?yàn)樗皇钦嬲哪０逭Z(yǔ)言;它是JavaScript的語(yǔ)法擴(kuò)展，它使得使用HTML非常簡(jiǎn)潔。

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

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

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

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

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

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

我將列出一些處理這些挑戰(zhàn)的技術(shù)以及它們?cè)诒鞠盗械膬蓚€(gè)部分中的局限性。 沒(méi)有任何技術(shù)優(yōu)于其他技術(shù)，它們甚至不相互排斥; 您可以選擇一個(gè)或組合它們，具體取決于您的決定是否能改善您的項(xiàng)目質(zhì)量。

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

在構(gòu)建實(shí)際組件之前，我們將抽象出srcSet屬性以保持示例代碼簡(jiǎn)潔。 那么，讓我們創(chuàng)建一個(gè)帶有兩個(gè)實(shí)用程序的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(", ")

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

我們將分別將這些實(shí)用程序用于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)容。 這樣，您可以更輕松地按照示例進(jìn)行操作。

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