- 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…