被尤雨溪diss的Native CSS Modules是什么
大家好，我是卡頌。
昨天早上正吃著早飯，唱著歌，開(kāi)開(kāi)心心摸魚(yú)時(shí)，看到一條尤大的推文：
尤：老實(shí)說(shuō)，我認(rèn)為Native CSS Modules標(biāo)準(zhǔn)是倉(cāng)促的，再次顯示了參與該標(biāo)準(zhǔn)制定過(guò)程的人的傲慢
經(jīng)常看尤大和其他大佬們交流技術(shù)，「?jìng)}促」、「傲慢」這樣的字眼是很少看到的。
今天我們來(lái)看看是什么樣的標(biāo)準(zhǔn)，讓尤大都忍不住diss。
此CSS Modules非彼Modules
想必做前端的同學(xué)對(duì)CSS Modules不會(huì)陌生，這里簡(jiǎn)單介紹下。
CSS Modules是一套開(kāi)源的規(guī)范，用以解決CSS的以下問(wèn)題：
- 命名沖突
- 沒(méi)有模塊化
- 依賴(lài)關(guān)系不明(樣式覆蓋問(wèn)題)
該規(guī)范需要打包工具實(shí)現(xiàn)。
我們用一個(gè)例子來(lái)簡(jiǎn)要了解他的實(shí)現(xiàn)細(xì)節(jié)：
將CSS文件style.css引入為style對(duì)象后，通過(guò)style.title的方式使用title class：
- import style from './style.css';
- export default () => {
- return (
- <p className={style.title}>
- I am KaSong.
- </p>
- );
- };
對(duì)應(yīng)style.css：
- .title {
- color: red;
- }
打包工具會(huì)將style.title編譯為「帶哈希的字符串」：
- <h1 class="_3zyde4l1yATCOkgn-DBWEL">
- Hello World
- </h1>
同時(shí)style.css也會(huì)編譯：
- ._3zyde4l1yATCOkgn-DBWEL {
- color: red;
- }
這樣，就產(chǎn)生了獨(dú)一無(wú)二的class，解決了CSS模塊化的問(wèn)題。
而今天的主角，并非這位CSS Modules。
Native CSS Modules
今年6月，谷歌工程師「Justin Fagnani」在推上公布了CSS Modules的最新進(jìn)展：
此CSS Modules并非上文提到的開(kāi)源方案，而是ES Modules標(biāo)準(zhǔn)下的一個(gè)標(biāo)準(zhǔn)。
該標(biāo)準(zhǔn)實(shí)際名稱(chēng)為CSS Module Scripts，但社區(qū)習(xí)慣稱(chēng)其為CSS Modules。
為了與開(kāi)源方案區(qū)別，下文稱(chēng)其為Native CSS Modules。
該標(biāo)準(zhǔn)用來(lái)在JS中導(dǎo)入CSS，語(yǔ)法類(lèi)似ES Modules：
- // ES Modules
- import React from "https://cdn.skypack.dev/react@17.0.1";
- // Native CSS Modules
- import styleSheet from "./styles.css" assert { type: "css" };
導(dǎo)入的CSS可以應(yīng)用于document對(duì)象或shadow DOM。
導(dǎo)入的styleSheet數(shù)據(jù)結(jié)構(gòu)如下：
配合Constructable Stylesheets[1]特性，可以解決CSS：
- 在多個(gè)shadow DOM之間復(fù)用
- FOUC問(wèn)題(Flash of Unstyled Content，即由于樣式未加載完導(dǎo)致DOM樣式從無(wú)到有的閃爍情況)
看起來(lái)很nice，那么尤大diss的點(diǎn)在哪里呢?
這么多問(wèn)題?
首選，通過(guò)對(duì)比可以發(fā)現(xiàn)：
- 該標(biāo)準(zhǔn)命名與現(xiàn)有開(kāi)源方案沖突
- 標(biāo)準(zhǔn)的語(yǔ)法與現(xiàn)有開(kāi)源方案語(yǔ)法相同
第一點(diǎn)，假設(shè)在未來(lái)一個(gè)初學(xué)者搜索CSS Modules，那么結(jié)果可能會(huì)讓他困惑，我搜到的是誰(shuí)?
第二點(diǎn)，當(dāng)前各大打包工具都有對(duì)開(kāi)源CSS Modules方案的支持。
如果未來(lái)需要實(shí)現(xiàn)Native CSS Modules的polyfill，輕則造成重復(fù)工作、重則遇到兩種方案更迭造成的混亂(想想社區(qū)從CJS過(guò)渡到ES Modules遇到多少問(wèn)題)。
除此之外，該方案可能對(duì)SSR不友好。
并且，由于Native CSS Modules需要在所屬JS模塊加載后再異步加載，可能會(huì)產(chǎn)生很多碎片化的CSS文件請(qǐng)求。
在有如此多潛在問(wèn)題的情況下，「Justin Fagnani」仍積極推進(jìn)該標(biāo)準(zhǔn)的落地，可能這就是尤大認(rèn)為對(duì)方「傲慢」的原因吧。
你可以在討論1[2]與討論2[3]看到雙方完整的討論
總結(jié)
新的標(biāo)準(zhǔn)，既要在原有基礎(chǔ)上有所突破，又受限于現(xiàn)狀不能大刀闊斧改變。
這種突破與權(quán)衡的博弈每時(shí)每刻都是開(kāi)源的世界上演。
參考資料
[1]Constructable Stylesheets:
https://developers.google.com/web/updates/2019/02/constructable-stylesheets[2]
討論1:
https://twitter.com/justinfagnani/status/1403495082506866690[3]
討論2:
https://twitter.com/Joelbdenning/status/1427427564532887565
