总体原则
-
缩进
对于所有编程语言,我们要求缩进必须是软tab(用空格字符)。在你的文本编辑器里敲 Tab 应该等于 4个空格 。
-
可读性 vs 压缩
对于维护现有文件,我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS,也不必把Javascript代码最小化得面目全非。
我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件,例如CSS和JS
-
HTML,CSS,JS代码分离
html代码尽量保持整洁,采用最简单的代码层级完成复杂的布局要求,方便以后的维护和扩展
css代码本身都是全局的,所有应当采用css模块化思想,约束css的规则,尽量减少对全局的污染
JS代码分为功能代码和业务代码,功能代码尽量抽取成功能组件,方便团队内其他同事的使用
-
命名规范
文件及文件夹: 全部英文小写字母+数字或连接符"- , _ ",不可出现其他字符 如:jquery.1.x.x.js
文件:调用 /libs 文件需包含版本号,压缩文件需包含min关键词,其他插件则可不包含 如:/libs/modernizr-1.7.min.js
ID: 小駝峰式命名法 如:firstName topBoxList footerCopyright
Class: [减号连接符] 如:top-item main-box box-list-item-1
尽量使用语义明确的单词命名,避免 left bottom 等方位性的单独的词语命名样式
html规范
基本语法
在属性上,使用双引号,不要使用单引号。
不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。
不要忽略可选的关闭标签(例如, 和 )。
尽量用class来渲染样式,避免用id来写样式
Doctype
在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。
<!DOCTYPE html>
字符编码
通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后,需要避免在 HTML 中出现字符实体,直接提供字符与文档一致的编码(通常是 UTF-8)。
<head> <meta charset="UTF-8"></head>
IE 兼容模式
Internet Explorer 支持使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要,通常通过 edge mode 来通知 IE 使用最新的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
CSS 和 JavaScript
根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。
<link rel="stylesheet" href="code-guide.css"><script src="code-guide.js"></script><style> /* ... */</style>
实用高于完美
尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。在编写 HTML 代码时,需要尽量避免多余的父节点。很多时候,需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:
<!-- Not so great --><span class="avatar"> <img src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="新公司的前端开发规范(初稿)_html/css_WEB-ITnose" ></span><!-- Better --><img class="avatar lazy" src="/static/imghwm/default1.png" data-src="..." alt="新公司的前端开发规范(初稿)_html/css_WEB-ITnose" >
避免用 document.write 生成标签
用 document.write生成标签让内容变得更难查找,更难编辑,<b>性能更差</b>。应该尽量避免这种情况的出现。
CSS 规范
- 外部文件LINK加载CSS,尽可能减少文件数。加载标签必须放在文件的 HEAD 部分。
- 避免使用内联样式 不要在文件中用内联式引入的样式,不管它是定义在样式标签里还是直接定义在元素上。这样会很难追踪样式规则
- 使用 reset.css 让渲染效果在不同浏览器中更一致。
- 避免使用CSS表达式(Expression)
- 不要用@import
- 避免使用ID选择器
- 避免使用开销大的CSS选择器 如:*
- 禁止给class加上html标签 如:li.list
- 避免让选择符看起来像正则表达式 如:[name='aa'] 高级选择器执行耗时长且不易读懂,避免使用。
- 避免直接使用html tag作为样式选择器
- 避免使用 !important
- 有节制的使用css3伪元素
- 避免使用css3 低效属性,如:linear-gradient,borde-image; ### 用css模块化 css代码本身都是全局的,所有应当采用css模块化思想,约束css的规则,尽量减少对全局的污染
属性简写
坚持限制属性取值简写的使用,属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:paddingmarginfontbackgroundborderborder-radius大多数情况下,我们并不需要设置属性简写中包含的所有值。例如,HTML 头部只设置上下的 margin,所以如果需要,只设置这两个值。过度使用属性简写往往会导致更混乱的代码,其中包含不必要的重写和意想不到的副作用。
一行还是多行书写?
css实例都是用的多行的格式,每一对属性和值占单独一行。这个是广泛使用的约定,不仅是在css文件中,也多出现在书里和文章里。许多人认为他的可读性很好。然而在和团队的工作中,尤其是大型的css文件,我是将样式写成一行,并使用css模块化思想:
.alert-window {background: #fff; border: 1px solid #ff0; font-weight: bold; padding: 10px;}.alert-window .window-title{...}.alert-window .window-content{...}.alert-window .window-buttom{...}
就我个人而言,觉得单行的可读性更好。当你查找css时多行样式就变得很麻烦,相比较而言单行查找更容易。
Javascript
命名规范
- 使用单引号'而不是双引号"
- 类的命名使用骆驼命名规则,并且首字母大写,例如: Account, EventHandler
- 常量必须使用大写,在对象(类)或者枚举变量的前部声明,骆驼命名规则
- 类的私有变量和属性建议以 _开头。例如:var _buffer; _init:function(){}
变量
- 必须全部小写字符组成
- 变量必须在声明初始化以后才能使用,即便是 NULL 类型。
- 在作用域顶端对变量赋值,这有助于避免变量声明问题和与声明提升相关的问题
- 变量不要产生歧义。
- 相关的变量集应该放在同一代码块中,非相关的变量集不应该放在同一代码块中。
- 变量应该尽量保持最小的生存周期。
- 能直接使用直接量的,不要使用 new ....; 如: a=/\d/g; a=new RegExp('\d','g');
不要用 void
不要用 with 语句
不要用 continue 语句
尽量不要用位运算
不要扩充内置原型(Object,Array,String...)
不要用 eval();
+运算要注意
'1'+1==2 //false; 1+1==2 //true
使用简易条件判断方式
if (name !== 0 || name !== '' || name!==null || name!==undefined) {...}if (name) {...}if (collection.length > 0) { ...}if (collection.length) {...}
使用三元表达式来代替简单的if else
if(a){ d='b' }else{ d='c' } d=a?'b':'c';
使用&& 和 || 替代简单的if
if(a){ b() } a && c(); if(bb){ a=bb }else{ a=2 } a=bb||2
使用数组或json优化if else
if(a=='1' || a=='b' || a=='c' || a=='ss'){ bb(); }else{ ... } var hasData={ '1':1, 'b':1, 'c':1, 'ss':1 } if(hasData[a]){ bb() }else{ ... }
不要在非函数块中(if, while etc)声明函数
尽管浏览器允许你分配函数给一个变量,但坏消息是,不同的浏览器用不同的方式解析它如果一定要定义函数,请用函数表达式方式声明;如:
function b(){ ... } if(a){ function b(){ ... } } var b=function(){ ... } if(a){ b=function(){ .... } }
有else的if都要有{}
if(a) b() else c(); if(a){ b(); }else{ c(); }
不要有多余逗号
这会在IE6、IE7和IE9的怪异模式中导致一些问题;同时,在ES3的一些实现中,多余的逗号会增加数组的长度。在ES5中已经澄清
var hero = { firstName: 'Kevin', lastName: 'Flynn', }; var heroes = [ 'Batman', 'Superman', ]; var hero = { firstName: 'Kevin', lastName: 'Flynn' }; var heroes = [ 'Batman', 'Superman' ];
使用事件代理
在分配低调(unobtrusive)的事件监听器时,通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过,偶尔也会有多个元素同时符合触发条件,给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下,你就应该改用事件代理了
图片
尽量使用png8替代gif图片
不要在移动端手机也没使用gif动画图片

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

WebStorm Mac版
好用的JavaScript开发工具

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

禅工作室 13.0.1
功能强大的PHP集成开发环境