一、命名規(guī)范
1、項(xiàng)目命名
全部采用小寫方式耻陕, 以中劃線分隔
正例:tmall-management-system
反例:tmall_management-system / tmallManagementSystem
2拙徽、目錄命名
全部采用小寫方式, 以中劃線分隔诗宣,有復(fù)數(shù)結(jié)構(gòu)時膘怕,要采用復(fù)數(shù)命名法, 縮寫不用復(fù)數(shù)
正例:scripts / styles / demo-styles
反例:script / style / demoStyles
3召庞、JS岛心、CSS、SCSS篮灼、HTML忘古、PNG 文件命名
全部采用小寫方式, 以中劃線分隔
正例: render-dom.js / signup.css / index.html / company-logo.png
反例: renderDom.js / UserManagement.html
4穿稳、命名嚴(yán)謹(jǐn)性
代碼中的命名嚴(yán)禁使用拼音與英文混合的方式
正例:henan / luoyang / rmb 等國際通用的名稱存皂,可視同英文。
反例:DaZhePromotion [打折] / getPingfenByName() [評分] / int 某變量 = 3
5逢艘、頁面命名
能直觀的感受當(dāng)前文件的作用旦袋,以小駝峰方式命名
正例:login.vue / changePhone.vue
反例:Login.vue / ChangePhone.vue
二、HTML規(guī)范
1它改、縮進(jìn)
縮進(jìn)使用 2 個空格(一個 tab)疤孕,嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)。
2央拖、分塊注釋
在每一個塊狀元素祭阀,列表元素和表格元素后,加上一對 HTML 注釋鲜戒。注釋格式
<body>
<!-- header 頭部 start -->
<header>
<div class="container">
<a href="#">
<!-- 圖片會把a(bǔ)標(biāo)簽給撐開专控,所以不用設(shè)置a標(biāo)簽的大小 -->
<img src="images/header.jpg" />
</a>
</div>
</header>
<!-- header 頭部 end -->
</body>
3、語義化標(biāo)簽
<header></header>
<footer></footer>
三遏餐、CSS 規(guī)范
1伦腐、命名
- 類名使用小寫字母,以中劃線分隔
- id 采用駝峰式命名
- scss 中的變量失都、函數(shù)柏蘑、混合、placeholder 采用駝峰式命名
2粹庞、選擇器
- css 選擇器中避免使用標(biāo)簽名
- 考慮直接子選擇器
正例:
.content > .title {
font-size: 2rem;
}
反例:
.content .title {
font-size: 2rem;
}
3咳焚、盡量使用縮寫屬性
正例:
padding: 0 1em 2em;
反例:
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
4、省略0后面的單位
div{
padding-bottom: 0;
margin: 0;
}
四庞溜、LESS革半、SASS 規(guī)范
1、代碼組織
- 將公共 less 文件放置在 style / less 文件夾
- 按以下順序組織:@import、變量聲明督惰、樣式聲明
2不傅、避免嵌套層級過多(將嵌套深度限制在 3 級)
五、Javascript 規(guī)范
1赏胚、命名
- 采用小寫駝峰命名 lowerCamelCase访娶,代碼中的命名均不能以下劃線,也不能以下劃線或美元符號結(jié)束
- 方法名觉阅、參數(shù)名崖疤、成員變量、局部變量都統(tǒng)一使用 lowerCamelCase 風(fēng)格典勇,必須遵從駝峰形式劫哼。
- 常量命名全部大寫,單詞間用下劃線隔開割笙,力求語義表達(dá)完整清楚权烧,不要嫌名字長
- 字符串:統(tǒng)一使用單引號(‘),不使用雙引號(“)伤溉。
- 使用 ES6,ES7
- 條件判斷和循環(huán)最多三層
- 對上下文 this 的引用只能使用 self 來命名
六般码、Vue 項(xiàng)目規(guī)范
Vue 項(xiàng)目規(guī)范以 Vue 官方規(guī)范(https://cn.vuejs.org/v2/style-guide/)
1、父組件以命名規(guī)范為 KebabCase 格式乱顾,子組件以命名規(guī)范為pascal-case格式
2板祝、在 Template 模版中使用組件,應(yīng)使用 PascalCase 模式走净,并且使用自閉合組件券时。
<MyComponent />