被尤雨溪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 (<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
今年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[1]特性,可以解决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]与讨论2[3]看到双方完整的讨论
总结
新的标准,既要在原有基础上有所突破,又受限于现状不能大刀阔斧改变。
这种突破与权衡的博弈每时每刻都是开源的世界上演。
在开发中你有遇到什么特别喜欢或特别想吐槽的特性吗?欢迎评论区讨论~
参考资料
[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
被尤雨溪diss的Native CSS Modules是什么相关推荐
- 【译】听尤雨溪聊:下一代前端构建工具 ViteJS 中英双语字幕
原视频地址:Next generation frontend tooling with ViteJS ✨ Open Source Friday ✨[1] 中英文字幕视频地址(B站):[译]下一代前端工 ...
- 掘金 AMA:听 Vue.js 作者--尤雨溪谈 Vue.js 独立开发 设计那些事
第七期 沸点,掘金团队请来了Vue.js 的作者,全职独立开源开发者尤雨溪做了为期三天的 Ask Me Anything (AMA) 活动(已结束). 我们在此精选了一些来自用户的提问及尤小右(尤雨溪 ...
- 尤雨溪:下一代前端构建工具 ViteJS 技术解读
作者:@清秋 https://juejin.cn/post/6937176680251424775 Vite 作者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上做客 GitHub O ...
- 看完尤雨溪338条知乎回答后,我突然找到了前进的方向
1.想要最大化创造价值,最重要的是两点.第一,会发现问题,并且判断出什么问题值得解决.第二,具备高质量解决某个领域问题的技术水准. 2.为什么程序员不自己单干?可以啊,那些说难的,就是能力不够罢了(不 ...
- Vue 作者尤雨溪:以匠人的态度不断打磨完善 Vue
本文仅用于学习和交流目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈对象 尤雨溪,Vue.js 创作者,Vue Tech ...
- Vue 2.0的建议学习顺序(尤雨溪)
起步 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的script,把教程里的例子模仿一遍,理 ...
- 尤雨溪:重头来过的 Vue3 带来了什么?
作者:尤雨溪,翻译:CSDN 英文原文:https://increment.com/frontend/making-Vue-3/ 在过去的一年里,Vue 团队一直在开发 Vue.js 的下一个主要版本 ...
- 尤雨溪:重头来过的 Vue 3 带来了什么?
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 尤雨溪 译者 | 苏本如,责编 | 屠敏 出品 ...
- 尤雨溪:Vue Function-based API RFC
(给前端大全加星标,提升前端技能) 作者:尤雨溪 https://zhuanlan.zhihu.com/p/68477600 概要 将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计. ...
最新文章
- 【青少年编程】【一级】 奔跑的马
- Python代码提取时间序列特征基于tsfeature
- android倒角按钮,Android实现圆角Button按钮
- 浅谈bash shell的种类以及linux系统中的profile和bashrc配置文件
- 对话jQuery之父John Resig:JavaScript的开发之路
- 国家开放大学2021春1474临床医学概论(本)题目
- Linq 学习笔记(二)
- jQuery UI应用--滑块Slider
- docker下创建crontab定时任务失败
- Java多线程:用三个线程控制循环输出10次ABC
- gfdgdfgdfg
- 微积分总结(数列与无穷级数)
- 【OpenGrok代码搜索引擎】四、OpenGrok使用指南
- Data Structure - Pairing Heap (Java)
- 了解Apache实木复合地板
- 计算机管理恢复分区,windows10系统隐藏恢复分区Recovery Image的方法
- FPGA基础知识极简教程(10)二进制到BCD转换算法
- [递归+访问者模式]实现树状结构的节点遍历处理
- 安装 Unity 个人免费版
- 评价win10自带输入法——微软拼音输入法
热门文章
- STM32F103c8t6的外部触发(ETR)引脚
- Sherlock and Cost
- 来自同济子豪兄的无私分享-关于YOLOv1模型的学习(一)
- RIST 和 SRT 概述:选择什么以及为什么
- 停摆里再陷亏损,猫眼苦等春天
- Individual tree detection and estimation of stem attributes with mobile laser scanning along boreal
- 论文解读:SentiPrompt: Sentiment Knowledge Enhanced Prompt-Tuning for Aspect-Based Sentiment Analysis
- [第一讲]DSP28335将Flash中的代码拷贝到RAM中运行
- 打印机无法打印-常见故障总结
- win7系统下安装win10实现双系统安装教程