class命名规则

水深无声 2022-08-09 12:47 208阅读 0赞

### 常见class关键词： ###

*   布局类：header, footer, container, main, content, aside, page, section
 *   包裹类：wrap, inner
 *   区块类：region, block, box
 *   结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
 *   列表类：list, item, field
 *   主次类：primary, secondary, sub, minor
 *   大小类：s, m, l, xl, large, small
 *   状态类：active, current, checked, hover, fail, success, warn, error, on, off
 *   导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
 *   交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
 *   星级类：rate, star
 *   分割类：group, seperate, divider
 *   等分类：full, half, third, quarter
 *   表格类：table, tr, td, cell, row
 *   图片类：img, thumbnail, original, album, gallery
 *   语言类：cn, en
 *   论坛类：forum, bbs, topic, post
 *   方向类：up, down, left, right
 *   其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

有了关键词之后，我们先来制定一些简单的规则

### 制定简单规则： ###

*   以中划线连接，如`.item-img`
 *   使用两个中划线表示特殊化，如`.item-img.item-img--small`表示在`.item-img`的基础上特殊化
 *   状态类直接使用单词，参考上面的关键词，如`.active, .checked`
 *   图标以`icon-`为前缀（字体图标采用`.icon-font.i-name`方式命名）。
 *   模块采用关键词命名，如`.slide, .modal, .tips, .tabs`，特殊化采用上面两个中划线表示，如`.imgslide--full, .modal--pay, .tips--up, .tabs--simple`
 *   js操作的类统一加上`js-`前缀
 *   不要超过四个class组合使用，如`.a.b.c.d`

关键词及规则都有了，现在可以进入本文的核心的核心，实战操作。

### 实战操作 ###

以布局入手，大概结构如下：

header.header>.inner-center section.section-feature>.inner-center // if section.section-main>.inner-center section.section-postscript>.inner-center // if footer.footer>.inner-center

具体可参考[HTML整站结构设计][HTML]，这里我们可以看出都是些简单的关键词，比较好理解，一看就知道是什么。

现在问题来了，如果其他地方也要用到这些关键词怎么办？

修饰关键词

以header为例，我们可以添加前缀表示不同的header，如区块头部`.block-hd`(hd为header简写)，modal头部`.modal-hd`，文章头部`.article-hd`。

同样标题也可以分为，页面标题`.page-tt`(title的简写)，区块标题`.block-tt`等。

同样，这给我们提出了第二个问题，如果要特殊化某个class该怎么办？

特殊化class

以上面的tt为例，大概有三种办法：

第一种办法：直接修改class，将`.page-tt`修改成`.page-user-tt`(可以采用scss的`%`先定义共用的代码)。

第二种办法： 追加class特殊化，根据我们上面定义的规则，在`.page-tt`上追加一个class成为`.page-tt.page-tt--user`，注意`.page-tt--user`不是一个独立的class，它使基于`.page-tt`这个基础上的。

第三种办法： 使用父类，给一个范围，于是形成`.page-user .page-tt`。

一般我们使用的是第二种和第三种办法，因为这两种都有共同的`.page-tt`，可以比较方便控制一些基础共有的样式。

由第三个通过父类控制的办法，我们进入第三个要讨论的问题，层级结构

层级

最适合层级的例子莫过于`ul>li`结构了，如下面的结构：

一般来说我们也有两种办法定义层级，第一种为继承式，第二种为关键词式。

// 继承式 ul.card-list li.list-item a.item-img-link>img.item-img h3.item-tt>a.item-tt-link p.item-text // 关键词式 ul.card-list li.item a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text

由上可以看出继承式一般子元素接着父元素的最后一个单词如li接着ul的`list`，而li的子元素接着li的`item`；至于关键词式则完全由关键词来表示层级，`list>item>filed`正好构成三层等级。

最后由我们的层级进入我们最后一个问题，如何控制样式的范围

样式范围

这里以[腾讯课堂][Link 1]的课程详细页右边栏为例，如下图：

![Fmp64onpSWViDDmCI6J6Yx3-4Wax][]

三个区块的基础框架为：

.aside-block.block--xxx> h3.block-tt .block-bd

其中`.aside-block.block--xxx`用到了我们的特殊化class，而`.block-tt`,`block-bd`则使用了我们的修饰关键词，至于`.aside-block`与它的子元素之间则使用了我们上面说的继承式层级。现在根据这个层级结构我们定义基础样式如下：

.aside-block{ .block-tt{} .block-bd{} }

假设这里的联系机构区块的标题不一样，我们则可以：

.block--contact{ .block-tt{} }

当然如果本身有5个区块，2个标题一样，另外三个标题又一样，也许我们就有需要给`.block-tt`追加一个特殊化class，或者给`aside-block`特殊化一个class，如：

.aside-block{ .block-tt{ &.block-tt--special{} } .block-bd{} } // 或 .aside-block{ &..aside-block--special{ .block-tt{} } }

基础框架讨论完毕之后，就轮到我们的内容了，以联系机构为例：

使用`ul>li`结构，所以样式是另外一个独立的范围，不嵌套在之前的`.aside-block`里面，html及css代码如下：

ul.contact-list li i.item-icon.icon-font.i-xxx a.item-tt p.gray

这里我们li没有设置class，而p使用了一个全局的class`.gray`

.gray{} .contact-list{ li{} .item-icon{} .item-tt }

同理如果我们有其他地方应用这个可以拷贝过去，而如果需要一点调整，我们可以使用父元素来控制，如这里我们可以使用`.block--contact`来进一步调整contact的样式，如：

.block--contact{ .contact-list{ li{} } }

至此，我们的class命名方法讨论完毕，说到底就是先记住一些必备的基础关键词，然后合理应用上刚才提出的修饰关键词，特殊化class，层级及最后的样式范围就可以了。

[HTML]: http://imweb.io/topic/55e1d253771670e207a16bb2
[Link 1]: http://ke.qq.com/
[Fmp64onpSWViDDmCI6J6Yx3-4Wax]: http://7tszky.com1.z0.glb.clouddn.com/Fmp64onpSWViDDmCI6J6Yx3-4Wax