CSS选择器的命名
CSS 选择器的命名问题是最常困扰开发者的事情之一。究竟是面向 CSS 属性命名,还是面向 HTML 语义命名?是使用长命名,还是使用短命名?
# CSS选择器是否区分大小写
在HTML 中,标签和属性都是不区分大小写的,而属性值是区分大小写的。于是,相对应地,在 CSS 中,标签选择器不区分大小写,属性选择器中的属性也不区分大小写,而类选择器和ID 选择器本质上是属性值,因此要区分大小写。
选择器类型 | 示例 | 是否对大小写敏感 |
---|---|---|
标签选择器 | div { } | 不敏感 |
属性选择器-纯属性 | [attr] | 不敏感 |
属性选择器 | [attr=val] | 属性值敏感 |
类选择器 | .container { } | 敏感 |
ID选择器 | #container { } | 敏感 |
在属性选择器的 ]
前加一个 i
,可使属性值也不区分大小写。所以已经没有严格意义上的对大小写敏感的选择器了,因为类选择器和 ID选择器本质上也是属性选择器,因此,如果希望 HTML 中的类名对大小写不敏感,可以这样:
[class~="val" i] {}
[id~="ID" i] {}
2
# CSS选择器命名的合法性
类选择器和ID选择器不能直接以数字开头,需将其转义。
/*\31 或者\00031转义成1*/
.\31 -foo { border: 10px dashed; padding: 10px; }
.\000031-foo { border: 10px dashed; padding: 10px; }
2
3
根据规范,首字符支持的字符类型是 a~z、A~Z、下划线( 以及非 ASCII 字符 (中文全角字符等),后面的字符支持的字符类型是 a~z、A~Z、0~9、下划线( )、短横线(-)以及非 ASCII字符,后面的字符支持的字符类型多了数字和短横线。
对于其它不合法的字符可以进行转义,如
.\+foo {color:red; }
.\|foo {color:red; }
.\:foo {color:red; }
2
3
而中文字符、中文标点、Emoji表情同样有效
.我是foo {color:red; }
.。foo {color:red; }
.😀{color:red; }
2
3
直接以短横线开头,如果是一根短横线 (-
),那么短横线后面必须有其他字符、字母或下划线或者其他编码字符:如果是连续两根短横线 (--
),则它的后面不跟任何字符也是合法的。
.-- { color: red; }/*有效 */
.-a-b- { color: red;} /*有效 */
2
# CSS选择器的命名是一个哲学问题
# 长命名还是短命名
CSS 选择器的语义和 HTML 的语义是不一样的,前者只是为了方便人的识别,它对于机器而言没有任何区别,因此价值很弱;但是 HTML 的语义的重要作用是让机器识别,如搜索引擎或者屏幕阅读器等,它是与用户体验与产品价值密切相关的。
使用短命名足矣。
# 单命名还是组合命名
对于多人合作、长期维护的项目,不要出现下面这些以常见单词命名的单命名选择器,因为后期非常容易出现命名冲突的问题,即使你的项目不会引入第三方的 CSS,可以使用前缀保护以来
.title {} /*不建议*/ .text {} /*不建议*/ .box {} /*不建议*/ .dialog-title {} .ajax-error-text {} .upload-box {}
1
2
3
4
5
6
7如果项目使用第三方的 UI 组件,就算是全站公用的 CSS,也不要出现下面这样的单命名,因为说不定下面的命名就会与第三方 CSS 发生冲突,建议统一加前缀。
.header {} /*不建议*/ .main {} /*不建议*/ .aside {} /*不建议*/ .warning {} /*不建议*/ .success {} /*不建议*/ .red {} /*不建议*/ .green {} /*不建议*/ .cs-header {} .cs-main {} .cs-aside {}
1
2
3
4
5
6
7
8
9
10
11如果项目百分百独立自主研发,以后维护此项目的人也不会盗取别人的 CSS 来充数,则与网站公用结构、颜色相关的这些 CSS 可以使用单命名。
如果项目并不需要长期维护,也不需要多人合作,务必添加统一的项目前缀,因为某些功能和效果日后会被复用,有了统一的前缀,日后直接复制代码就能使用,没有后顾之忧。
基于CSS属性构建的单命名反而更加安全,如:
.db { display: block; } .tc { text-align: center; } .m120 { margin-left: 20px; } .vt { vertical-align: top; }
1
2
3
4
# 面向属性的命名和面向语义的命名
优点 | 缺点 | |
---|---|---|
面向属性的命名 | 重用性高,方便快捷 | 适用场景有限 |
面向语义的命名 | 灵活丰富,应用场景广泛 | 代码笨重,效率一般 |
# 最佳实践
命名书写
(1)命名使用小写,使用英文单词或缩写,对于专有名词使用拼音。不建议使用驼峰命名,驼峰命名建议专门给 JavaScript DOM 用,以便和CSS样式类名区分开。
(2)对于组合命名,可以短横线或下划线连接,可以组合使用短横线和下划线,也可以连续短横线或下划线连接,任何方式都可以,只要在项目中保持一致就可以。
(3)设置统一前缀,强化品牌同时避免样式冲突。
选择器类型
CSS样式的重置可以使用标签选择器或者属性选择器等。
极致与权衡
对极致代码的追求无可厚非,但物极必反,一味追求完美无瑕的代码,说不定会带来另外的成本提升,作为一个成熟的职业的开发人员,要学会适当抛弃代码层面的自我满足,学会站在利益的角度权衡出最好的实践。

