Facebook去年四月發(fā)布了其重大改版。這是一個雄心勃勃的項目，是對一個擁有海量用戶的龐大網(wǎng)站的重建。為了實(shí)現(xiàn)這一目標(biāo)，他們使用了自己創(chuàng)建並開源的幾項技術(shù)，例如React、GraphQL、Relay和一個名為stylex的新CSS-in-JS庫。

這個新庫是Facebook內(nèi)部使用的，但他們分享了足夠的信息，使得開源實(shí)現(xiàn)style9成為可能。

為什麼需要另一個CIJ庫？

現(xiàn)已存在大量的CSS-in-JS (CIJ)庫，因此可能不清楚為什麼還需要另一個庫。正如Christopher Chedeau所闡述的那樣，style9具有與所有其他CIJ解決方案相同的好處，包括作用域選擇器、死代碼消除、確定性解析以及在CSS和JavaScript之間共享值的能力。

然而，有一些方面使style9獨(dú)樹一幟。

最小的運(yùn)行時

儘管樣式是在JavaScript中定義的，但它們由編譯器提取到常規(guī)的CSS文件中。這意味著最終的JavaScript文件中不會包含任何樣式。唯一剩下的就是最終的類名，最小的運(yùn)行時將有條件地應(yīng)用這些類名，就像您通常所做的那樣。這將導(dǎo)致代碼包更小、內(nèi)存使用減少以及渲染速度更快。

由於值是在編譯時提取的，因此無法使用真正動態(tài)的值。幸運(yùn)的是，這些值並不常見，而且由於它們是唯一的，因此不會因為內(nèi)聯(lián)定義而受到影響。更常見的是有條件地應(yīng)用樣式，當(dāng)然這是支持的。多虧了babel的path.evaluate，局部常量和數(shù)學(xué)表達(dá)式也是支持的。

原子輸出

由於style9的工作方式，每個屬性聲明都可以成為具有單個屬性的獨(dú)立類。例如，如果我們在代碼中多個地方使用opacity: 0，它在生成的CSS中只會存在一次。這樣做的好處是，CSS文件的大小隨著唯一聲明的數(shù)量而增長，而不是隨著聲明的總數(shù)而增長。由於大多數(shù)屬性被多次使用，這可以導(dǎo)致CSS文件大幅縮小。例如，F(xiàn)acebook舊的首頁使用了413 KB的gzip壓縮CSS。改版後，所有頁面的CSS大小為74 KB。同樣，較小的文件大小會導(dǎo)致更好的性能。

有些人可能會抱怨這一點(diǎn)，認(rèn)為生成的類名不是語義化的，它們是不透明的，並且忽略了級聯(lián)。這是真的。我們將CSS視為編譯目標(biāo)。但這是有充分理由的。通過質(zhì)疑以前被認(rèn)為最佳的實(shí)踐，我們可以改善用戶和開發(fā)人員的體驗。

此外，style9還有許多其他強(qiáng)大的功能，包括：使用TypeScript進(jìn)行類型化樣式、消除未使用樣式、使用JavaScript變量的能力以及對媒體查詢、偽選擇器和關(guān)鍵幀的支持。

如何使用它

首先，像往常一樣安裝它：

 <code>npm install style9</code>

