CSS 选择器命名规范

2019-1-18 21:29| 作者: admin| 查看: 737| 评论: 0|来自: 蚂蚁部落

良好的选择器命名能够给团队合作和后期维护带来便利。

对于大型项目尤其重要,可以在庞大繁杂的代码中,将元素的一些相关信息传达给开发人员。

本文将由浅入深分享一下比较科学的CSS选择器命名规范。

一.选择器名称的构成:

首先强调一下,本文所介绍的命名规范,是最佳实践,而不是标准的约束,没有强制性。

选择器名称推荐由如下成分构成:

(1).尽量使用英文字符。

(2).一律采用小写形式。

(3).可以使用英文单词的缩写,但是必须是通用的缩写形式,不要自己随意创造。

(4).如果名称由多个单词(或者缩写)构成,使用中划线连接,不推荐使用下划线。

二.具体命名规则:

比如,一个项目中有大量input元素的应用,良好的选择器命名,可以很容易识别出对应元素的功能。

看如下代码实例:

[CSS] 纯文本查看 复制代码
.input-pw-login{
}

上述代码中,可以通过选择器很轻松的识别出对应的input元素是登录密码框。

CSS选择器名称构成:

[CSS] 纯文本查看 复制代码
[ 模块前缀 ] - 类型 - ( 作用 | 状态 ) n-[ 位置  ]n

首先介绍一下上述规则中特殊符号的意义:

(1).[]:中括号表示内容可选。

(2).-:中划线表示名称的连字符。

(3).():小括号表示内容是必须的。

(4).|:竖线表示两侧的内容任选其一。

(5).n:表示前面的内容可以有多个。

具体构成内容解析:

(1).模块前缀:页面模块的命名。

(2).类型 :当前元素的类型,比如input类型。

(3).作用:补充此元素充当的角色。

(4).状态 :补充此元素当前的状态,比如可用、不可用或者警告灯。

(5).位置:选择器应用的位置。

本文所指的模块就是页面中一个功能区域,比如登陆区域,头部区域,导航区域等。

下面举一个例子,深化一下理解,假设我们有一个将要应用于detail页面的搜索框,分解如下:

(1).input类型文本框,那么以.input起始。

(2).用于搜索功能,于是再加上作用,.input-search。

(3).应用于detail页面,于是再加上位置,.input-search-detail。

三.最后强调说明:

上面的选择器命名规范只是一家之言,没必要完全遵守。

最好的规范就是自己活着团队用着顺手,便于开发,可以根据上面的规范进行自己的改进。

网上有很多对于模块等比较通用的命名推荐,本文不再介绍,可以自己查询一下,然后按照上述规范组合。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部