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