黃金定律
永遠遵循同一套編碼規範--不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的。
語法
- 用兩個空格來代替製表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
- 嵌套元素應當縮進一次（即兩個空格）。
- 對於屬性的定義，確保全部使用雙引號，絕不要使用單引號。
- 不要在自閉合元素的尾部添加斜線。
- 不要省略可選的結束標籤（closing tag）（例如</body>）。
命名規範
- 1.必須標註文檔類型 <!DOCTYPE html>
- 2.儘可能爲文檔標註語言屬性 <html lang="zh-CN">
- 3.明確聲明字符編碼 <meta charset="UTF-8">
- 4.代碼要符合語義化,並且儘量使用最少的標籤並保持最小的複雜度。
- 5.涉及到引號一律使用雙引號,命名一律使用小寫,連接單詞一律用中橫線-,
- 6.爲選擇器分組時，將單獨的選擇器單獨放在一行。每個屬性也單獨放在一行
.header,
.content,
.footer{
padding:10px;
}
- 7.可縮寫的屬性儘可能使用縮寫,值爲0的屬性省略單位,小於1的小數可省略前面的0
/*padding:0px 15px 0px 15px;
color: #ffffff;
background-color: rgba(255, 0, 0, 0.5);*/
padding:0 15px;
color: #fff;
background-color: rgba(255, 0, 0, .5);
命名方式
- 命名是功能的描述，如果不知道如何命名，把你能想到的中文名字翻譯成看着最順眼的英文
- 對於功能複雜的命名，可使用”是什麼-什麼特性”的命名方式，如”text-lesser”代表樣式地位更輕一點的文本，”dialog-open”代表打開了的彈窗
- 可充分利用語意化標籤，配合直接子元素選擇器去定位元素，省去一部分元素的命名
部分命名經驗
wrap – 用於外側包裹
header或者** head** – 用於頭部
main – 用於主體
container或** ct** – 包裹容器
aside – 用於側邊欄
nav – 用於導航條
tab – 用於Tab切換選項卡
content – 和header footer 對應，用於主要內容
footer或者foot – 用於尾部
ad – 廣告
subnav – 二級導航
menu – 菜單
tag – 標籤
message或者notice – 提示消息
summary– 摘要
logo– logo
search– 搜索框
login – 登錄
register– 註冊
username– 用戶名
password– 密碼
dropmenu – 下拉菜單
banner – 廣告條
copyright – 版權
modal或者 dialog – 彈窗
tooltip – 鼠標放置上去的提示
JS命名規約##
- 1.標識符
- 區分大小寫
- 第一個字符必須是字母、下劃線（_）、或者是$
- 後面的可以是字母、數字、下劃線、$
- 2.使用是實際意義的單詞
- 3.變量使用駝峯規則，第一個單詞首字母小寫，後面單詞首字母大寫
- 4.變量使用名詞，方法函數使用動詞開頭，常量全部用大寫字母，函數創建對象首字母大寫
作者：蓋被吹空調
鏈接：https://www.jianshu.com/p/9c2f791a6923
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。