新公司的前端开发规范（初稿）_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

新公司的前端开发规范（初稿）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:46 AM

总体原则

缩进

对于所有编程语言，我们要求缩进必须是软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动画图片

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles