前端CSS规范整理

/* 不推荐: 无意义 */ #yee-1901 {}

/* 不推荐: 与样式相关 */ .button-green {}.clear {}

/* 推荐: 特殊性 */ #gallery {}#login {}.video {}

/* 推荐: 通用性 */ .aux {}.alt {}

常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等

ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。

/* 不推荐 */ #navigation {}.atr {}

/* 推荐 */ #nav {}.author {}

类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。

/* 不推荐 */ul#example {}div.error {}

/* 推荐 */#example {}.error {}

命名时需要注意的点：

规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _

命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则

不允许通过1、2、3等序号进行命名

避免class与id重名

id用于标识模块或页面的某一个父容器区域，名称必须**，不要随意新建id

class用于标识某一个类型的对象，命名必须言简意赅。

尽可能提高代码模块的复用，样式尽量用组合的方式

规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。