style9有針對Rollup、Webpack、Gatsby和Next.js的插件，它們都基於Babel插件。關(guān)於如何使用它們的說明可在存儲庫中找到。在這裡，我們將使用webpack插件。

 <code>const Style9Plugin = require('style9/webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ // 這將轉(zhuǎn)換style9調(diào)用{ test: /\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }, // 這是正常的Webpack CSS提取的一部分{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ // 這將對最終的CSS文件中的聲明進(jìn)行排序并刪除重復(fù)的聲明new Style9Plugin(), // 這是正常的Webpack CSS提取的一部分new MiniCssExtractPlugin() ] };</code>

定義樣式

創(chuàng)建樣式的語法與其他庫非常相似。我們首先使用樣式對象調(diào)用style9.create：

 <code>import style9 from 'style9'; const styles = style9.create({ button: { padding: 0, color: 'rebeccapurple' }, padding: { padding: 12 }, icon: { width: 24, height: 24 } });</code>

因為所有聲明都將產(chǎn)生原子類，所以諸如flex: 1和background: blue之類的簡寫將不起作用，因為它們設(shè)置了多個屬性?？梢哉归_的屬性，例如padding、margin、overflow等，將自動轉(zhuǎn)換為它們的完整形式。如果您使用TypeScript，則在使用不受支持的屬性時會收到錯誤。

解析樣式

要生成類名，我們現(xiàn)在可以調(diào)用style9.create返回的函數(shù)。它接受我們要使用的樣式鍵作為參數(shù)：

 <code>const className = styles('button');</code>

該函數(shù)的工作方式是這樣的：右側(cè)的樣式優(yōu)先，並將與左側(cè)的樣式合併，就像Object.assign一樣。以下將產(chǎn)生一個填充為12px且文本為rebeccapurple的元素。

 <code>const className = styles('button', 'padding');</code>

我們可以使用以下任何格式有條件地應(yīng)用樣式：

 <code>// 邏輯與styles('button', hasPadding && 'padding'); // 三元運(yùn)算符styles('button', isGreen ? 'green' : 'red'); // 布爾對象styles({ button: true, green: isGreen, padding: hasPadding });</code>

這些函數(shù)調(diào)用將在編譯期間被刪除，並替換為直接的字符串連接。上面代碼中的第一行將被替換為類似'c1r9f2e5 ' hasPadding ? 'cu2kwdz ' : ''的內(nèi)容。沒有留下運(yùn)行時代碼。

組合樣式

我們可以通過使用屬性名訪問樣式對象並將其傳遞給style9來擴(kuò)展樣式對象。

 <code>const styles = style9.create({ blue: { color: 'blue; } }); const otherStyles = style9.create({ red: { color: 'red; } }); // 將為紅色const className = style9(styles.blue, otherStyles.red);</code>

就像函數(shù)調(diào)用一樣，右側(cè)的樣式優(yōu)先。但是，在這種情況下，類名不能靜態(tài)解析。相反，屬性值將被類替換，並在運(yùn)行時連接。屬性像以前一樣添加到CSS文件中。

總結(jié)

CSS-in-JS 的好處是真實(shí)存在的。也就是說，當(dāng)我們將樣式嵌入到代碼中時，會產(chǎn)生性能成本。通過在構(gòu)建時提取值，我們可以同時獲得兩全其美的效果。我們可以從將樣式與標(biāo)記放在一起以及使用現(xiàn)有的JavaScript基礎(chǔ)設(shè)施中獲益，同時還可以生成最佳樣式表。

如果style9聽起來很有趣，請查看存儲庫並試用一下。如果您有任何疑問，請隨時提出問題或聯(lián)繫我們。

致謝

感謝Giuseppe Gurgone 對style-sheet和dss的工作，感謝Nicolas Gallagher對react-native-web的工作，感謝Satyajit Sahoo和Callstack的全體成員對linaria的工作，感謝Christopher Chedeau、Sebastian McKenzie、Frank Yan、Ashley Watkins、Naman Goel以及在Facebook上從事stylex工作的其他所有人願意公開分享他們的經(jīng)驗教訓(xùn)。以及任何其他我錯過的其他人。

鏈接

• johanholmerin/style9
• 使用React、GraphQL和Relay構(gòu)建新的facebook.com – 2019年4月30日
• 使用React和Relay構(gòu)建新的Facebook | Frank Yan – 2019年10月30日
• 新的Facebook.com的技術(shù)棧重建– 2020年5月8日
• johanholmerin/style9-components.macro：style9的Styled Components API – 實(shí)驗性

以上是樣式9：構(gòu)建時間CSS-In-JS的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！