2022-01-19 22:28 深圳大学机械设计/制造

关注

CSS选择器的命名是一个哲学问题

如果你正在参与的是一个独自开发、页面简单且上线几天就寿终正寝的小项目，则你可以完全放飞自我，CSS 选择器可以随便命名，中文、 emoji 字符、各种高级选择器都可以用起来。但是，如果你正在开发多人协作，需要不断迭代、不断维护的项目，则一定要谨慎设计，考虑周全，以职业的态度面对命名这件事情。

自然，开发人员并不傻，也知道对于有些项目要尽心尽力，他们会发挥出自己的巅峰实力，项目上线后也自我感觉良好。但那些自我感觉良好的开发人员写的 CSS 代码实际上往往质量堪忧，但开发人员却压根没意识到这个问题，最典型的就是 CSS 命名的设计很糟糕，他们早已经埋下巨大的隐患却浑然不知。

这样的现象太多了，真的太多了。正因为如此，我觉得有必要好好和大家聊聊 CSS 选择器命名的问题，先把选择器的 CSS 代码质量给提升上去。

CSS选择器的命名是一个哲学问题

1.长命名还是短命名

对于使用长命名还是短命名的问题，我的回答是使用短命名。例如，一段介绍，类名可以这样：

.some-intro { line-Height＜/span>: 1.75; }

而没必要这样：

.some-introduction { line-Height＜/span>: 1.75; }

虽然这样做使语义更加准确了，也确实有一定价值，但价值很有限。要知道，日后维护代码时，人们只会关心这个类名有没有在其他地方使用过？改变、删除这个类名会不会出现问题？至于语义，人们真的不关心。

CSS 选择器的语义和 HTML 的语义是不一样的，前者只是为了方便人的识别，它对于机器而言没有任何区别，因此价值很弱；但是 HTML 的语义的重要作用是让机器识别，如搜索引擎或者屏幕阅读器等，它是与用户体验与产品价值密切相关的。

因此，请使用短命名，足矣！一旦习惯，或者约定俗成，完全不影响阅读，就好比

标签是 paragraph 的简写，语义表示段落一样。

CSS选择器的命名是一个哲学问题

2.单命名还是组合命名

单命名的优点是字符少、书写快，缺点是容易出现命名冲突的问题；组合命名的优点是不容易出现命名冲突，但写起来比较繁琐。样式冲突的性质比书写快慢严重的多，因此，理论上推荐使用组合命名，但在实际开发中，项目追求的往往是效益最大化，而不是完美的艺术品。因此，具体该如何取舍，不能一概而论，只能从经验层面进行阐述。

2.1 多人合作、长期维护的项目

对于多人合作、长期维护的项目，千万不要出现下面这些以常见单词命名选择器，因为后期非常容易出现命名冲突的问题，即使你的项目不会引入第三方 CSS：

.dark { color: #4c5161; }

{ color: #f4615c; }

.gray { color: #a2a29b6; }

这几个命名是出现频率最高的，一定要使用另外的前缀组合将它们保护起来，这个前缀可以是模块名，或者场景名称，例如：

.cs-header {}

.cs-main {}

.cs-aside {}

...

2.2 项目会使用第三方UI组件

如果你的项目会使用第三方 UI 组件，就算是全站公用的 CSS，也不要出现下面这样的单命名：

.cs-title {}

.cs-text {}

.cs-box {}

正确的做法是加一个统一的前缀，使用组合命名的方式。你可以随意命名这个前缀，可以是项目代号的英文缩写，也可以是产品名称的拼音首字母，因为这个前缀的作用是避免冲突，它并不需要任何语义。但需要注意的是前缀最好不要超出 4 个字母，因为字母多了完全没有任何意义，只会徒增 CSS 文件大小。例如，”CSS 选择器“的英文是 CSS Selector，我就可以取 CSS 的首字母 C 和 Selector 的首字母 S 作为选择器的前缀类名，于是有：

.cs-header {}

.cs-main {}

.cs-aside {}

...

如果你认真观察所有的开源的 UI 框架，会发现其 CSS 样式都有一个一致的前缀，因为这样做会避免发生冲突，我们自己开发项目的时候也要秉承这一理念。

3.2 100%自主研发的项目

如果你的项目百分之百是自主研发的，以后维护此项目的人也不会盗取别人的 CSS 来充数，则与网站公用结构、颜色相关的这些 CSS 可以使用单命名，例如：

.db { display:block; }

.tc { text-align: center; }

.ml20 { margin-left: 20px; }

.vt { vertical-align: top; }

但对于非共用内容，如标题（.title）、盒子（.box）等就不能使用单命名，因为颜色这类样式是贯穿整个项目的，具有高度一致性，而标题（.title）会在很多地方出现，且样式各不相同，如大标题、小标题、弹框标题、模块标题等，容易产生命名冲突。

对于网站 UI 组件，各个业务模块一定要采用多名称的组合命名方式，且最好都有一个统一的命名前缀。

3.4 不需要长期维护、多人合作的项目

如果你的项目并不需要多人合作长期维护，例如，只是一些运营活动，请务必添加统一的项目前缀，这都是过来人的忠告，因为这词活动的某些功能和效果日后会被复用，有了统一的前缀，日后直接复制代码就能使用，没有后顾之忧，大家都开心，例如：

.db { display:block; }

.tc { text-align: center; }

.ml20 { margin-left: 20px; }

.vt { vertical-align: top; }

但有一类基于 CSS 属性构建的单命名方位更加安全，他们比颜色这类命名还要安全，即使项目会引入外部 CSS：

.db { display:block; }

.tc { text-align: center; }

.ml20 { margin-left: 20px; }

.vt { vertical-align: top; }

这种方式的命名更安全的原因是：

这些选择器命名是面向 CSS 属性的，它们是超越具体项目的存在，只会被重复定义，但不会发生样式冲突。面向 CSS 属性的命名是机械的、反直觉的，而面向语义的命名符合人类的直觉，也就是说，对于一个标题，将它命名位 title 的人很多，但抛弃语义，直接使用 tc 的命名的人却寥寥无几。更直白一点，从网上随机找两个 CSS 文件，其中 title 命名的冲突率要比 tc 大好几个数量级。

如此短的命名反而不会产生冲突，这是我10年来写过无数CSS所得出的结论，当然，我们最好还是尽可能的降低冲突出现的呃概率，这样心理也踏实：

.g-db { display:block; }

.g-tc { text-align: center; }

.g-ml20 { margin-left: 20px; }

.g-vt { vertical-align: top; }

或者连前缀也一并省掉：

.-db { display:block; }

.-tc { text-align: center; }

.-ml20 { margin-left: 20px; }

.-vt { vertical-align: top; }

这样，一眼就能辩识这个类名是基于 CSS 属性创建的。

总结：除了多人合作、长期维护、不会引入第三方 CSS 的项目的全栈公用样式可以使用单命名，其他场景都需要组合命名。