如果你能認(rèn)真讀完此文，將對你收益匪淺井辆！
目錄
初衷
文件/資源命名
HTML
CSS
JavaScript
編輯器插件和配置文件
初衷
不管參與項目的人數(shù)有多少，確保每一行代碼都像是同一個人編寫的;
根據(jù)實際情況制定良好的代碼規(guī)范唐责；
遵守編碼風(fēng)格使代碼更容易維護(hù)懈凹，對長期項目大有裨益；
實施代碼規(guī)范增加代碼可讀性沟堡，提高協(xié)作開發(fā)效率；
實施代碼規(guī)范減少低級 bug 的出現(xiàn)概率矢空；
提供相關(guān)工具（插件）航罗，保障代碼規(guī)范的無縫接入。
1屁药、文件/資源命名
——1.1 通用規(guī)則
在 web 項目中粥血，所有的文件名應(yīng)該都遵循同一命名約定，使用語義化的文件命名，文件名要能“望文生義”复亏，盡量避免使用拼音趾娃；
文件名只使用字母 a-z，數(shù)字 0-9缔御，連字符 -抬闷，下劃線 _ 和句點 .；
文件命名以字母開頭而不是數(shù)字耕突，而以特殊字符開頭命名的文件笤成，一般都有特殊的含義與用處；
文件名中字母全部采用小寫眷茁，多個單詞用下劃線分隔（識別效率較駝峰體高）炕泳；
如需縮寫單詞，則應(yīng)使用約定俗成的縮寫形式上祈，如 btn培遵、nav、num登刺、img 等荤懂，不能自造單詞，以免引起歧義塘砸。
——1.2 目錄命名
參照文件命名通用規(guī)則节仿。
要合理將文件分類到不同目錄，避免一個目錄下存放大量的文件掉蔬。
——1.3 HTML文件命名
參照文件命名通用規(guī)則
——1.4 CSS,SCSS,LESS文件命名
參照文件命名通用規(guī)則廊宪。
壓縮版本的 CSS 文件，文件名后面需加上 .min 后綴女轿。
——1.5 JAVASCRIPT 文件命名
參照文件命名通用規(guī)則箭启。
壓縮版本的 JavaScript 文件，文件名后面需加上 .min 后綴蛉迹。
——1.6 圖片命名
參照文件命名通用規(guī)則傅寡。
圖標(biāo)類圖片，需在文件名前面加上 ico_ 前綴北救。
背景類圖片荐操，需在文件名前面加上 bg_ 前綴。
雪碧圖圖片珍策，需在文件名后面加上 _sprite 后綴托启。
Retina 圖片，需在文件名后面加上 _1x 或 _2x 后綴來標(biāo)記原圖和 2 倍圖攘宙。
2屯耸、HTML
——2.1 通用規(guī)則
盡量遵循 HTML 標(biāo)準(zhǔn)和語義拐迁，但是不應(yīng)該以浪費實用性作為代價；
任何時候都要用盡量小的復(fù)雜度和盡量少的標(biāo)簽來解決問題疗绣；
不要使用 HTML5 規(guī)范中已經(jīng)被廢棄的標(biāo)簽线召；
使用 label 包裹附加文字的表單輸入框(radio、checkbox)多矮；
標(biāo)簽名全小寫缓淹；
屬性名全小寫，用中劃線做分隔符工窍；
屬性值使用雙引號割卖，不要使用單引號；
不要在自動閉合標(biāo)簽結(jié)尾處使用斜線（HTML5 規(guī)范指出他們是可忽略的）患雏。
——2.2 縮進(jìn)
縮進(jìn)使用 1 個 Tab（占 2 個空格寬度）鹏溯；
除 head 和 body 外，嵌套的節(jié)點應(yīng)該縮進(jìn)淹仑；
每個塊級丙挽、列表、表格元素單獨占一行匀借，每個子元素都相對父元素縮進(jìn)颜阐；
堅決不要使用 Tab 和空格混搭的縮進(jìn)方式。
使用 Tab 縮進(jìn)比空格縮進(jìn)有哪些優(yōu)勢吓肋？
空格縮進(jìn)一般通過鍵入 2 或 4 個空格來縮進(jìn)對齊凳怨，其按鍵成本比 Tab 高得多（有些 IDE 可以設(shè)置空格寬度），使用 Tab 縮進(jìn)更快捷是鬼；
使用 Shift + Tab 組合鍵可以選取多行向前縮進(jìn)肤舞，使用空格縮進(jìn)做不到；
Tab 可以替換均蜜，在支持正則搜索的編輯器里李剖，使用 \t 可以匹配搜索全部 Tab，空格縮進(jìn)做不到囤耳。
——2.3 文檔頭
頁面開頭必須有文檔頭聲明篙顺，推薦使用 HTML5 簡單的 doctype 聲明來啟用標(biāo)準(zhǔn)模式，使頁面在每個瀏覽器中盡可能一致的展現(xiàn)充择。
按照慣例德玫，doctype 應(yīng)大寫。
——2.4 字符編碼
在 HTML 中指定字符編碼聪铺，讓瀏覽器輕松化焕、快速的確定適合網(wǎng)頁內(nèi)容的渲染方式。
字符編碼通常設(shè)為 UTF-8 铃剔。
——2.5 渲染模式
指定使用本地最高版本的 IE 來渲染頁面撒桨。
對于國內(nèi)常見的雙核瀏覽器，指定優(yōu)先采用極速模式（webkit 內(nèi)核）來渲染頁面键兜。（目前僅 360 瀏覽器支持）
——2.6 CSS 和 JAVASCRIPT 文件引入
無需為引入的 CSS 和 JavaScritp 指明 type 屬性（在 HTML5 規(guī)范中凤类，text/css 和 text/javascript 分別是他們的默認(rèn)值，省略后對頁面無影響）普气；
通常引入的 CSS 文件放在 內(nèi)谜疤；
一般情況下，JavaScript 腳本應(yīng)放在頁面底部现诀， 標(biāo)簽前面夷磕，以免阻塞頁面加載，同時也避免了文檔加載完成前 JS 無法獲取 DOM 元素的問題仔沿。
——2.7 屬性順序
HTML 屬性應(yīng)當(dāng)按照特定的順序依次排列坐桩，確保代碼的易讀性和可維護(hù)性。
Class 用于標(biāo)識高度可復(fù)用組件封锉，因此應(yīng)該排在首位绵跷；id 用于標(biāo)識具體組件，排在第二位成福。
——2.8 BOOLEAN 屬性
HTML5 規(guī)范中碾局，boolean 屬性不需要聲明屬性值。
Boolean 屬性的存在表示取值為 true奴艾，不存在則表示取值為 false净当。
3、CSS
—— 3.1通用規(guī)則
代碼風(fēng)格上要以具有可讀性蕴潦、可維護(hù)性為基本原則像啼，壓縮代碼的工作交給工具去做；
css 文件使用無 BOM 的 UTF-8 編碼品擎；
不允許有空的規(guī)則埋合；
元素選擇器用小寫字母萧朝；
不要在一個文件里出現(xiàn)兩個相同的規(guī)則桩砰；
不允許駝峰命名多個字母用短杠分割
每個屬性聲明末尾都要加分號蟆技。
——3.2 縮進(jìn)
與 HTML 縮進(jìn)方式一樣筷笨，縮進(jìn)使用 1 個 Tab（占 2 個空格寬度
——3.3 空格
屬性值前雄坪，即屬性名的 : 后加空格基显；
多個規(guī)則的分隔符 , 后加空格椭员；
選擇器 >雨涛、+衍菱、~ 前后加空格赶么；
{ 前加空格；
!important 的 ! 前加空格脊串；
@else 前后加空格辫呻；
屬性值中的 , 后加空格清钥；
SCSS 中的運算符前后要加空格；
每行行末不要有多余的空格放闺。
——3.4 換行
{ 后和 } 前要換行祟昭，如果只有一條屬性則例外，無需換行怖侦；
每個屬性獨占一行篡悟；
多個選擇器的分隔符 , 后要換行；
相鄰的兩段樣式之間要用一個空行隔開匾寝；
屬性組之間需要有一個空行隔開搬葬。屬性分組規(guī)范請參閱“聲明順序”部分。
——3.5 引號
最外層統(tǒng)一使用雙引號艳悔；
屬性選擇器中的屬性值要用引號急凰；
font-family 中含有空格的字體名需要加引號；
url 的內(nèi)容要用引號很钓。
CSS url 的內(nèi)容加引號有什么好處香府？
降低內(nèi)容路徑被 XSS 注入攻擊的風(fēng)險；
避免一些瀏覽器兼容問題码倦。
——3.6 注釋
注釋使用 /?注釋內(nèi)容?/企孩；
SCSS 中單行注釋用 // 注釋內(nèi)容，不會輸出到編譯后的 CSS 中袁稽；
如果希望將 SCSS 中的注釋保留輸出（即使在 compressed 輸出模式下）勿璃，則使用 /! 注釋內(nèi)容?/；
注釋的縮進(jìn)與下一行代碼保持一致推汽；
/?之后补疑、/ 之前和 // 之后要加一個空格；
// 寫在代碼右側(cè)時歹撒，其與左側(cè)代碼間隔 2 個空格莲组。
注： // 注釋只用于 SCSS 中。
——3.7 命名
命名要符合語義暖夭，盡量避免使用拼音（約定俗成的除外锹杈，例如 youku）、無意義或理解困難迈着、易產(chǎn)生歧義的字符竭望；
Class 類名使用小寫字母，以中劃線分隔裕菠；
僅當(dāng)作 JS 中選擇器使用的 class 類名咬清，加上 js- 前綴；
SCSS 中的變量和 placeholder 使用小寫字母，中劃線分隔旧烧；
id 采用小駝峰式命名影钉；
SCSS 中的函數(shù)、混合采用小駝峰式命名粪滤。
——3.8 聲明順序
推薦的樣式編寫順序依次為：
Positioning（定位）
Box model（盒模型）
Typographic（排版）
Visual（視覺）
Misc（雜項）
——3.9 簡寫和省略
顏色 16 進(jìn)制用小寫字母斧拍，可以簡寫的要簡寫雀扶；
根據(jù)實際情況選擇屬性的簡寫方式杖小；
屬性值如果是類似 0.x 的小數(shù)，則省略小數(shù)點前的 0愚墓；
屬性值如果是 0予权，則省略單位。
——3.10
前綴屬性
同個屬性不同前綴的寫法需要在垂直方向保持對齊浪册，具體參照示例的寫法扫腺；
無前綴的標(biāo)準(zhǔn)屬性應(yīng)該寫在有前綴的屬性后面。
如非必要村象，盡量不要手寫前綴屬性笆环，推薦使用自動化工具來處理，例如：autoprefixer厚者。
——3.11
雜項
如果樣式表文件中包含漢字（注釋）或其他 Unicode 字符躁劣，建議在第一行加上 @UTF-8 字符集聲明，避免亂碼库菲；
后代選擇账忘、子選擇器不要超過 4 層；
慎用 !important熙宇；
盡量少用 * 選擇器鳖擒。
最后：“相信有很多想學(xué)前端的小伙伴，今年年初我花了一個月整理了一份最適合2018年學(xué)習(xí)的web前端干貨烫止，從最基礎(chǔ)的HTML+CSS+JS到移動端HTML5等都有整理蒋荚，送給每一位前端小伙伴，53763馆蠕，1707這里是小白聚集地期升，歡迎初學(xué)和進(jìn)階中的小伙伴【＜福”
祝大家早日學(xué)有所成吓妆，拿到滿意offer，快速升職加薪吨铸，走上人生巔峰行拢。
