常见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, .checkedicon-
- 为前缀（字体图标采用
.icon-font.i-name
- 方式命名）。
.slide, .modal, .tips, .tabs
- ，特殊化采用上面两个中划线表示，如
.imgslide--full, .modal--pay, .tips--up, .tabs--simplejs-
- 前缀
.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
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整站结构设计，这里我们可以看出都是些简单的关键词，比较好理解，一看就知道是什么。
现在问题来了，如果其他地方也要用到这些关键词怎么办？
修饰关键词
.block-hd(hd为header简写)，modal头部.modal-hd，文章头部.article-hd。.page-tt(title的简写)，区块标题.block-tt等。
同样，这给我们提出了第二个问题，如果要特殊化某个class该怎么办？
特殊化class
以上面的tt为例，大概有三种办法：
.page-tt修改成.page-user-tt(可以采用scss的%先定义共用的代码)。.page-tt上追加一个class成为.page-tt.page-tt--user，注意.page-tt--user不是一个独立的class，它使基于.page-tt这个基础上的。.page-user .page-tt。.page-tt，可以比较方便控制一些基础共有的样式。
由第三个通过父类控制的办法，我们进入第三个要讨论的问题，层级结构
层级
ul>li结构了，如下面的结构：
<ul>
<li>
<a href="#"><img src="" alt=""></a>
<h3><a href="#"></a></h3>
<p></p>
</li>
</ul>
<ul>
<li>
<a href="#"><img src="" alt=""></a>
<h3><a href="#"></a></h3>
<p></p>
</li>
</ul>一般来说我们也有两种办法定义层级，第一种为继承式，第二种为关键词式。
// 继承式
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
// 继承式
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-textlist，而li的子元素接着li的item；至于关键词式则完全由关键词来表示层级，list>item>filed正好构成三层等级。
最后由我们的层级进入我们最后一个问题，如何控制样式的范围
样式范围
这里以腾讯课堂的课程详细页右边栏为例，如下图：
三个区块的基础框架为：
.aside-block.block--xxx>
h3.block-tt
.block-bd
.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{}
}
.aside-block{
.block-tt{}
.block-bd{}
}假设这里的联系机构区块的标题不一样，我们则可以：
.block--contact{
.block-tt{}
}
.block--contact{
.block-tt{}
}.block-tt追加一个特殊化class，或者给aside-block特殊化一个class，如：
.aside-block{
.block-tt{
&.block-tt--special{}
}
.block-bd{}
}
// 或
.aside-block{
&..aside-block--special{
.block-tt{}
}
}
.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
ul.contact-list
li
i.item-icon.icon-font.i-xxx
a.item-tt
p.gray.gray
.gray{}
.contact-list{
li{}
.item-icon{}
.item-tt
}
.gray{}
.contact-list{
li{}
.item-icon{}
.item-tt
}.block--contact来进一步调整contact的样式，如：
.block--contact{
.contact-list{
li{}
}
}
.block--contact{
.contact-list{
li{}
}
}至此，我们的class命名方法讨论完毕，说到底就是先记住一些必备的基础关键词，然后合理应用上刚才提出的修饰关键词，特殊化class，层级及最后的样式范围就可以了。
