CSS命名规则：

(一)网页设计中常用的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
• 遮罩 : mask
• 下划线高亮 : under-line
• 常见的,初始化: common

(二)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
  

•    项目 item
  

(三)class的命名:

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

​ 如:

​ red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

       .font12px { font-size: 12px; }
       .font9pt {font-size: 9pt; }

(3)标题栏样式,使用"类别+功能"的方式命名

(2)标题栏样式,使用"类别+功能"的方式命名

​ 如:

        .barnews { }
        .barproduct { }

(四)变量的命名

• 增删查改 : CRUD
• 可变,对象 : params
• 关闭 : close
• 图解,图文: graphic
• 拖曳 : drag
• 通用: currency
• 地址: address
• 照片: picture

注意事项:

•    1.一律小写;
  

•    2.尽量用英文;
  

•    3.不加中杠和下划线;
  

•    4.尽量不缩写，除非一看就明白的单词.
  

•    主要的 master.css
  

•    模块 module.css
  

•    基本共用 base.css
  

•    布局，版面 layout.css
  

•    主题 themes.css
  

•    专栏 columns.css
  

•    文字 font.css
  

•    表单 forms.css
  

•    补丁 mend.css
  

•    打印 print.css
  

•    css初始化代码 common.css