前端規範

時間 2019-11-20

標籤前端規範简体版

原文原文鏈接

轉自《Front End Standards》javascript

1. 規範說明

此爲前端開發團隊遵循和約定的代碼書寫規範，意在提升代碼的規範性和可維護性。
此規範爲參考規範，不全是硬性要求，部分硬性約定見下一條書寫規範，統一團隊編碼規範和風格。讓全部代碼都是有規可循的，而且可以獲得沉澱，減小重複勞動。css

1.1 結構說明

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

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.js fileuploader.js plugins.js
ID: 匈牙利命名法 & 小駝峯式命名法
如：firstName topBoxList footerCopyright
Class: [減號鏈接符]
如：top-item main-box box-list-item-1
儘可能使用語義明確的單詞命名，避免 left bottom 等方位性的詞語

2.1.4 格式&編碼

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

2.2 CSS 細化規範

2.2.1 CSS 文件結構

2.2.2 CSS(含Less) 文件結構

2.2.3 使用Less

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

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

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

2.2.4 CSS reset

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

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 或4 個空格，而非[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 註釋格式約定

HTML換行縮進：採用 2 空格

2.3.2 HTML嵌套規則

/* 推薦嵌套層級 */

some text

some text
- some text

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

<!DOCTYPE html>

極客公園 | 創新者社區

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

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

2.4 JS 細化規範

2.4.1 JS 文件結構

JS 換行縮進：採用 4 空格
結束行需添加分號;
jQuery變量要求首字符爲 $, 私有變量:首字符爲_; 儘可能避免全局變量.
避免使用 eval()，setTimeOut使用調用函數，考慮重繪，迴流操做對頁面影響參看：reflows，repaints
JS調試使用console.log()及console.dir()進行，避免使用彈出框，線上版須要註釋全部調試代碼
JS壓縮混淆工具: JS Compressor 若是使用了壓縮，須要留 name-src.js在同路徑供從此修改使用

2.4.2 jQuery Call

2.4.3 jQuery Plugin

IE對HTML5標籤支持，以及瀏覽器特性檢測：Modernizr & html5shiv
~~IE6 PNG 圖片支持：DD_belatedPNG~~
定製&統一瀏覽器的滾動條樣式：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 細化規範

HTML head部分的結構參看：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 屬性

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

* 使用 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版本支持響應式：

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
多用 換行而非
總體最佳寬度爲：550-600px
不使用Javascript
正式發送給用戶以前，屢次測試

更多細節參考下面連接：
12 Killer Tips and Tricks for Building HTML Email
Coding HTML Newsletters (EDM)

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 via Google Analytics of GeekPark

總瀏覽器分佈

IE版本分佈

移動設備分佈

屏幕解決方案

類別	佔有率
Chrome	40.39%
Internet Explorer	24.86%
Safari & Safari (in-app)	16.05%
Android Browser	10.57%
Firefox	5.99%
Opera	0.69%
Opera Mini	0.37%
Mozilla Compatible Agent	0.14%
Maxthon	0.13%

版本號	佔有率
IE 8	60.97%
IE 9	17.11%
IE 7	8.39%
IE 6	7.63%
IE 10	5.87%
IE 4	0.02%

移動平臺	佔有率
iOS	50.39%
Android	48.05%
Windows Phone	0.96%
Nokia	0.33%

PC & Mac屏幕分辨率	佔有率
1366x768	21.55%
1440x900	12.70%
1280x800	9.60%
1280x1024	6.68%
320x480	6.38%
1920x1080	6.27%

使用團隊

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

[src="" 問題]: http://js8.in/555.html "src="" 問題" [a標籤佔位符問題]: http://www.v2ex.com/t/48511/ "a標籤佔位符問題"

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。