视频会议未来三大趋势

1. 全局命名空间
2. 依赖
3. 无用代码消除
4. 代码压缩
5. 共享常量
6. 非确定性(Non-Deterministic)解析
7. 隔离

实用工具/原子 CSS 也解决了其中的一些问题，但也确实没法解决所有问题(特别是样式的非确定性解析)。

如果它们有很多相似之处，那我们能否同时使用它们呢?

探索原子 CSS-in-JS

原子 CSS-in-JS 可以被视为是“自动化的原子 CSS”：

• 你不再需要创建一个 class 类名约定
• 通用样式和一次性样式的处理方式是一样的
• 能够提取页面所需要的的关键 CSS，并进行代码拆分
• 有机会修复 JS 中 CSS 规则插入顺序的问题

我想强调两个特定的解决方案，它们最近推动了两个大规模的原子 CSS-in-JS 的部署使用，来源于以下两个演讲。

• React-Native-Web at Twitter (更多细节在Nicolas Gallagher 的演讲[8])。
• Stylex at Facebook (更多细节在Frank Yan 的演讲[9])。

也可以看看这些库：

• Styletron
• Fela
• Style-Sheet
• cxs
• otion
• css-zero
• ui-box
• style9
• stitches
• catom

React-Native-Web

React-Native-Web 是一个非常有趣的库，让浏览器也可以渲染 React-Native 原语。不过我们这里并不讨论跨平台开发(演讲里有更多细节)。

作为 web 开发人员，你只需要理解 React-Native-Web 是一个常规的 CSS-in-JS 库，它自带一些原始的 React 组件。所有你写 View 组件的地方，都可以用 div 替换。

React-Native-Web 的作者是 Nicolas Gallagher，他致力于开发 Twitter 移动版。他们逐渐把它部署到移动设备上，不太确定具体时间，大概在 2017/2018 年左右。

从那以后，很多公司都在用它(美国职业足球大联盟、Flipkart、Uber、纽约时报……)，但最重要的一次部署，则是由 Paul Armstrong 领导的团队在 2019 年推出的新的 Twitter 桌面应用。

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!