css命名规则

- * @author: name

- * @update: name (2013-04-13 18:32)

- */

模块注释

- /* module: module1 by 张三 */

- …

- /* module: module2 by 张三 */

特殊注释

/* TODO: xxxx by name 2013-04-13 18:32 *//* BUGFIX: xxxx by name

2012-04-13 18:32 */用于标注修改、待办等信息

命名规范

使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首

选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。

- /* 不推荐: 无意义 */ #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用于标识某一个类型的对象，命名必须言简意赅。

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

1、常用id的命名：

(1)页面结构

- 容器: container

- 页头：header

- 内容：content/container

- 页面主体：main

- 页尾：footer

- 导航：nav

- 侧栏：sidebar

- 栏目：column

- 页面外围控制整体布局宽度：wrapper

- 左右中：left right center

(2)导航

- 导航：nav

- 主导航：mainbav

- 子导航：subnav

- 顶导航：topnav

- 边导航：sidebar

- 左导航：leftsidebar

- 右导航：rightsidebar

- 菜单：menu

- 子菜单：submenu

- 标题: title

- 摘要: summary

(3)功能

- 标志：logo

- 广告：banner

- 登陆：login

- 登录条：loginbar

- 注册：regsiter

- 搜索：search

- 功能区：shop

- 标题：title

- 加入：joinus

- 状态：status

- 按钮：btn

最后

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

- 登录条：loginbar

- 注册：regsiter

- 搜索：search

- 功能区：shop

- 标题：title

- 加入：joinus

- 状态：status

- 按钮：btn

最后

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。