前端开发规范
一.基本規范
1.基本原則
結構、樣式、行為分離
盡量確保文檔和模板只包含html 結構 ，樣式都放到樣式表里，行為都放到腳本里。
縮進
統一兩個空格縮進，不要使用 Tab 或 空格混搭。
文件編碼
使用不帶 BOM 的UTF-8 編碼。
1.在HTML中指定編碼 <meta charset="utf-8">;
2.無需使用 @charset 指定樣式表的編碼，它默認為 UTF-8;
?
一律使用小寫字母
省略外鏈資源 URL 協議部分
省略外鏈資源 URL 中的 http / https 協議，使 URL 成為相對地址，其他協議的不能省（ftp）。
?
統一注釋
HTML注釋：模塊注釋，區塊注釋；
css注釋：組件塊和子組件塊以及聲明塊之間使用一空行分割，子組件塊之間三空行分隔。
js注釋：單行注釋，多行注釋，函數、方法注釋，文件注釋。
?
2.html
遵循html標準和語義，盡量使用最少的標簽并保持最小的復雜度。
2.1 通用約定
標簽
* 自閉合標簽，無需閉合（例如：img , input , br , hr 等）；
* 可選的閉合標簽，需閉合（例如</li> 或 </body> 等）；
* 盡量減少標簽數量；
Class 與 ID
* class應以功能或內容命名，不以表現形式命名；
* class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線 -? 分隔；
* 使用唯一的 id 作為 js ,同時避免創建無樣式信息的class;
屬性順序
html屬性應按照特定的順序出現以保證易讀性。
id , class , name , data-xxx , src , for , type , href , title? , alt , aria-xxx , role.
引號
屬性的定義，統一使用雙引號。
嵌套
a 不允許嵌套 div 這種約束屬于語義嵌套約束，與之區別的約束還有嚴格嵌套約束，比如 a 不允許嵌套 a 。
嚴格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多數會容錯處理，生成的文檔樹可能相互不大一樣。
語義嵌套約束
* <li> 用于 <ul> 或 <ol> 下；
* <dd> ，<dt>?用于? <dl> 下；
* <thead> ，<tbody> , <tfoot> ，<tr>?，<td>?用于??<table> 下；
嚴格嵌套約束
* inline-Level 元素，僅可以包含文本或者其他 inline-Level 元素；
* <a> 里面不可以嵌套交互元素 <a> , <button> , <select> 等；
* <p>里不可以嵌套塊級元素??<div> , <h1> ~ <h6> , <p> ，?<ul>/<ol>/<li> ,??<dl>/<dt>/<dd> , <form> 等；
布爾值屬性
html5 規范中 display , checked , selected 等屬性不用設置值。
2.2 語義化
2.3 HEAD
?
3. CSS
3.1 代碼組織
* 以組件為單位組織代碼段；
* 制定一致的注釋規范；
*?組件塊和子組件塊以及聲明塊之間使用一空行分割，子組件塊之間三空行分隔。
Class 與 ID
* 使用語義化、通用的命名方式；
* 使用連字符 - 作為ID,class 名稱界定符，不要駝峰命名法和下劃線；
* 避免選擇器嵌套層級過多，盡量少于3級；
* 避免選擇器， Class , ID 疊加使用；
聲明塊格式
* 選擇器分組時，保持獨立的選擇器獨占一行；
* 聲明塊的左括號 { 前添加一個空格；
* 聲明塊的右括號 } 應獨占一行；
* 聲明語句中的 ：后應該添加一個空格；
* 應以分號 ； 結尾；
* 一般以逗號分隔的屬性值，每個逗號后應該添加一個空格；
* rgb() 、rgba() 、hsl() 、hsla() 或rect() 括號內的值，逗號分隔，但逗號后不添加一個空格；
* 對于屬性值或顏色參數，省略小于1 的小數前面的0；
* 十六進制值應該全部小寫和盡量簡寫；
* 避免為 0 指定單位；
* 將媒體查詢放在盡可能相關規則的附近。不要單獨打包放在單一文件中，避免遺忘；
* 不要用 @import ,與 <link> 相比 ，@import 要慢很多，會增加額外請求。替代辦法：
使用多個元素；
通過 Sass 或 Less 類似的 css 預處理器將多個css編譯為一個文件；
其他 css 文件合并工具；
?
鏈接的樣式順序
?
3.2 模塊組織
組件命名
?
Components 最少以兩個單詞命名， 通過 -? 分離；
* 點贊按鈕（ .like-button ）
* 搜索框（ .search-form）
* 文章卡片（ .article-card）
?ELements(元素)
ELements 是 Components 中的元素
ELements 的類名盡可能取一個單詞；倘若使用兩個及以上的單詞表達，不應該使用中劃線和下劃線。
避免標簽選擇器。
?
?Variants 的 classname 應該帶有前綴中劃線 - ；
?
轉載于:https://www.cnblogs.com/wangqian888/p/11195215.html
總結
- 上一篇： UOJ #282 糖果
- 下一篇： InnerHTML、InnerText、