首页 > 代码库 > 前端开发规范

前端开发规范

2024-08-01 12:24:01   224人阅读

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="http://www.mamicode.com/#" style="color:#333">链接</a>

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

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

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

<a href="http://www.mamicode.com/#" 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 头

前端开发规范


联系
我们