• 2.1 规范
  1）样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a--z）、数字（0--9）、下划线（_）组成。
  2）可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用123456...red，blue，left，right之类的（如颜色、字号大小等）矢量命名。
  3）尽量用单个单词简单描述class名称。
  4）双单词或多单词组合方式：形容词_名词、命名空间_名次、命名空间_形容词_名词。
• 2.2Class和ID的使用方法
  把id留给后台开发和JS使用，除此之外页面的page id（如首页的外层需要一个ID id=“page_index”），页面结构（header main footer）允许用id命名。其他禁止id使用在样式表CSS命名中，一律使用class命名。
• 2.3命名空间
  在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。
• 2.4添加文档样式
  1）引用外部文件方式添加样式
  2）严禁编写标记内代码，比如就应该写成,然后在样式表中去完成样式代码编写。
  3）严禁在文档中使用代码块
  4）分割样式表，降低代码复杂性，方便管理和维护。但不分割的太细碎，应考虑以后的维护和管理。
• 2.5属性简写
  为了节省字节数及文件大小，以下属性请使用简写方式：
  padding ：top right bottom left； margin ： top right bottom right；
  border ： style width color； border-top ：style width color；
  Border-bottom ：style width color； Border-left ：style width color；
  Border-color ：top right bottom left； Border-style ：top right bottom left；
  Border-width ：top right bottom left； Background ：color url（image）repeat posotion；
  List-style ：type position url（image）； Font-weight：400/700；
• 2.6缩写16进制色值
  Color和background-color的属性值如果使用的是16进制色值，当6个数字两两相等时，使用缩写方式编写。如：#996600缩写成#960
• 2.7字体
  1）全局定义字体：body{font：12px arial，helvetica，sans-serif；line-height：1.5；}
  2）font-family：
  A）等宽字体组合：Arial，Helvetica，sans-serif；
  B）不等宽（宽扁）字体组合：Verdana，Trebuchet MS，sans-serif；
  C）中文字体：除非内容文本需要，不推荐强制定义
• 2.8页面采用固定流式布局，使用像素（px）固定元素尺寸。
• 2.9添加必须的注释
  可根据全局、布局、区块、功能等进行分类和添加注释，方便维护和代码搜索。
• 2.10CSS通用命名
  （1）页面框架命名，一般具有唯一性，推荐用ID命名
  （2）模块结构命名
  （3）导航结构命名
  （4）一般元素命名
• 2.11.图片命名
  1）背景图片：bg001，bg002，bg003......
  2）一般图片：img001，img002，img003......
  3）特定图片：如banner，logo按照具体情况命名
  4）按钮图片：btn_submit，btn_cancel.....

本文由博客一文多发平台 OpenWrite 发布！