css怎样命名比较规范

每次咱们作网页时候很纠结怎样取名字，实在想不出好的名字，不少人就会用a、b、或者aa、bb等来命名，这样的命名其实当本身把网页完成后，要修改那一部分时，会发现要花费很大的功夫去寻找，让人很伤脑筋，特别是与后台对接数据时，其余程序员彻底一头雾水不说，还被你的不规范代码搞得头昏脑涨，苦不堪言，于是，咱们要严谨命名，规范命名。

命名时须要注意的点：

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

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

• 命名注意缩写，可是不能盲目缩写，具体请参见经常使用的CSS命名规则；

• 不容许经过一、二、3等序号进行命名；

• 避免class与id重名；

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

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

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

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

一、经常使用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

• 滚动：scroll

• 标签页：tab

• 文章列表：list

• 提示信息：msg

• 当前的: current

• 小技巧：tips

• 图标: icon

• 注释：note

• 指南：guild

• 服务：service

• 热点：hot

• 新闻：news

• 下载：download

• 投票：vote

• 合做伙伴：partner

• 友情连接：link

• 版权：copyright
  

二、经常使用class的命名：

(1)颜色:使用颜色的名称或者16进制代码,如

• .red { color: red; }

• .f60 { color: #f60; }

• .ff8600 { color: #ff8600; }
  

(2)字体大小,直接使用”font+字体大小”做为名称,如

• .font12px { font-size: 12px; }

• .font9pt {font-size: 9pt; }
  

(3)对齐样式,使用对齐目标的英文名称,如

• .left { float:left; }

• .bottom { float:bottom; }
  

(4)标题栏样式,使用”类别+功能”的方式命名,如

• .barnews { }

• .barproduct { }