被尤大diss的Native|被尤大diss的Native CSS Modules是什么
【被尤大diss的Native|被尤大diss的Native CSS Modules是什么】大家好，我是卡颂。
昨天早上正吃着早饭，唱着歌，开开心心摸鱼时，看到一条尤大的推文：
文章图片
尤：老实说，我认为
Native CSS Modules标准是仓促的，再次显示了参与该标准制定过程的人的傲慢
经常看尤大和其他大佬们交流技术，仓促、傲慢这样的字眼是很少看到的。今天我们来看看是什么样的标准，让尤大都忍不住
diss。
文章图片
此CSS Modules非彼Modules 想必做前端的同学对
CSS Modules不会陌生，这里简单介绍下。
文章图片
CSS Modules是一套开源的规范，用以解决CSS的以下问题：- 命名冲突
- 没有模块化
- 依赖关系不明（样式覆盖问题）
我们用一个例子来简要了解他的实现细节：
将
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;
}这样，就产生了独一无二的
class，解决了CSS模块化的问题。而今天的主角，并非这位
CSS Modules。
文章图片
Native CSS Modules 今年6月，谷歌工程师Justin Fagnani在推上公布了
CSS Modules的最新进展：
文章图片
此
CSS Modules并非上文提到的开源方案，而是ES Modules标准下的一个标准。该标准实际名称为
CSS Module Scripts，但社区习惯称其为CSS Modules。为了与开源方案区别，下文称其为
Native CSS Modules。该标准用来在
JS中导入CSS，语法类似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" };
导入的
CSS可以应用于document对象或shadow DOM。导入的
styleSheet数据结构如下：
文章图片
配合Constructable Stylesheets特性，可以解决
CSS：- 在多个
shadow DOM之间复用 FOUC问题（Flash of Unstyled Content，即由于样式未加载完导致DOM样式从无到有的闪烁情况）
nice，那么尤大diss的点在哪里呢？
文章图片
这么多问题？ 首选，通过对比可以发现：
- 该标准命名与现有开源方案冲突
- 标准的语法与现有开源方案语法相同
CSS Modules，那么结果可能会让他困惑，我搜到的是谁？
文章图片
第二点，当前各大打包工具都有对开源
CSS Modules方案的支持。如果未来需要实现
Native CSS Modules的polyfill，轻则造成重复工作、重则遇到两种方案更迭造成的混乱（想想社区从CJS过渡到ES Modules遇到多少问题）。
文章图片
除此之外，该方案可能对
SSR不友好。并且，由于
Native CSS Modules需要在所属JS模块加载后再异步加载，可能会产生很多碎片化的CSS文件请求。
文章图片
在有如此多潜在问题的情况下，Justin Fagnani仍积极推进该标准的落地，可能这就是尤大认为对方傲慢的原因吧。
你可以在 讨论1与 讨论2看到双方完整的讨论总结 新的标准，既要在原有基础上有所突破，又受限于现状不能大刀阔斧改变。
这种突破与权衡的博弈每时每刻都是开源的世界上演。
在开发中你有遇到什么特别喜欢或特别想吐槽的特性吗？欢迎评论区讨论～
推荐阅读
- 科学养胃，别被忽悠，其实真的很简单
- 被新冠“病毒”感染的日常生活（八）
- 过年瞎想
- 【读书清单20】写作吧！你值得被看见(2)
- 罗塞塔石碑的意义（古埃及文字的起源，圣书体文字是如何被破解的）
- 【Thesewt】蒙昧（续）
- https请求被提早撤回
- 为什么文章被4个专题收录了阅读量却是个位数（）
- 陷入父母的心理战，孩子被彻底打败
- 国家宝藏观后有感