被尤大 diss 的 Native CSS Modules 是什么
SegmentFault
共 2286字,需浏览 5分钟
·
2021-08-21 09:26
作者:卡颂
来源:SegmentFault 思否社区
大家好,我是卡颂。
昨天早上正吃着早饭,唱着歌,开开心心摸鱼时,看到一条尤大的推文:
尤:老实说,我认为 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 (
<p className={style.title}>
I am KaSong.
</p>
);
};
style.css
:.title {
color: red;
}
style.title
编译为带哈希的字符串:<h1 class="_3zyde4l1yATCOkgn-DBWEL">
Hello World
</h1>
style.css
也会编译:._3zyde4l1yATCOkgn-DBWEL {
color: red;
}
class
,解决了CSS
模块化的问题。CSS Modules
。Native CSS Modules
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
数据结构如下: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
文件请求。总结
评论