1、目錄構(gòu)建規(guī)則
????1. 資源分類
????????1.1源代碼資源：指開發(fā)者編寫的源代碼，包括html、css、template等。
????????1.2內(nèi)容資源：指希望作為內(nèi)容提供給訪問者的資源，包括圖片、字體、flash、pdf等，最常用的應(yīng)該就是readme.md文件。
2. 具體規(guī)范
????2.1?項(xiàng)目名稱
????????全部采用小寫方式,以以中線分隔分割?
????????正例：project-name??反例：project_name-one/projectNameOne
????2.2?目錄命名
????????全部采用小寫方式，?以中劃線分隔，有復(fù)數(shù)結(jié)構(gòu)時(shí)，要采用復(fù)數(shù)命名法，?縮寫不用復(fù)數(shù)
????????正例：?scripts/styles/components/images/utils/layouts/demo-styles/demo-scripts/img/doc
????????反例：?script/style/demo_scripts/demoStyles/imgs/docs
????????【特殊】VUE?的項(xiàng)目中的?components?中的組件目錄，使用?kebab-case命名。
????????正例：?head-search/page-loading/authorized/notice-icon
????????反例：HeadSearch/PageLoading
????????【特殊】VUE?的項(xiàng)目中的除?components?組件目錄外的所有目錄也使用?kebab-case命名。
????????正例：?page-one/shopping-car/user-management
????????反例：?ShoppingCar/UserManagement
????????注：VUE組件的name屬性最好設(shè)置下，方便開發(fā)過程中VUE?Tools調(diào)試定位
2、 JS、CSS、SCSS、HTML、PNG?文件命名
????全部采用小寫方式，?以中劃線分隔。
????正例：?render-dom.js/signup.css/index.html/company-logo.png
????反例：?renderDom.js/UserManagement.html
3、 命名嚴(yán)謹(jǐn)性
????1.代碼中命名嚴(yán)禁使用拼音與英文混合的方式，更不允許直接使用中文方式
????????說明：正確的英文拼寫和語法可以讓閱讀者易于理解避免歧義
????????注：即使純拼音命名方式也要避免采用（拼音縮寫絕對(duì)不允許）
????????正例：henan/luoyang/rmb?等國際通用的名稱，可視同英文
????????反例：?DaZhePromotion?[打折]?/?getPingfenByName()?[評(píng)分]?/?int?某變量?=?3
????2.?杜絕完全不規(guī)范的縮寫，避免望文不知義：
????????反例：?AbstractClass“縮寫”命名成?AbsClass；condition?“縮寫”命名成?condi，此類隨意縮寫嚴(yán)重?降低了代碼的可閱讀性
4、HTML規(guī)范（VUE?Template同樣適用）
????1. HTML類型
????????推薦使用?HTML5?的文檔類型申明：
????????建議使用?text/html?格式的?HTML。避免使用?XHTML。XHTML?以及它的屬性，比如?application/xhtml+xml?在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限
????????規(guī)定字符編碼，IE兼容模式，DOCTYPE大寫等（遵循w3c標(biāo)準(zhǔn)）
????2. 縮進(jìn)
????????縮進(jìn)使用2個(gè)空格（一個(gè)Tab）；嵌套的節(jié)點(diǎn)應(yīng)該有縮進(jìn)
????3. 分模塊注釋
????????每個(gè)塊狀元素，列表元素和表格元素后加上一對(duì)HTML注釋
????4.語義化標(biāo)簽
????????優(yōu)先使用語義化標(biāo)簽（H5新增很多語義化標(biāo)簽）避免一個(gè)頁面都是div或者p標(biāo)簽
????????正例：<header /> 或者 <footer/>
????????反例：<div><p></p></div>
????5.引號(hào)
????????使用雙引號(hào)（“”）而不是單引號(hào)（‘?’）
????????正例：<div?class=”box”></div?class=”box”>
????????反例：<div?class=’box’></div?class=’box’>
????????注：能單標(biāo)簽結(jié)束盡量使用單標(biāo)簽結(jié)束（v-for?一定要設(shè)：key）
????????注：v-if不能和v-for同時(shí)使用，如果需要判斷最好在數(shù)據(jù)中處理（js中處理）
5、 CSS規(guī)范
????1.命名
????????A.類名使用小寫字母，以中劃線為分隔
????????B.Id采用小駝峰式命名
????????C.Scss/less中變量，函數(shù)混合，placeholder采用小駝峰式命名
????????ID?和?class?的名稱總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用的名稱，代替表象和?晦澀難懂的名稱
????????正例：.heavy{??font-szie:14px?}???.important{?color:green?}
????????反例：.fw-800{??font-szie:14px?}???.green{?color:green?}
????2.選擇器
????????A.Css選擇器中避免使用標(biāo)簽名
????????????從結(jié)構(gòu)、表現(xiàn)、行為分離的原則來看，應(yīng)該盡量避免?css?中出現(xiàn)?HTML?標(biāo)簽，并且在?css?選擇?器中出現(xiàn)標(biāo)簽名會(huì)存在潛在的問題。
????????B.使用直接子選擇器
????????????很多前端開發(fā)人員寫選擇器鏈的時(shí)候不使用?直接子選擇器（注：直接子選擇器和后代選擇器的
區(qū)別）。有時(shí)，這可能會(huì)導(dǎo)致疼痛的設(shè)計(jì)問題并且有時(shí)候可能會(huì)很耗性能。然而，在任何情況下，
這是一個(gè)非常不好的做法。如果你不寫很通用的，需要匹配到?DOM?末端的選擇器，?你應(yīng)該總是考慮直接子選擇器。
????????????正例：.content?>?.title{?font-szie:14px?}
????????????反例：.content?.title{?font-szie:14px?}
????3.盡量使用縮進(jìn)屬性
????????正例：padding：0?1px?2px；
????????反例：padding-bottom：2px；padding-left:1px;?padding-right:1px;padding-top:0px
????????注：scss、less中可使用嵌套的樣式寫法盡量使用嵌套
????4.樣式寫法規(guī)則
????????a.?不能寫行內(nèi)樣式
????????b.?能用class處理的，別用js
????????c.?不要用id方式去寫樣式，盡量用class
????????d.?不要在全局使用過于普遍化的class(如：.content,.common，.text)或標(biāo)簽寫全局樣式
????????e.?記得寫樣式重置，但禁止用*去做樣式重置的事情
????????f.?寫css3樣式動(dòng)畫，盡量避免位移屬性去操作，如margin-top,left,?right
6、JS規(guī)范
????1.變量名：使用小駝峰式命名
????2.運(yùn)算符前后需要加空格
????3.代碼縮進(jìn)兩個(gè)空格（一個(gè)Tab）
????4.語句規(guī)則
????????(1)簡單語句的通用規(guī)則：一條語句通常以分號(hào)作為結(jié)束符
????????(2)復(fù)雜語句通用規(guī)則：
????????????A.將左花括號(hào)放在第一行的結(jié)尾，并在左花括號(hào)前加空格
????????????B.右花括號(hào)獨(dú)立一行
????????????C.不能以分號(hào)結(jié)束一個(gè)復(fù)雜聲明
????5.對(duì)象規(guī)則
????????(1)將左花括號(hào)與類名放在同一行
????????(2)冒號(hào)與屬性值之間要有一個(gè)空格
????????(3)字符串使用雙引號(hào)，數(shù)字不需要
????????(4)最后一個(gè)屬性-值對(duì)（鍵值對(duì)）后邊不要加逗號(hào)
????????(5)將右花括號(hào)獨(dú)立放在一行，并以分號(hào)作為結(jié)束符
????????注：短對(duì)象代碼可以直接寫成一行
????6.命名規(guī)則
????????(1)變量和函數(shù)為小駝峰法標(biāo)識(shí),?即除第一個(gè)單詞之外，其他單詞首字母大寫（lowerCamelCase）
????????(2)全局變量為大寫（UPPERCASE），多單詞下劃線分隔（APP_NAME）
????????(3)常量為大寫（UPPERCASE），多單詞下劃線分隔（APP_NAME）
????????注：常量聲明const，不能使用let；變量聲明let，避免var出現(xiàn)
