常用的CSS命名规范

   CSS命名由小写的英文单词或组合命名，单词与单词之间通过“-”连接，常用的CSS命名规范有页面结构命名规范，导航命名，功能命名以及文本命名规范等。

1.页面结构

  整个页面：page
  首页：homepage
  二级页面子页面：subpage
  页头：head / header
  页面主体：main
  内容：content / container 
  页尾：foot / footer/ (或命名为 copyright用于底部)
  容器：container
  导航：nav 
  侧栏：sidebar 
  栏目：column 
  页面外围控制整体布局宽度：wrapper 
  左中右：left  center  right
  外套：wrap / wrapper

2.导航

  导航：nav / navbar / navigation / nav-wrapper 
  顶导航：topnav
  主导航：mainnav
  子导航：subnav
  边导航：sidebar
  左导航：leftsidebar / sidebar_a
  右导航：rightsidebar / sidebar_b
  菜单：menu
  子菜单：submenu
  下拉：drop
  下拉菜单：dorpmenu
  链接菜单：links
  标题：title
  摘要：summary

3.功能

  登陆：login 
  登录条：loginbar 
  注册：register 
  搜索：search 
  搜索条：searchbar
  搜索输入框：searchlnput
  功能区：shop 
  工具条：tool / toolbar
  标题：title 
  加入：joinus 
  状态：status 
  按钮：btn 
  下载：download 
  滚动：scroll 
  标记箭头：arr / arrow
  面包屑导航：breadcrumb

  标签页：tab 
  文章列表：list 
  新闻列表：list-news
  提示信息：msg 
  当前的:  current 
  小技巧：tips 
  栏目标题：title 
  图标:  icon 
  商标：label
  注释：note 
  指南：guild 
  服务：service 
  网站地图：sitemap
  网站信息：siteinfo

  标志：logo 
  广告：banner 
  热点：hot 
  新闻：news 
  投票：vote 
  合作伙伴：partner 
  友情链接：friendlink / link
  版权：copyright 
  信誉：siteinfoCredits
  法律信息：siteinfoLegal

4.CSS样式表文件命名 

  index.css： 一般用于首页建立样式
  head.css： 头部样式，当多个页面头部设计风格相同时使用。
  style.css：独立页面所使用的样式文件。
  global.css：页面样式基础，全局公用样式，页面中必须包含。
  layout.css：布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
  module.css：模块，用于产品类页，也可与其它样式配合使用。
  master.css：主要的样式表
  columns.css：专栏样式
  themes.css：主体样式
  forms.css：表单样式
  font.css： 文字样式
  print.css： 打印样式
  mend.css：补丁，基于以上样式进行的私有化修补。

一些可缩写的前缀或者后缀：

1.如果是模块，可以这样前缀：
    弹出：pop                   公共：global（缩写：gb）
    标题：title（缩写：tit）          提示：hint
    菜单：menu                   信息：info
    预览：preview（缩写：pvw）     导航：nav

2.类型：
    按钮：btn                     文本：txt
    段落：p                      图标：icon
    颜色：color（缩写：c）          背景：bg
    边框：border（缩写：bor）

3.作用：
   设置：set                   添加：add
   删除：del                   操作：op
   密码：pwd                  导入：inc

4.状态：
   成功：suc
   失败：lost
   透明：tran

注意事项：
  1.一律小写; 
  2.尽量用英文; 
  3.可加中横(search-btn)和下划线(search_btn); 
  4.尽量不缩写，除非一看就明白的单词。 



命名示例：
 文本输入框： .input_txt
 密码输入框： .input_pw
 段落文本颜色： .txt_color_p
 相册弹出的设置层： .pop_set_photo
 登录密码输入框： .input_pwd_login
 日志设置成功提示： .hint_logsetsuc
 公共提示： .hint_gb