CSS代码规范.doc

HTML基本格式:标题注释：/*header start*/ 内容区域 /*header end*/CSS 书写规范1、 用两个空格代替tab键。2、 不要在自闭合的元素尾部添加斜线。不要省略可选的结束标签。3、 对于属性的定义，确保全部用双引号，不要用单引号。4、 指定HTML的根元素的lang属性。5、 IE通过指定edge mode。通知IE采用其所支持的最新模式。列：6、 必须声明字符编码，一般采用UTF-8。7、 引入CSS与JS时不指定type属性，因为它们都有默认值。8、 属性顺序：8.1 class8.2 Id、name8.3 data-*8.4 src、for、type、href8.5 title、alt8.6 aria-*、role9、 书写顺序：9.1 位置属性(position,top,right,z-index,display,float 等)9.2 大小(width,height,padding,margin)9.3 文字系列(font,line-height,letter-spacing,color-text-algin 等)9.4 背景(background,border 等)9.5 其他(animation,transition等)10、 尽量缩写属性。11、 去掉小数点前的“0”。12、 不建议使用下划线，为了和js区分，IE6中无效而且输入的时候少按shift键。13、 不要随意使用id(应按需要使用,而不能滥用)14、 减少标签数量。15、 尽量避免使用js生成标签。通过js生成的标签让内容变得不易查找,编辑,并且降低性能.16、 对于从逗号分隔的属性值，每个逗号后面都应该插入一个空格（， box_shadow） 。17、 不要在rgb( ),rgba( ),hsl( ),hsla( ) 或rect( )值的内容逗号后插入空名(只要逗号,不加空格)。18、 十六进制全部小写（#fff），尽量简写。19、 为选择器中的属性添加双引号（inputtype=”text”） 。20、 避免为0值指定单位。如margin:0;21、 不要用 import ，会增加额外的请求次数。应用一下代替：21.1 使用多个21.2 通过sass或less将多个css文件编译为一个文件.21.3 通过Rails,Jekyll或其他系统提供过css文件合并功能.22、 媒体查询应放在尽可能相关规则的附近,不要将他们打包放在一个单一的样式文件中.23、 带前缀的属性,通过缩减方式,让每个属性的值在垂直方向对齐.列: .div -webkit-box-shadow:10px 10px 5px #888; box-shadow:10px 10px 5px #888; 24、 对于只包含一条声明语句的样式,建议语句放在同一行.25、 将最近的父class或基本(base)class作为新class的前缀.26、 在文件的结尾添加一个空白行。27、 对为选择器分组时，将单独的选择器单独放在一行。28、 选择器的个数尽量不要超过3个。29、 每一条规则的大括号前后加空格。30、 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后，并且属性名称要对齐。31、 命名中尽量使用小写。32、 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。33、 避免class与id重名。CSS 优先级1、 添加了!important 的属性。2、 Style 属性嵌入。3、 具有一个或多个id选择器。4、 具有一个或多个类，属性或伪类选择器。5、 具有一个或多个元素选择器。6、 通配选择器。7、 优先级由高到低排列的6个位置。7.1 最高优先级的位置是HTML文档头部的元素。7.2 style元素中import语句所导入的样式表。7.3 元素。7.4 样式表中的import语句导入的。7.5 第五优先级的位置是最终用户附加的样式表。7.6 最低是浏览器默认样式表。CSS 文件命名全局样式：global.css/base.css字体样式:font.css专栏:columns.css主题:themes.css主要的:master.css清除浏览器样式:reset.css清除浏览器部分样式:mormalize.css框架布局:layout.css链接样式:link.css打印样式:print.css补丁:mend.css表单:forms.css模块:module.css私有:style.cssCSS class命名页头:header页尾:footer导航:nav子导航:subnav面包屑:breadcrumb返回:back返回顶部:back-top图标:icon滚动:scroll左中右:left,center,right标签页:tag标签内容:tagcontent当前标签:tagcurrent当前位置:currentpath列表:list图片列表:piclist提示信息:mes/message加入:joinus指南:guild状态:status按钮:btn合作伙伴:partner友情链接:friendlink版权:copyright投票:vote提交:submit文本框:textbox统计:count更多:extended/more注释:note线:line图片:pic网站地图:sitemap圆角:cor/corner结果:result小贴士:tip插图:illustration关于我们:about-as产品:products功能区:shop(如购物车)整体页面:wrapper/container/page容器背景:containerbg内容:content菜单:menu菜单内容:menucontent子菜单:submenu子菜单内容:submenucontent登录:login登录条:loginbar搜索:search搜索关键字:keyword搜索范围:range标志logo标题:title侧栏:sidebar小技巧:tips广告:banner报头:masthead左浮动图片:leftphoto右浮动图片:rightphoto服务:service服务连接:servicelink热点:hot新闻:news下载download注册:regsiter摘要:summar