码迷,mamicode.com
首页 > 其他好文 > 详细

前端开发规范

时间:2014-11-11 15:58:12      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   color   ar   使用   java   sp   文件   

HTML 结构部分


1、使用 HTML5 的标准文档类型
<!DOCTYPE html>
2、设置 charset 为 utf-8
<meta charset="utf-8"> 
3、设置 360 浏览器默认使用 webkit 渲染模式
<meta name="renderer" content="webkit"> 
4、设置 IE 使用当前机器最高版本的内核来渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5、严禁将 IE 内核强制为低版本内核
6、严禁使用 font center 等已废弃的 HTML 标签
7、标准头部应包含如下结构
<!DOCTYPE html>
      <!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
      <!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
      <!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
      <!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
      <!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-cn"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<meta name="renderer" content="webkit"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8、结构、表现、行为分离

HTML 结构中严禁出现与业务相关的内联 CSS 和内联 JS,所有的 CSS 和 JS 都应该通过外链的形式添加到页面中,如下4种写法都是不允许的:

严禁在 body 内随意插入与业务相关的 style 标签。

<body>
    <style>
    .box{ margin:20px; }
    </style>
</body>

严禁在 HTML 结构上直接写内联样式。

<a href="#" style="color:#333">链接</a>

严禁在 body 内随意插入与业务相关的 script 标签。

<body>
    <script>
    $( ‘div‘ ).on( ‘click‘, fn );
    </script>
</body>

严禁在 HTML 标签上直接使用用 onxxx=fn 绑定与业务相关的事件。

<a href="#" onclick="sayHello">链接</a>

CSS 样式部分


1、class 命名规范
  • 统一使用小写字母
  • 严禁设置常见的容易起冲突的全局 class,如 .item .title .num .box .list
  • 同一个项目中统一使用下划线 _ 或中划线 -,同一个项目中请勿两种符号混用
  • 尽量使用有意义的命名,不推荐 .acdf .spxq ptb30 ,推荐使用 img_list img_title
2、严禁使用 * 选择器
3、严禁使用 id 选择器
4、严禁使用 !important
5、尽量不使用 expression
6、使用尽可能短的选择器
7、严禁滥用绝对定位
8、业务代码中的 z-index 值不能大于 10
9、低版本 IE 通过加前缀的方式代替 hack
 .ie6 .selector{ property: value; } /* ie6 */
 .ie7 .selector{ property: value; } /* ie7 */
 .ie8 .selector{ property: value; } /* ie8 */
 .ie9 .selector{ property: value; } /* ie9 */
10、尽量合理的使用 CSS Sprites 拼合 CSS 背景图片
11、非动画类的背景图片尽量采用 PNG8 的全透明格式,并尽量确保没有杂边
12、严禁出现 .foo.bar 这种连在一起的 class 选择器写法

JavaScript 部分


1、js 代码统一使用 use strict 来开启严谨模式
2、严禁在变量名声明前使用该变量
// 使用变量c时,此时变量还未被定义
console.log( c );
var c = 2;
3、严禁使用 agruments.caller 和 arguments.callee
4、声明变量必须带有 var 关键字,如果需要声明全局变量,请加上全局命名空间
foo = ‘bar‘;  // 没有var关键字,会不经意间污染全局作用域
window.foo = ‘bar‘; // 如果确实要声明全局变量,请加上全局命名空间
5、严禁使用 with 关键字

其他


1、静态资源的文件名,目录名统一使用小写字母,严禁出现大写字母
2、TAB 键用 4 个空格代替,可以将 \t 替换成 4 个空格
3、文件编码统一使用 utf-8 ,请勿带上 bom 头

前端开发规范

标签:style   http   io   color   ar   使用   java   sp   文件   

原文地址:http://www.cnblogs.com/xumengxuan/p/4089531.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!