WEB前端規范

jopen 9年前發布 | 160K 次閱讀前端規范前端技術

1. 規范說明

此為前端開發團隊遵循和約定的代碼書寫規范，意在提高代碼的規范性和可維護性。
此規范為參考規范，不全是硬性要求，部分硬性約定見下一條書寫規范，統一團隊編碼規范和風格。讓所有代碼都是有規可循的，并且能夠得到沉淀，減少重復勞動。

1.1 結構說明

-- 項目結構
----|---- CSS文件結構
----|---- JS文件結構

2. 書寫規范

2.1 樣式與內容分離

2.1.1 項目結構

--- 
 |---- index.html             入口頁    
 |---- js/                    JS //具體見JS細化結構                 
 |---- css/                   CSS //具體見CSS細化結構

2.1.2 重構步驟約定

index.html全部樣式附著于class="xxx"注： 此時文件中不包含任何一個 id="xxx"
為上一步書寫 CSS style
[至此重構完成]
開始書寫js交互文件，使用ID和Class定位被操作句柄
向index.html中需要的地方添加id="xxx"及data-xxx="xxx"
[至此交互效果完成]

2.1.3 命名規范

文件及文件夾: 全部英文小寫字母+數字或連接符"-,_"，不可出現其他字符
如：../css/style.css, jquery.1.x.x.js
文件：調用/libs文件需包含版本號，壓縮文件需包含min關鍵詞，其他插件則可不包含
如：/libs/jquery.1.9.1.js/libs/modernizr-1.7.min.jsfileuploader.jsplugins.js
ID: 匈牙利命名法 & 小駝峰式命名法
如：firstNametopBoxListfooterCopyright
Class: [減號連接符]
如：top-itemmain-boxbox-list-item-1
盡量使用語義明確的單詞命名，避免leftbottom等方位性的詞語

2.1.4 格式&編碼

文本文件：.xxxUTF-8_(無BOM)_ 編碼
圖片文件：.png(PNG-24) .jpg(壓縮率8-12)
動態圖片：.gif
壓縮文件：.tar.gz.zip

2.2 CSS 細化規范

2.2.1 CSS 文件結構

--- ../css/
 |---- css/libs/reset.css                  CSS reset文件
 |---- … … 
 |---- css/images/                         主 CSS-sprite 圖片     
 |---- css/style.css                       主 CSS 樣式表
 |---- … … 
 |---- css/images/xxx/sprite.png           xxx 的 CSS-sprite 圖片
 |---- css/xxx-style.css                   xxx 的 樣式表

2.2.2 CSS(含Less) 文件結構

--- ../css/
 |---- css/libs/reset.less            CSS reset文件
 |---- css/libs/elements.less         Less 函數復用文件
 |---- … … 
 |---- css/images/                         主 CSS-sprite 圖片     
 |---- css/style.less                      主樣式Less
 |---- css/style.css                       less -> css 自動生成
 |---- … … 
 |---- css/images/xxx/sprite.png           xxx 的 CSS-sprite 圖片
 |---- css/xxx-style.less                  xxx 的 Less
 |---- css/xxx-style.css                   less -> css 自動生成

2.2.3 使用Less

在.less文件頭部引入 reset.less & elements.less，之后調用如下屬性傳參即可，具體使用說明見 -> Lesselements 官方文檔

@import "libs/reset.less";  
@import "libs/elements.less";

.gradient
.bw-gradient
.bordered
.drop-shadow
.rounded
.border-radius
.opacity
.transition-duration
.rotation
.scale
.transition
.inner-shadow
.box-shadow
.columns
.translate

2.2.4 CSS reset

CSS reset 文件使用：reset.css 或 reset.less

reset文件用于重設各個瀏覽器的默認樣式方案，解決其引起的耦合問題。
也可使用.clearfix清除浮動

2.2.5 CSS 注釋格式約定

/*
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@require: reset.css
@author: Andy Huang(andyahung@geekpark.net)
*/

其中，@require為可選項

CSS換行制表：使用 2 <del>或4</del> 個空格，而非[Tab]
書寫格式：
- CSS名稱+冒號+屬性
  如：.box1 {float:left;}
