web前端基础教程之css样式编程规范.docx

《web前端基础教程之css样式编程规范.docx》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、web前端基础教程之css样式编程规范由于每个WEB开发者的编码风格不同，差异较大，为了便于代码压缩以及书写样式的规范统一和美观，web前端工程师总结了一些前端规范，这里主要介绍CSS相关规范。1. tab键用四个空格代替因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置。2.每个样式属性加英文分号“;”方便压缩工具"断句"。3. Class命名中不能出现大写字母，采用"-"对class中的字母分隔/* 正确的写法 */.hotel-titl

2、e {font-weight: bold;}/* 不推荐的写法 */.hotelTitle {font-weight: bold;}4.空格的使用，执行下列规则：.hotel-content {font-weight: bold;}选择器与 { 之前要有空格属性名的 : 后要有空格属性名的 : 前不能加空格一方面为了美观，另一方面是避免ie6的bug5.多选择器规则之间要换行当样式针对多个选择器时每个选择器占一行/* 推荐的写法 */a.btn,input.btn,input[type="button"] {.....

3、.}6. 不能将样式写为单行.hotel-content {margin: 10px; background-color: #efefef;}单行显示不便于注释和备注 7. 不要向 0 后添加单位（为了规范统一）.obj {left: 0px;}8. 不要使用css原生import使用css原生import有很多弊端，比如会增加请求数9. 属性的正确书写顺序.hotel-content {/* 定位 */display: block;position: absolute;left: 0;top: 0;/* 盒模型 */

4、width: 50px;height: 50px;margin: 10px;border: 1px solid black;/ *其他* /color: #efefef;}•定位相关，常见的有：display position left top float 等•盒模型相关，常见的有：width height margin padding border 等•其他属性按照这样的顺序书写可见提升浏览器渲染dom的性能10. 小图片要与sprite 合并11.当编写针对特定html结构的样式时，使用元素名 + 类名/* 所有的

5、nav都是针对ul编写的 */ul.nav {......}12. IE Hack List/* 针对ie的hack */selector {property: value; /* 所有浏览器 */property: value9; /* 所有IE浏览器 */property: value; /* IE8 */+property: value; /* IE7 */_property: value; /* IE6 */*property: value; /* IE6-7 */}13. ie不要使用filter，也不

6、要使用expression这里主要是为了注重效率14.不要使用行内（inline）样式W3Cfuns

7、值都置为0。17. 链接的样式，要按照这个顺序来书写 a:link -> a:visited -> a:hover -> a:active