微信号:grzlwx

介绍:光荣之路官方资讯

嘿,你提的bug多少属于前端的,来看看《前端规范大总结》吧

2015-05-26 22:34 光荣之路


三、命名规范

3.1 如何命名

  • css最好用class来命名,js用id来命名,已做区分

  • id和class的命名应反映该元素的功能或使用通用名称,而不要用抽象的晦涩的命名

3.2 命名示例

  • .div1{} /* 不推荐;无意义 */

  • .a_green{} /* 不推荐;无意义 */

  • .menu{} /* 推荐;特殊性*/

  • .header{} /* 推荐;通用性*/

3.3 命名精简

  id和class命名越精简越好,只要足够表达意思,这样有助于理解,同时也能提高代码效率

  • .navigation{} /* 不推荐 */

  • .login_box_inside_con{} /* 不推荐 */

  • .nav{} /* 推荐 */

3.4 命名嵌套问题

  书写css要注意先后顺序和嵌套问题,从性能上考虑尽量减少选择器的层级

  • .nav ul.list{} /* 不推荐 */

  • .nav .list{} /* 推荐 */

3.5 注意事项

  • 规则命名中,一律采用小写加下划线的方式

  • 命名中尽量避免使用中文拼音,应该采用更简明有语义的英文单词进行组合

  • 命名注意缩写,但是不能盲目缩写

  • 不允许通过1、2、3等序号进行命名

  • 避免class与id重名

  • id注意用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id

  • class用于标识某一个类型的对象,命名必须言简意赅

  • 尽可能提高代码模块的复用,样式尽量用组合的方式

  • 规则名称中不应该包含颜色、定位等与具体显示效果相关的信息,应该用意义命名,而不是结果名称

四、书写规范

4.1 排版规范

  • 使用4tab来缩进

  • 规则可以写成单行。或者多行,但是整个文件内的规则排版必须统一

  书写风格:

  • 每一个属性值必须添加分号

  • 如果多个属性公用一个样式集,则多个属性必须写成多行形式

4.2 属性编写顺序(一般遵循显示属性 -> 自身属性 -> 文本属性 -> 其他属性的书写格式)

  • 显示属性:display/list-style/position/float/clear...

  • 自身属性(盒模型):width/height/margin/padding/border

  • 背景:background

  • 行高:line-height

  • 文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...

  • 其他:cursor/z-index/zoom/overflow...

  • CSS3属性:transform/transition/animation/box-shadow/border-radius

  • 如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加,标准属性写在最后

  • 链接的样式请严格按照如下顺序添加:a:link -> a:visited -> a:hover -> a:active

  

4.3 代码性能优化

  • 合并margin、padding、border的-top/-right/-bottom/-left的设置,尽量使用短名称

  • 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置

  • 禁止在css中使用*选择符

  • 0后面不需要单独,比如0px可以省略成0,0.8px可以省略成.8px

  • 如果可以颜色尽量用三位字符表示,比如#ccc

  • 如果没有边框时,不要写成border:0;应该写成border:none

  • 在保存代码解耦的前提下,尽量合并重复的样式

  • background、font等可以缩写的属性,尽量使用缩写形式

  • 能以背景形式呈现的图片,尽量都写入CSS样式中

4.4 CSS Hack的使用

  尽量少使用浏览器检测和CSS Hacks,先试试别的解决办法。考虑到代码高效率和易管理,虽然这两种办法能快速解决浏览器解析差异,但应被视为最后的手段。在长期的项目中,允许使用hack只会带来更多的hack,所以尽量少用

  • IE6: _property:value

  • IE6/7: *property:value

  • IE6/7/8/9: property:value\9

4.5 IE兼容性

  IE支持通过特定的<meta>标签来确定绘制当前页面所应该采用的IE版本,除非有强烈的特殊需求,否则最好是设置edge mode,从而通知IE采用其所支持的最新的模式

    <!-- IE8及以上的版本都会以最高版本IE来渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  注意:X-UA-Compatible这个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">中的chrome=1效果是如果安装了GCF,则使用GCF来渲染页面,如果未安装 GCF,则使用最高版本的IE内核进行渲染

4.6 字体规则

  • 为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字,如:黑体(SimHei)、宋体(SimSun)、微软雅黑(Microsoft Yahei)

  • 字体粗细采用具体数值,粗体bold写成700,正常normal写成400

  • font-size必须以px为单位

  • 为了对font-family取值进行统一,更好的支持各个操作系统上各个浏览器的兼容性,font-family不允许在业务代码中随意设置

  

(未完待续)

(作者:末伏 来源:http://www.cnblogs.com/janessasmith/p/4500999.html)

光荣之路软件测试培训

官网:http://www.gloryroad.cn/

微信公众号:gloryroadtrain

性能测试QQ群:415987441
软件测试招聘QQ群: 203715128
自动化3群QQ: 371211499



 
光荣之路 更多文章 今天晚上的 linux 公开课- Awk 编程 7月28日(今天)晚上的 linux 公开课- shell编程 8月4日(今天)晚上的 linux 公开课- shell编程 9月1日(本周一)晚8点半,光荣之路Web自动化系列基础课—javascript第二讲 推荐本好书《与机器赛跑》
猜您喜欢 iOS网络请求优化之DNS映射 如何实现平滑的“box-shadow”动画效果 9点1氪:俞永福将出任阿里影业非执行董事;国内网民总数超7亿;Facebook将停止人工写话题概要 Material Design技术分享 HTTPS通信中的身份认证机制