- 建議保留{左側空格，字體名用`包含如：.box1,.box2,.box3 {font-family:Courier,'Courier New';}`
- 避免中文，或使用轉義，推薦前者
  如：font-family: "Microsoft YaHei";font-family:\5fae\8f6f\96c5\9ed1;

2.2.6 CSS各屬性的排列順序：不做硬性要求

如：以下2種順序均可

.box {
  /* 順序1 */
  background: none repeat scroll 0 0 transparent;
  bottom: 11px;
  position: relative;
  width: 22px;
  z-index: 33;
}
.box {
  /* 順序2 */
  z-index: 33;
  width: 22px;
  bottom: 11px;
  background: transparent none repeat scroll 0 0 ;
  position: relative;
}

2.2.7 CSS嵌套規則

/* 推薦嵌套層級 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-nav .ui-list{}
.ui-table .ui-list{}

/* 不推薦 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-list{}
.ui-nav{}

2.2.8 CSS格式化

勿格式化，保留下面這種格式，增加可讀性和可維護性，后期后臺程序(如：PHP/Python)會將CSS壓縮成一行輸出：

.box{
  /* 勿格式化，增加可讀性 */
  background: none repeat scroll 0 0 transparent;
  bottom: 11px;
  position: relative;
  width: 22px;
  z-index: 33;
}

2.3 XHTML 細化規范

2.3.1 HTML 注釋格式約定

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Andy Huang(andyahung@geekpark.net)
-->

<div id="header">
    <div class="xxx">
        <span>HTML行內注釋格式</span>
    </div>
</div><!-- #header end-->

HTML換行縮進：采用 2 空格

2.3.2 HTML嵌套規則

/* 推薦嵌套層級 */
  <ul class="ui-nav">
    <li class="ui-nav-item"> some text
      <ul class="ui-nav-item-child">
        <li> some text
          <ul class="ui-list">
            <li class="ui-list-item"> some text</li>
          </ul
        ...
       </ul>
    </li>
    <li
    ...
  </ul>

2.3.4 * 第一行統一使用HTML5標準：<!DOCTYPE html>

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>極客公園 | 創新者社區</title>
  <meta name="keywords" content="xxxx, xxx, xxxxx" />
  <meta name="description" content="xxxxxxxxxxxxxxxxxxxx" />

2.3.5 Meta 的使用：（需要根據具體需求按需選擇）可參看：cool-head

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0"  />
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<script type="text/javascript" src="/js/xxx.js"></script>
<link rel="stylesheet" href="/css/xxx.css">

<script type="text/javascript">
    //Google 統計代碼 的位置在離</head>最近的位置
</script>

</head>

<img>標簽默認缺省格式：<img src="xxx.png" alt="缺省時文字" />避免出現src="" 問題
<a>標簽缺省格式：<a href="###" title="鏈接名稱">xxx</>注：target="_blank"根據需求決定
<a>標簽預留鏈接占位符使用###，參見：a標簽占位符問題
所有標簽需要符合XHTML標準閉合
一律統一標簽結尾斜杠的書寫形式：<br /><hr />注意之間空格
避免使用已過時標簽，如：<b><u><i>而用<strong><em>等代替
使用data-xxx來添加自定義數據，如：<input data-xxx="yyy"/>
避免使用style="xxx:xxx;"的內聯樣式表
特殊符號使用參考HTML 符號實體

2.4 JS 細化規范

2.4.1 JS 文件結構

---/js/
|---- /libs/plugin-1/       使用到的js插件1  
|---- /libs/plugin-2/       使用到的js插件2  
|---- /libs/plugin-3/       使用到的js插件3  
|---- script.js             單獨書寫的js  
|---- plugins.js            調用的plugins匯總  
|---- juqery-1.9.x.min.js   調用jq庫文件

JS 換行縮進：采用 4 空格
結束行需添加分號;
jQuery變量要求首字符為$, 私有變量:首字符為_; 盡量避免全局變量.
避免使用 eval()，setTimeOut使用調用函數，考慮重繪，回流操作對頁面影響參看：reflows，repaints
JS調試使用console.log()及console.dir()進行，避免使用彈出框，線上版需要注釋所有調試代碼
JS壓縮混淆工具: JS Compressor 如果使用了壓縮，需要留name-src.js在同路徑供今后修改使用

2.4.2 jQuery Call

<!-- Grab Google CDN jQuery. fall back to local if necessary -->  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>

2.4.3 jQuery Plugin

IE對HTML5標簽支持，以及瀏覽器特性檢測：Modernizr & html5shiv
<del>IE6 PNG 圖片支持：DD_belatedPNG</del>
定制&統一瀏覽器的滾動條樣式：jquery-scroll & Lionbars
hover提示效果文字：bootstrap-tooltips & tipsy
滾動條跟隨nav效果：bootstrap-scrollspy
提示冒泡文字：grumble.js
導航欄過渡效果：lavalamp
移動設備的滾動效果：iscroll 4
Mac OS Lion 風格的滾動條：Lionbars
彈性SlideShow：kwicks for jQuery
瀑布流：isotope
抖動效果：jQ shake
LightBox：fancyBox
KenDo UI：KenDo UI
textarea自適應高度：elastic
提示區域 & 提示層：noty
浮動話題泡：jQuery grumble
旋轉進度：jQuery Knob

