程序員寫好看的代碼，不亞於寫一行好看的字
好看的代碼總是讓人心曠神怡，
不好，不規範的代碼，讓人看了想說mmp，
那我們就來學習一下規範的代碼怎麼寫的吧
以下來自B站的學習視頻：前端必備-阿里大廠前端開發規範！
一、命名規範
(一) 項目命名
- 全部採用小寫的方式
- 以中劃線分割
正確命名：mall-management-system (商城管理系統)
錯誤命名：mall-management-system 或 mallManagementSystem
(二) 目錄命名
- 全部採用小寫的方式
- 以中劃線命名
- 複數時，要採用複數結構
正確命名：sctipts / styles / utils / demo-scripts
(三) JS、CSS、SCSS、HTML、PNG等文件命名
- 全部採用小寫的方式
- 以中劃線命名
正確命名：render-dom.js / signup.css / index.html / company-logo
(四) 命名嚴謹性
-
嚴禁使用 拼音和中文混合的方式
-
嚴禁使用中文、中文拼音
-
正確使用 英文拼寫和語法
-
一些特殊的詞語可以採用國際通用的名稱
如：河南=henan / 人民幣=rmb
正確命名：movie(電影) / employee(員工)
錯誤命名：dianyin(電影) condition --> condi (×)
二、HTML規範（Vue Template通用）
(一) HTML類型
- 推薦使用 HTML5 的文檔類型申明
<!DOCTYPE html>
- 規定的字符編碼
<meta charset="UTF-8">
- IE兼容模式
<meta http-equiv="X-UA-Compatible" content="IE-Edge">
- doctypa 大寫
(二) 縮進
- 一個tab 使用兩個空格
- 嵌套的節點應該縮進
(三) 分塊註釋
在每一個塊級元素，列表元素 和 表格元素中，加上一對HTML註釋，註釋格式
<!-- 英文 中文 start -->
<!-- 英文 中文 end -->
例如：
<!-- header 頭部 start -->
<header>
<div>
<a href=""></a>
</div>
</header>
<!-- header 頭部 end -->
(四) 語義化標籤
HTML5 有很多語義化標籤，優先使用這些語義化標籤，避免每一個頁面都是 div或者 p
(五) 引號
**使用雙引號" " **而不是單引號''
三、CSS 規範
(一) 命名
- 類名使用小寫字母，以中劃線分割
.swiper-image { ... }
- id 使用 駝峯式命名
#header { ... }
-
scss中的變量、函數、混合、placeholder採用駝峯命名
-
class 的命名不要使用 標籤名
如：.p .div
(二) 選擇器
儘量使用直接子選擇器，否則，有時會造成性能損耗
不推薦：
.content .title { ... }
推薦：
.content > .title { ... }
(三) 儘量使用縮寫的屬性
不推薦：
border-style: solid;
border-width: 1px;
border-color: red;
推薦：
border: 1px solid red;
(四) 每個選擇器及屬性獨佔一行
不推薦：
img {
width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}
推薦：
img {
width: 100%;
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}
(五) 省略 0 後面的單位
border-width: 0;
(六) 避免使用 ID 選擇器及 全局標籤污染全局樣式
能不用 id選擇器 就不要 使用id選擇器，避免不是禁止
四、LESS 規範
(一) 代碼組織
-
將公告less文件放置在
style/less/common文件夾 -
按以下順序組織
@import- 變量聲明
- 樣式聲明
@import 'mixins/size.less'
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
(二) 避免嵌套等級過多
將嵌套深度限制在 3 級
不推薦：
.main {
.title {
.name {
color: #fff;
}
}
}
推薦：
.main-title {
.name {
color: #fff;
}
}