Home >Web Front-end >HTML Tutorial >Front-end development specification document (first draft)
Indent
For all programming languages, we require that indentation must be soft tabs (with space characters). Typing Tab in your text editor should equal 4 spaces.
Readability vs Compression
For maintaining existing files, we believe readability is more important than saving file size. Lots of whitespace and appropriate ASCII art are encouraged. No developer should intentionally minify HTML or CSS, or minify Javascript code beyond recognition.
We will automatically minimize and gzip all static client files such as CSS and JS on the server side or during the build process
HTML, CSS, JS code separation
Keep the html code as clean as possible and use the simplest code level to complete complex layout requirements to facilitate future maintenance and expansion
The css code itself is global. All CSS modular ideas should be adopted to constrain the rules of css and minimize global pollution
JS code is divided into functional code and business code. Functional code should be extracted into functional components as much as possible to facilitate the use of other colleagues in the team
Naming convention
Files and folders: All English lowercase letters and numbers or connectors "-, _", other characters are not allowed such as: jquery.1.x.x.js
Files: Calling /libs files must include version numbers, compressed files The min keyword needs to be included. Other plug-ins do not need to include it, such as: /libs/modernizr-1.7.min.js
ID: small camel case naming method such as: firstName topBoxList footerCopyright
Class: [minus sign connector] such as :top-item main-box box-list-item-1
Try to use word names with clear semantics, and avoid directional separate word naming styles such as left and bottom
On attributes, use double quotes, not single quotes.
Don’t use slashes at the end of auto-closing tags - the HTML5 specification states that they are optional.
Don’t ignore optional closing tags (e.g., and ).
Try to use class to render styles and avoid using id to write styles
<code>在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。 </code>
<span style="color: #008080;">1</span> <span style="color: #800000;"><!DOCTYPE html></span>
<code>通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后,需要避免在 HTML 中出现字符实体,直接提供字符与文档一致的编码(通常是 UTF-8)。 </code>
<span style="color: #008080;">1</span> <span style="color: #800000;"><head> </span><span style="color: #008080;">2</span> <span style="color: #800000;"> <meta charset="UTF-8"> </span><span style="color: #008080;">3</span> <span style="color: #800000;"></head></span>
<code>优先使用最新版本的IE 和 Chrome 内核 </code>
<span style="color: #008080;">1</span> <span style="color: #800000;"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></span>
<span style="color: #800000;"><meta name="keywords" content="your keywords"> <meta name="description" content="your description"></span>
<span style="color: #800000;"><meta name="viewport" content="width=640,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></span>
When favicon is not specified, most browsers will request favicon.ico in the root directory of the Web Server. In order to ensure that the favicon is accessible and avoid 404, one of the following two methods must be followed:
<span style="color: #800000;"><link rel="shortcut icon" href="path/to/favicon.ico"></span>
<span style="color: #800000;"> <meta charset="UTF-8"> <title>title</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="width=640,user-scalable=no" /> <!--<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">--> <meta http-equiv="cleartype" content="on"> <meta name="apple-mobile-web-app-title" content="..."> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="x-rim-auto-match" content="none"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"></span>
<code>尽量确保文档和模板只包含 HTML 结构,样式都放到样式表里,行为都放到脚本里。 根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。 </code>
<span style="color: #800000;"><link rel="stylesheet" href="code-guide.css"> <script src="code-guide.js"></script> <style> </span><span style="color: #008000;">/*</span><span style="color: #008000;"> ... </span><span style="color: #008000;">*/</span><span style="color: #800000;"> </style></span>
<code>尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。 在编写 HTML 代码时,需要尽量避免多余的父节点。很多时候,需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例: </code>
<span style="color: #800000;"><!-- Not so great --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="..."></span>
<code>用 document.write生成标签让内容变得更难查找,更难编辑,<b><strong>性能更差</strong></b>。应该尽量避免这种情况的出现。 </code>
<code>css代码本身都是全局的,所有应当采用css模块化思想,约束css的规则,尽量减少对全局的污染 </code>
<code>坚持限制属性取值简写的使用,属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括: padding margin font background border border-radius 大多数情况下,我们并不需要设置属性简写中包含的所有值。例如,HTML 头部只设置上下的 margin,所以如果需要,只设置这两个值。过度使用属性简写往往会导致更混乱的代码,其中包含不必要的重写和意想不到的副作用。 </code>
<code>css实例都是用的多行的格式,每一对属性和值占单独一行。这个是广泛使用的约定,不仅是在css文件中,也多出现在书里和文章里。许多人认为他的可读性很好。 然而在和团队的工作中,尤其是大型的css文件,我是将样式写成多行,并使用css模块化思想: </code>
<span style="color: #800000;">.alert-window </span>{<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #ff0</span>;<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 10px</span>; }<span style="color: #800000;"> .alert-window .window-title</span>{<br><span style="color: #ff0000;"> ...<br></span> }<span style="color: #800000;"> .alert-window .window-content</span>{<br><span style="color: #ff0000;"> ... <br></span> }<span style="color: #800000;"> .alert-window .window-buttom</span>{<br><span style="color: #ff0000;"> ...<br></span> }
PS: 1. 现在纯手写css比较少了,一般 都是用sass 和 less 来管理样式。<br> 2 书写sass 和 less 一行简直就是灾难 3 css 多行书写,还有个好处,可以要求团队,css 输出按照盒子模型的顺序去书写,更好维护,不强制但是倡导输出是一致的。
PS:前端团队很少有科班出身的,位运算符效率不见得会有太高的性能,优势非常不明显,出发是高强度的算法需要,否则还是不要有位运算;它会造成代码的苦涩难懂,不利于后续的维护
<span style="color: #800000;"> '1'+1==2 //false; 1+1==2 //true</span>
<span style="color: #0000ff;">if</span> (name !== 0 || name !== '' || name!==<span style="color: #0000ff;">null</span> || name!==<span style="color: #000000;">undefined) { ... } </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (name) { ... } </span><span style="color: #0000ff;">if</span> (collection.length > 0<span style="color: #000000;">) { ... } </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (collection.length) { ... }</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ d</span>='b'<span style="color: #000000;"> }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ d</span>='c'<span style="color: #000000;"> } d</span>=a?'b':'c';
<span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ b() } a </span>&&<span style="color: #000000;"> c(); </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(bb){ a</span>=<span style="color: #000000;">bb }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ a</span>=2<span style="color: #000000;"> } a</span>=bb||2
<span style="color: #0000ff;">if</span>(a=='1' || a=='b' || a=='c' || a=='ss'<span style="color: #000000;">){ bb(); }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ ... } </span><span style="color: #0000ff;">var</span> hasData=<span style="color: #000000;">{ </span>'1':1<span style="color: #000000;">, </span>'b':1<span style="color: #000000;">, </span>'c':1<span style="color: #000000;">, </span>'ss':1<span style="color: #000000;"> } </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(hasData[a]){ bb() }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ ... }</span>
<code>尽管浏览器允许你分配函数给一个变量,但坏消息是,不同的浏览器用不同的方式解析它 如果一定要定义函数,请用函数表达式方式声明; 如: </code>
<span style="color: #0000ff;">function</span><span style="color: #000000;"> b(){ ... } </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> b(){ ... } } </span><span style="color: #0000ff;">var</span> b=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ ... } </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ b</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ .... } }</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;">(a) b() </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> c(); </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ b(); }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ c(); }</span>
<code>这会在IE6、IE7和IE9的怪异模式中导致一些问题;同时,在ES3的一些实现中,多余的逗号会增加数组的长度。在ES5中已经澄清 </code>
<span style="color: #0000ff;">var</span> hero =<span style="color: #000000;"> { firstName: </span>'Kevin'<span style="color: #000000;">, lastName: </span>'Flynn'<span style="color: #000000;">, }; </span><span style="color: #0000ff;">var</span> heroes =<span style="color: #000000;"> [ </span>'Batman'<span style="color: #000000;">, </span>'Superman'<span style="color: #000000;">, ]; </span><span style="color: #0000ff;">var</span> hero =<span style="color: #000000;"> { firstName: </span>'Kevin'<span style="color: #000000;">, lastName: </span>'Flynn'<span style="color: #000000;"> }; </span><span style="color: #0000ff;">var</span> heroes =<span style="color: #000000;"> [ </span>'Batman'<span style="color: #000000;">, </span>'Superman'<span style="color: #000000;"> ];</span>
<code>在分配低调(unobtrusive)的事件监听器时,通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过,偶尔也会有多个元素同时符合触发条件,给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下,你就应该改用事件代理了 </code>
PS:手机端不适用GIF图的原因是:1.可以用css3动画来代替,css3动画只出发页面复合,性能更好,2 gif动画都在手机端显示不流畅,不能使用GPU加速,会造成页面重排,严重影响页面性能