- 首页 > 睿知 > it技术 > >
HTML和CSS、JavaScript规范 第一部分（CSS部分）
- 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）一般元素命名
- 【HTML和CSS、JavaScript规范 第一部分（CSS部分）】2.11.图片命名
1）背景图片：bg001，bg002，bg003......
2）一般图片：img001，img002，img003......
3）特定图片：如banner，logo按照具体情况命名
4）按钮图片：btn_submit，btn_cancel.....
本文由博客一文多发平台 OpenWrite 发布！
推荐阅读
