Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

从 CSS 模块化问题聊起

  对于 Web 模块话的问题我之前貌似也有零碎地扯过一些。JavaScript 有各种模块化标准可以用,HTML 片段本身可以是上下文无关的,随时都可以模块化。我们的阻碍在于 CSS。虽然 Web Components 对 CSS 打包有一点贡献,但它的实现与规范本身都有各种问题。
  CSS 是上下文有关的,各个规则之间都在互相影响。当页面上的 CSS 规则越来越多时,每增加一条规则的影响就可能就越大。这不仅影响性能,还增加了阅读和维护成本。
  这个问题让我想到了另一个类似的。以前在使用贝塞尔曲线绘制复杂平滑曲线的时候我就觉得操蛋,因为贝塞尔曲线的任何一个控制点变化都会影响到整条曲线。对于平滑曲线这种东西,最佳绘制方案应该是分段的样条差值。因为分段后每个顶点只会影响到相邻的若干个区间,这大大降低了计算成本,还使得曲线更容易控制(我貌似举了一个比原概念更难理解的例子 = =||,然而懂的人瞬间就能心领神会)。
  Web 模块化就是在降低每个模块对环境的影响。如果每个模块只和直接相邻(父级、同级、子级)的几个模块有耦合,那么整个工程的维护成本就会大大降低。至少我们不必有牵一发而动全身的担心,这就相当于把原来复杂的高次差值转换成分段低次差值来处理。在我看来,模块相当于 lambda 表达式这样的东西,它可能连名字都没有,只是划出了别人不可侵犯的领域而已。
  但是话又说回来,JavaScript 和 HTML 部分都很容易模块化。CSS 怎么办?如何才能把一个 CSS 片段不受影响的抽离出来?这问题就大了!首先 CSS 一定要基于文档,因为 CSS 本身也只是用来修饰文档的东西。单独拿 CSS 说是没有任何意义的,比如我写个 body { color: red; } 单独拿出来是什么意思?也许有人会回答这是在将文字设置为红色。然而如果我的文档根本没有 body 这个元素呢?(CSS 可以用于非 HTML 文档)所以单独拿出这条规则是完全没意义的。那就意味着有一个 CSS 与 HTML 的直接耦合是无法避免的。
  除了上面这个坑之外,还有 CSS 隔离的坑。如何完美地隔离两个 CSS?对于这个问题,我现在想到的答案和我 5 年前想到的答案完全一样。那就是 IFRAME。只有当文档都不同的时候 CSS 才可能完全被隔离。什么 scoped、Shadow DOM 简直弱爆,因为总是有人希望持有全局样式配置权限,所以后来的规范中总是保留了全局样式配置。目前除了 IFRAME 外我已经想不到任何可以完美隔离 CSS 的方法了。
  纠结了一大圈,现在来说说重点。虽然 Web Components 确实有点卵用,虽然和 polymer 更配。但碍于兼容性问题,我觉得我等不到 Web Components 普及了。规范能推出更好的方案当然是极好的,但是要是等规范更新那就是坐以待毙。我觉得在规范之外,通过一个集成了 CSS 模块化的开发环境来解决模块化的问题也许也是一个可行的方向(webpack 就是,但实现简直呵呵哒,而且难用到爆)。我觉得 Polymer 的思想是对的,不要试图对 JS、CSS、HTML 单独做模块化,那只会让世界变得更混乱。要三粒在一起才最好嘛!
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^