html，css命名规范 （转）

HTML+CSS命名规范总结

1.HTML部分

1.1添加必须的utf-8的字符集，并且使用HTML5的简洁

方式：

<meta charset=”utf-8”>

1.2遵循xhtml1.0规则

1）所有标签必须结束

2）所有标签必须小写

3）标签属性必须使用成对引号（单引号或双引号）

4）标签属性必须有值：

5）所有特殊符号必须转义

1.3标签属性命名规范

Id：连接符命名法“hello-world”

Class：连接符命名法“hello-world”

Name：骆驼式命名法“helloWorld”

1）表单元素的id必须加以下前缀

label： lbl    text：txt    password：txt   textarea：txt    file：txt

radio： rad   checkbox：chk   submit：btn   reset：btn

button：btn   hidden：      hid

2）用于结构布局的元素id命名

主容器： main    页头：header   页脚：foote   内容区域：content

LOGO：  logo    主导航：main-nav    二级导航：sub-nav

3）name命名

一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用骆驼式命名法命名，例如：id=“txt-id-card”，那么name=“idCard”。

1.4合理使用标签，语义化结构

1）标签合理嵌套

a ，spam ，strong ，em ，p ，h1-h6等元素不能包含：div、ul、ol、dl、p

2）严禁多div症、多span症、多table症，正确使用标签表现DOM结构，在文档去除css的情况下，任然具有结构和可读性，以下是html标记的使用规范：

p ：文本段落        dl ：定义列表，可包括标题和内容简介的列表

ul ：无序列表        ol ：有序列表      strong/em ：强调文本

h1-h6 ：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；

img ：图像。必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css处理，不使用img元素；

table ：数据网络，规则的分栏布局，尽可能显性的定宽和定高。

3）合理化表单结构

A）使用fieldset元素包裹相同类别的字段。

B）使用legen元素表示      字段类别名称。

C）使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点。

D）文本框不使用size属性定义宽度，而使用css的width属性。

E）添加maxlength属性限制输入字符的长度。

4）严禁使用已在xhtml1.0中已移除的标签

s 、i 、b 、font

1.5控制页面默认显示状态

使用js来控制和切换现实的区块、导航、tab，必须先用css处理DOM默认显示状态。

SEE MORE →

 

2

2.CSS部分

2.1Css命名规则

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）严禁编写标记内代码，比如<div style=”display:none;”>就应该写成<div class=”hide”>,然后在样式表中去完成样式代码编写。

3）严禁在文档中使用<style type=”text/css”></style>代码块

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）一般元素命名

SEE MORE →

 

3

3.图片命名

1）背景图片：bg001，bg002，bg003......

2）一般图片：img001，img002，img003......

3）特定图片：如banner，logo按照具体情况命名

4）按钮图片：btn_submit，btn_cancel.....

SEE MORE →

 

4

4.javascript部分

4.1在文档中引用js

1）使用外部文件方式引用js；

2）将引用js的代码集中放置在一起，可放置在</head>之前或</body>之前，严禁在body间分散放置；

3）使DOM结构和js代码分离，禁止写在标记内部；

4）如果是发布版本，请将多个稳定版本的js文件压缩、归类放置到单个文件内，压缩和最小化js文件。

4.2不直接操作DOM样式，使用已在样式表中定义的class来操作DOM样式

4.3DOM加载

把需要再DOM加载后立即执行的代码封装在同一个函数执行，不要编写多个window.onload事件或jQuery的ready（）事件。

4.4严禁使用多个library库

4.5优化iQuery代码，提高性能：

1）选择器从最近的ID开始继承或直接使用ID选择器：$（“#id tag”）；

2）选择器在使用class前加上标签名：$（“span.span1”）；

3）尽量使用ID选择器代替class；

4）要获取子元素请使用子选择器，而不要使用后代选择器：$（“#id>span”）；

5）缓冲jQuery对象，不要在代码中重复出现相同的选择器：var btn=$（“#id”）；

6）使用data（）存储临时变量；

7）限制直接操作DOM，在更新DOM前应该准备好需要的东西；

8）避免使用live（）方法绑定事件；

9）在父级元素监听事件，对目标元素进行操作；

$（“#id”）.click（function（e）{var input=$(e.target);}）；

10）推迟加载拖放、动画、视觉特效等代码，把可能会影响页面加载速度的代码绑定到$（window）.load（）事件中