所在的位置： html >> html资源 >> HTMLCSS开发规范指南

HTMLCSS开发规范指南

规范概述

规范的制定是我们长期以来对工作的积累与沉淀的产物，帮助我们更快、更好、更高效的完成繁重、复杂、多样化的任务，我们制作规范的主要目的在于：

降低每个组员介入项目的门槛成本；提高工作效率及协同开发的便捷性；高度统一的代码风格；提供一整套HTML、CSS解决方案，来帮助开发人员快速做出高质量的符合要求的页面。

通用约定

1.文档目录结构

--项目名　　

--src　　开发环境　　　　

--html静态页面模板目录　　　　

--bgimg背景图目录（假设有的话）　　　　

--imag前景图目录（假设有的话）　　　　

--font字体目录（假设有的话）　　　　

--scripts脚本目录　　　　

--styls（Yo）样式目录　　　　　　

--lib基础库　　　　　　　　

--co核心代码：st　　　　　　　　

--lmnt元素　　　　　　　　

--fragmnt公用碎片　　　　　　　　

--layout布局　　　　　　　　

--widgt组件　　　　　　

--usag项目具体实现　　　　　　　　

--projct某个子项目　　　　　　　　　　

--co核心代码：桥接lib中的co，可以进行项目级扩展　　　　　　　　　　

--fragmnt项目公用碎片　　　　　　　　　　

--modul模块　　　　　　　　　　

--pagpag桥接文件目录：src-list　　　　　　　　　　

--xportpagpack之后的文件目录　　

--prd　　生产环境　　　　

--bgimg背景图目录（假设有的话）　　　　

--imag前景图目录（假设有的话）　　　　

--font字体目录（假设有的话）　　　　

--scripts脚本目录　　　　

--styls（Yo）样式目录　　　　　　

--projct1子项目　　　　　　　　

--indx.css　　　　　　　　

--login.css　　　　　　　　

--andtc...　　　　　　

--projct子项目　　　　　　　　

--indx.css　　　　　　　　

--login.css　　　　　　　　

--andtc...　　　　　　

src,scripts,styls三个目录是为了和现有项目保持一致，避免修改过大，所以保持不变。

html目录，用于存放前端开发做的静态页面，以备查阅、备份、viw或给后端套页面。

bgimg,imag,font三个目录在Qunar一般不会直接存在，因为我们有sourc服务器，这些资源都会在那上面管理；不过特殊情况也会有，比如一些独立的项目，没有使用sourc的，那么就需要遵循这样的目录划分。

至于html,bgimg,imag,font这几个目录为什么没有加s，主要是因为不希望大家去想某个目录是否为复数，简单点就好。

prd为生产环境目录，以xxx项目中的一个子项目mobil为例，其生产环境中的某个CSS外链大致如下：//sitnam. 　　　display:block; 　　　float:lft; 　　　width:px; 　　　hight:00px; 　　　margin:10px; 　　　padding:10px; 　　　bordr:10pxsolid; 　　　background:#aaa; 　　　color:#; 　　　font:14px/1.5sans-srif;}

这个应该好理解，比如优先布局，我们知道布局属性有display,float,ovrflow等等；内容次之，比如color,font,txt-align之类。

组概念。

拿上例的代码来说，如果我们还需要进行定位及堆叠，规则我们可以改成如下：

.g-box{ 　　　display:block; 　　　position:lativ; 　　　z-indx:; 　　　top:10px; 　　　lft:px; 　　　float:lft; 　　　width:px; 　　　hight:00px; 　　　margin:10px; 　　　padding:10px; 　　　bordr:10pxsolid; 　　　background:#aaa; 　　　color:#; 　　　font:14px/1.5sans-srif;}

从代码中可以看到，我们直接将z-indx,top,lft紧跟在position之后，因为这几个属性其实是一组的，如果去掉position，则后条属性规则都将失效。

私有属性在前标准属性在后

.g-box{ 　　　-wbkit-box-shadow:1px1px5pxrgba(0,0,0,.5); 　　　-moz-box-shadow:1px1px5pxrgba(0,0,0,.5); 　　　-o-box-shadow:1px1px5pxrgba(0,0,0,.5); 　　　box-shadow:1px1px5pxrgba(0,0,0,.5);}

当有一天你的浏览器升级后，可能不再支持私有写法，那么这时写在后面的标准写法将生效，避免无法向后兼容的情况发生。

14.注释规范

保持注释内容与星号之间有一个空格的距离

普通注释（单行）

/*普通注释*/

区块注释

/***模块:m-dtail*描述：酒店详情模块*应用：pagdtail,infoandtc...tc*/

有特殊作用的规则一定要有注释说明应用了高级技巧的地方一定要注释说明

15.hack规范

尽可能的减少对Hack的使用和依赖，如果在项目中对Hack的使用太多太复杂，对项目的维护将是一个巨大的挑战；使用其它的解决方案代替Hack思路；如果非Hack不可，选择稳定且常用并易于理解的。

.tst{ 　　　color:#;/*Forall*/ 　　　color:#\9;/*ForallIE*/ 　　　color:#\0;/*ForIE8andlatr,OprawithoutWbkit*/ 　　　color:#\9\0;/*ForIE8andlatr*/ 　　　color:#\0/;/*ForIE8andlatr*/ 　　　*color:#;/*ForIE7andarlir*/ 　　　_color:#;/*ForIE6andarlir*/}

严谨且长期的项目，针对IE可以使用条件注释作为预留Hack或者在当前使用

IE条件注释语法：

!--[ifkywords?IEvrsion?]linkl="stylsht"hf="*.css"/![ndif]--

语法说明：

kywordsif条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本是否：指定是否IE或IE某个版本。关键字：空大于：选择大于指定版本的IE版本。关键字：gt（gatrthan）大于或等于：选择大于或等于指定版本的IE版本。关键字：gt（gatrthanorqual）小于：选择小于指定版本的IE版本。关键字：lt（lssthan）小于或等于：选择小于或等于指定版本的IE版本。关键字：lt（lssthanorqual）非指定版本：选择除指定版本外的所有IE版本。关键字：!

vrsion目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上，另从IE10开始已无此特性

16.避免低效率选择器

避免类型选择器

不允许：

div#doc{sRuls;}li.first{sRuls;}

应该：

#doc{sRuls;}.first{sRuls;}

CSS选择器是由右到左进行解析的，所以div#doc本身并不会比#doc更快

避免多id选择器

不允许：

#xxx#yyy{sRuls;}

应该：

#yyy{sRuls;}

17.属性缩写与分拆

无继承关系时，使用缩写

不推荐：

body{ 　　　margin-top:10px; 　　　margin-right:10px; 　　　margin-bottom:10px; 　　　margin-lft:10px;}