CSS命名及规范是第一步：
总起：所有名字小写，样式名用-号连接，如.nav-left，CSS使用小写加连接，那么ID就使用大写不加连接，比如UserName，把它和编程的属性对应起来，那么方法就以小写开头，驼峰命名，这样样式，属性，方法就一目了然。
1.尽量使用标准命名，如符录，标准名分Class名和ID名，DOM的ID在JS里就是全局变量，所以应该综合考虑使用ID的场合，应该结合编程。
2.-符的前后，应该保持一致风格，比如前面父范围，后面是子范围，最后是位置，如nav-item-left，那就都保持这样的结构。
3.另外，ID的样式，明确指定了和具体功能相关，是很难复用的，全局样式是可以复用的，单页样式主要是本页布局等。要考虑复用及层次结构。
书写顺序：
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
附：
常用的css命名规则：
- 头：header
- 内容：content/container
- 尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 页面外围控制整体布局宽度：wrapper
- 左右中：left right center
- 登录条：loginbar
- 标志：logo
- 广告：banner
- 页面主体：main
- 热点：hot
- 新闻：news
- 下载：download
- 子导航：subnav
- 菜单：menu
- 子菜单：submenu
- 搜索：search
- 友情链接：friendlink
- 页脚：footer
- 版权：copyright
- 滚动：scroll
- 内容：content
- 标签页：tab
- 文章列表：list
- 提示信息：msg
- 小技巧：tips
- 栏目标题：title
- 加入：joinus
- 指南：guild
- 服务：service
- 注册：regsiter
- 状态：status
- 投票：vote
- 合作伙伴：partner
注释的写法：
/* Footer */
内容区
/* End Footer */
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 { }
注意事项::
- 一律小写;
- 尽量用英文;
- 不加中杠和下划线;
- 尽量不缩写，除非一看就明白的单词.
- 主要的 master.css
- 模块 module.css
- 基本共用 base.css
- 布局，版面 layout.css
- 主题 themes.css
- 专栏 columns.css
- 文字 font.css
- 表单 forms.css
- 补丁 mend.css
- 打印 print.css