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

6web视频教程 /course/web/web前端基础教程之css样式编程规范由于每个WEB开发者的编码风格不同，差异较大，为了便于代码压缩以及书写样式的规范统一和美观，web前端工程师总结了一些前端规范，这里主要介绍CSS相关规范。1.tab键用四个空格代替因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置。2.每个样式属性加英文分号“;”方便压缩工具断句。3.Class命名中不能出现大写字母，采用-对class中的字母分隔/*正确的写法*/.hotel-titlefont-weight:bold;/*不推荐的写法*/.hotelTitlefont-weight:bold;4.空格的使用，执行下列规则：.hotel-contentfont-weight:bold;选择器与之前要有空格属性名的:后要有空格属性名的:前不能加空格一方面为了美观，另一方面是避免ie6的bug5.多选择器规则之间要换行当样式针对多个选择器时每个选择器占一行/*推荐的写法*/a.btn,input.btn,inputtype=button.6.不能将样式写为单行.hotel-contentmargin:10px;background-color:#efefef;单行显示不便于注释和备注7.不要向0后添加单位（为了规范统一）.objleft:0px;8.不要使用css原生import使用css原生import有很多弊端，比如会增加请求数9.属性的正确书写顺序.hotel-content/*定位*/display:block;position:absolute;left:0;top:0;/*盒模型*/width:50px;height:50px;margin:10px;border:1pxsolidblack;/*其他*/color:#efefef;定位相关，常见的有：displaypositionlefttopfloat等盒模型相关，常见的有：widthheightmarginpaddingborder等其他属性按照这样的顺序书写可见提升浏览器渲染dom的性能10.小图片要与sprite合并11.当编写针对特定html结构的样式时，使用元素名+类名/*所有的nav都是针对ul编写的*/ul.nav.12.IEHackList/*针对ie的hack*/selectorproperty:value;/*所有浏览器*/property:value9;/*所有IE浏览器*/property:value0;/*IE8*/+property:value;/*IE7*/_property:value;/*IE6*/*property:value;/*IE6-7*/13.ie不要使用filter，也不要使用expression这里主要是为了注重效率14.不要使用行内（inline）样式W3Cfuns行内样式，最好用一个class代替。隐藏某个元素，可以加一个class.hidedisplay:none;尽量做到样式和结构分离15.使用reset.css样式16.不要全局设置magin和padding/*别这样写*/*margin:0;padding:0;没有必要将所有元素