2.4.4 JSON格式規范

參考JSON Style Guide翻譯，原版：Google JSON Style Guide

HTML 細化規范

HTMLhead部分的結構參看：cool-head (摘取必要內容即可)
css文件置于都頭部
jQuery及Google Analytics引用置于頭部
其他效果js及統計代碼文件置于尾部
HTML 代碼盡量過一遍HTML5 驗證
HTML 占位圖片使用 temp.im & placehold.us 圖片服務

2.5 Responsive Web 規范

從設計之處就堅持"Mobile First"的理念，在重構頁面的時候要靈活采取響應式的解決方案。

2.5.1 響應式實現途徑

* 設置 meta viewport 屬性

<meta name="viewport" content="width=device-width, initial-scale=1" />

* 引入不同尺寸設備的樣式表

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="enhanced.css" />
<![endif]-->

* 使用 CSS Media Queries 方法

@media screen and (max-width: 40.5em) {
  .product-img {
    width: auto;
    float: none;
  }
}
@media screen and (max-width: 480px) {
}

* JS控制導航欄在 resize 事件觸發后的可見性，如：

$(w).resize(function(){ //Update dimensions on resize
  sw = document.documentElement.clientWidth;
  sh = document.documentElement.clientHeight;
  checkMobile();
});
//Check if Mobile
function checkMobile() {
  mobile = (sw > breakpoint) ? false : true;
  if (!mobile) { //If Not Mobile
    $('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search
  } else { //Hide 
    if(!$('#nav-anchors a').hasClass('active')) {
      $('#nav,#search').hide(); //Hide full navigation and search
    }
  }
}

2.5.2 響應式解決方案

* 彈性圖片

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

* 自適應嵌入媒體

.video embed, .video object, .video iframe {
  width: 100%;
  height: auto;
}

* 禁用iPhone字體自適應功能：

html {
  -webkit-text-size-adjust: none;
}

* 讓 IE 9 以下的IE版本支持響應式：

<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2.6 Newletter 制作規范

CSS只可使用 內聯樣式表 ，如：style="margin:0;"
設計之初遵循： 圖上無文本，文本后無底紋 的規則
使用MailChimp HTML Email CSS Fix參看下文鏈接
引入CSS Reset for HTML Email參看下文鏈接
使用Table布局而非DIV
所有圖片使用IMG標簽，如：<img style="style="display:block" "src="" />
可以適當使用占位符spacer.gif
多用<br />換行而非<p>
整體最佳寬度為：550-600px
不使用Javascript
正式發送給用戶之前，多次測試

更多細節參考下面鏈接：
12 Killer Tips and Tricks for Building HTML Email

2.7 生產力工具推薦

2.7.1 for Mac OS

for more app detial check -> IUSETHIS

2.7.1.1 前端相關工具(Mac)

編輯器：Sublime Text 2 / TextMate 2 / Vim / Intellij IDEA
命令行：iTerm2
瀏覽器調試環境：Chrome / Firefox + Firebug
移動設備調試環境：Mozilla Fennec
兼容性測試：VirtualBox + Win XP（IE 8）
版本控制工具：GitHub for Mac / Versions / SourceTree
FTP工具：Filezilla / ForkLift
HTTP抓包及Post/Get模擬：Charles
PHP集成環境：XAMPP for Mac / MAMP
SQL數據庫管理：Sequel Pro
標注工具：Mark Man / xScope
取色拾色器： Frank DeLoupe / Sip / Snip / xScope
MarkDown編輯器：Mou
瀏覽器免刷新開發環境：LiveReLoad / CodeKit
CSS Sprite切圖工具：SpriteRight
Less -> CSS 編譯：CodeKit / LiveReLoad / Less
配色方案工具：ColorSchemer Studio
多瀏覽器Cookie管理：Cookie
圖片素材收集：Sparkbox / Pixa

2.7.1.2 其他效率工具

快速啟動及切換app：Alfred
剪切板歷史記錄：Alfred(Fretures -> Clipboard)
筆記：Evernote
輕量級GTD：Clear
壓縮解壓：The Unarchiver / Keka / iPack
語言文檔和快捷詞擴展：Dash
時間中斷提醒：BreakTime

2.7.2.1 前端相關工具(Windows)

編輯器：Sublime Text 2 / Vim / Intellij IDEA
命令行：Putty
瀏覽器調試環境：Chrome / Firefox
移動設備調試環境：Chrome Remote USB Debugging
版本控制：Subversion / Github for Windows
FTP工具：Filezilla
抓包工具：Fiddler2
MarkDown：MarkdownPad
瀏覽器免刷新開發環境：LiveReLoad / F5
Less -> CSS編譯：less.org(nodejs環境下編譯)
Haml -> Html編譯：haml.info(Gem下編譯)
響應式設計查看工具：Firefox Responsive Design View

2.7.2.2 其他效率工具(Windows)

筆記：Evernote
壓縮解壓：7z

2.7.3 其他收集

Firefox 擴展收藏集 -> Firefox Add-ons collections
Chrome 擴展 -> 待添加
Sublime Text 2 技巧 -> ST2 資源技巧匯總

2.8 相關技巧

Wiki page index

2.9 參考數據

涉及到設計->重構->兼容性->測試時可參考各瀏覽器的占用情況
-- updated:2013/02 - 2013/04 viaGoogle Analytics of GeekPark

<table>
<tbody valign="top"><tr>
<th align="center">總瀏覽器分布</th>
<th align="center">IE版本分布</th>
<th align="center">移動設備分布</th>
<th align="center">屏幕解決方案</th>
</tr>
<tr>
<td align="left">
<table>
<tbody><tr>
<th align="left">類別</th>
<th align="right">占有率</th>
</tr>
<tr>
<td align="left">Chrome</td>
<td align="right">40.39%</td>
</tr>
<tr>
<td align="left">Internet Explorer</td>
<td align="right">24.86%</td>
</tr>
<tr>
<td align="left">Safari & Safari (in-app)</td>
<td align="right">16.05%</td>
</tr>
<tr>
<td align="left">Android Browser</td>
<td align="right">10.57%</td>
</tr>
<tr>
<td align="left">Firefox</td>
<td align="right">5.99%</td>
</tr>
<tr>
<td align="left">Opera</td>
<td align="right">0.69%</td>
</tr>
<tr>
<td align="left">Opera Mini</td>
<td align="right">0.37%</td>
</tr>
<tr>
<td align="left">Mozilla Compatible Agent</td>
<td align="right">0.14%</td>
</tr>
<tr>
<td align="left">Maxthon</td>
<td align="right">0.13%</td>
</tr>
</tbody></table>
</td>
<td align="right">
<table>
<tbody><tr>
<th align="left">版本號</th>
<th align="right">占有率</th>
</tr>
<tr>
<td align="left">IE 8</td>
<td align="right">60.97%</td>
</tr>
<tr>
<td align="left">IE 9</td>
<td align="right">17.11%</td>
</tr>
<tr>
<td align="left">IE 7</td>
<td align="right">8.39%</td>
</tr>
<tr>
<td align="left">IE 6</td>
<td align="right">7.63%</td>
</tr>
<tr>
<td align="left">IE 10</td>
<td align="right">5.87%</td>
</tr>
<tr>
<td align="left">IE 4</td>
<td align="right">0.02%</td>
</tr>
</tbody></table>
</td>
<td align="right">
<table>
<tbody><tr>
<th align="left">移動平臺</th>
<th align="right">占有率</th>
</tr>
<tr>
<td align="left">iOS</td>
<td align="right">50.39%</td>
</tr>
<tr>
<td align="left">Android</td>
<td align="right">48.05%</td>
</tr>
<tr>
<td align="left">Windows Phone</td>
<td align="right">0.96%</td>
</tr>
<tr>
<td align="left">Nokia</td>
<td align="right">0.33%</td>
</tr>
</tbody></table>
</td>
<td align="right">
<table>
<tbody><tr>
<th align="left">PC & Mac屏幕分辨率</th>
<th align="right">占有率</th>
</tr>
<tr>
<td align="left">1366x768</td>
<td align="right">21.55%</td>
</tr>
<tr>
<td align="left">1440x900</td>
<td align="right">12.70%</td>
</tr>
<tr>
<td align="left">1280x800</td>
<td align="right">9.60%</td>
</tr>
<tr>
<td align="left">1280x1024</td>
<td align="right">6.68%</td>
</tr>
<tr>
<td align="left">320x480</td>
<td align="right">6.38%</td>
</tr>
<tr>
<td align="left">1920x1080</td>
<td align="right">6.27%</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

使用團隊

此規范基于 MIT License 開源，持續更新維護中，可Star或Fork本項來形成你的規范，請以創建[issues] 的方式反饋，或發起Pull Request。

來自：http://www.jianshu.com/p/66f066126f5f

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1449061887764.html

前端規范前端技術