Web 技术研究所

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

两种 CSS 模块命名方式

  模块化 CSS 时经常需要对一个元素设置一个主类和多个从类,这样可以便于维护。但是具体如何区分主类和从类又有不同的做法,比如有些 UI 框架中会用主类的名称作为从类的前缀,比如主类「btn」从类「btn-error」。或者另一种写法直接「btn」和「error」。

主类前缀式

  Bootstrap 貌似就是这么用的,在选择器中也只要分别写.btn.btn-error即可设置样式。所以它使用了更少的选择器,如果说性能的话是有优势的(具体有多少优势我没做过测试,理论上如此)。但是由于它是前缀模式,如果前缀长的话会使文档阅读起来不方便。上面的例子中「btn」仅 3 个字母,实际上长的类名很容易超过 10 个字母,这样重复写一次甚至多次就麻烦了。 <div class="btn btn-error"></div>
<style>
.btn {}
.btn-error {}
</style>

双类选择式

  另一种方式是直接使用两个类选择器,具体的主类和从类从词性上区分。比如主类全用名词或名词性词组,从类只用形容词或副词。这种方式在 CSS 中需要更多的选择器,比如上面的例子需要写成.btn.btn.erroneous,这里就有三个类选择器,理论上性能是不如前面的方法的。但它不产生冗余的前缀,所以阅读会比较省力(也许这个例子中 erroneous 这个词确实有点太长了)。 <div class="btn erroneous"></div>
<style>
.btn {}
.btn.erroneous {}
</style>
  这种方式也有一个致命的问题,如果考虑兼容 IE6 的话确实没法用。如果我没记错的话是从 IE7 才开始支持多类选择器的。

个人倾向

  我个人是比较喜欢「双类选择式」的,因为我总是希望命名在词法上更准确,即使使用前缀模式我可能也会用「erroneous」、「successful」等词汇,而不是直接使用名词或动词。我比起长单词,我更怕各种无法一眼就看出意思的缩写。至于性能,我确实没做过测试,不过目前还没有遇到过标准 CSS 选择器性能方面的问题(IE 滤镜的性能坑倒是踩过)。

网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^