日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
被尤雨溪diss的NativeCSSModules是什么

大家好，我是卡頌。

昨天早上正吃著早飯，唱著歌，開(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)?？从却蠛推渌罄袀兘涣骷夹g(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)有模塊化
  • 依賴關(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：

 
 
 
 
    
  
  
  
  
  1. import style from './style.css'; 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. export default () => { 
    4. 
  
  
  
  
  4.   return ( 
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.       I am KaSong. 
    7. 
  
  
  
  
  7.     
     
    8. 
  
  
  
  
  8.   ); 
    9. 
  
  
  
  
  9. }; 
    10.

 對(duì)應(yīng)style.css：

 
 
 
 
    
  
  
  
  
  1. .title { 
    2. 
  
  
  
  
  2.   color: red; 
    3. 
  
  
  
  
  3. } 
    4.

打包工具會(huì)將style.title編譯為「帶哈希的字符串」：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   Hello World 
    3. 
  
  
  
  
  3.  
    4.

同時(shí)style.css也會(huì)編譯：

 
 
 
 
    
  
  
  
  
  1. ._3zyde4l1yATCOkgn-DBWEL { 
    2. 
  
  
  
  
  2.   color: red; 
    3. 
  
  
  
  
  3. } 
    4.

這樣，就產(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í)際名稱為CSS Module Scripts，但社區(qū)習(xí)慣稱其為CSS Modules。

為了與開(kāi)源方案區(qū)別，下文稱其為Native CSS Modules。

該標(biāo)準(zhǔn)用來(lái)在JS中導(dǎo)入CSS，語(yǔ)法類似ES Modules：

 
 
 
 
    
  
  
  
  
  1. // ES Modules 
    2. 
  
  
  
  
  2. import React from "https://cdn.skypack.dev/react@17.0.1"; 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // Native CSS Modules 
    5. 
  
  
  
  
  5. import styleSheet from "./styles.css" assert { type: "css" }; 
    6.

導(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


當(dāng)前名稱：被尤雨溪diss的NativeCSSModules是什么
轉(zhuǎn)載來(lái)于：http://www.5511xx.com/article/dppsdgj.html