Web 技术研究所

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

使用属性选择器代替 class

  一直以来我们都认为 css 和 html 中的 class 才是最配的。但用久了就会发现,其实 class 就是全局变量,如果大家都用 class 就像一个项目中大家都在用全局变量一样,会被各种命名冲突样式干扰坑成狗。加命名空间是正确的发展方向,但是我觉得只在 css 中加命名空间简直弱爆。
  说起 css 的命名空间问题,其实只要项目足够大、开发人员达到一定数量时就会遇到。所以我以前就搞了一套css 模块化命名来试着解决这个问题。如果一个项目中大家都遵循这个规则,确实可以解决问题。但问题是项目中可能使用第三方的东西,这些第三方的东西并不会遵循我们的规则。所以要完全把一套命名规范用起来,除非完全不使用第三方的东西。
  当我自己在写一个通用组件时就会想,在组件中使用的 class 会不会和别人项目中的 class 冲突?或者如何避免使用 class?于是就冒出了完全使用属性选择器不使用 class 的想法。其实去年在做一些基于 react 的项目中就使用了 data-reactid 来做命名空间。整个项目全是 data-reactid 的属性选择器,完全没有没有 class。搞完那个神奇的项目之后我得到的结论是,组件完全无 class 化是可行的。
  我只是觉得使用属性选择可以有效避免冲突,至于如何使用目前还没有规范,就不细扯了。但无论如何,如果我的所有组件都用属性选择器,别人引入我的组件,就相对安全。至少我的组件不会影响到项目中的其它样式。
  然而有人可能会觉得,属性选择器存在性能问题?确实!属性选择器比 class 选择器慢,这是事实。但我也说过谈选择器性能简直是耍流氓,因为这点性能差异根本就不值得一提。
  最好还有一些更丧心病狂的思考。虽然我的组件影响到别人,但别人如果使用后代选择器做元素查询就会影响到我。所以如果不是属性选择,而是用自定义元素就可以避免上面所说的情况。但是通配匹配之类的确实依然会有影响,而且自定义标签会导致语义丧失,而且写起来不太方便面。
  到底要怎么玩,玩到什么程度,大家开心就好。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^