HTML編寫規範
阿新 • • 發佈：2018-09-04
按鈕 container project 開頭 table 目的 hellip 自己 內部
ps:需要用到媒體查詢，將媒體查詢放在盡可能相關規則的附近
eg: .declaration-order { display: block; float: right; background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; color: #333; font: normal 13px "Helvetica Neue", sans-serif; width: 100px; height: 100px; text-align: center; line-height: 100px; margin: 0 auto; padding: 10px 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; opacity: 1; transtion: all .5s ease 0s; animation: name initial 2s; } @keyframes name{ 0%{} 100{} /// from{} to{} } @media screen and (min-width) and (max-width){ and左右之間要留空格 }
了解更多請點擊，本文更多參照此文章
HTML和CSS編碼規範內容
一、HTML規範
二、CSS規範
三、註意事項：
四、常用的命名規則
五、CSS樣式表文件命名
六、文件命名規則
一、HTML規範：
1.代碼規範
頁面的第一行添加標準模式聲明 <!DOCTYPE html> 代碼縮進：tab鍵設置四個空格（通常在軟件右下角設置相應空格大小） html中除了開頭的DOC和 ‘UTF-8‘或者head裏特殊情況可以大寫外，其他都為小寫，css類都為小寫 建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言 lang="zh-CN" 不同doctype在不同瀏覽器下會觸發不同的渲染模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> .... </html>
引入 CSS 和 JavaScript 文件
根據HTML5規範, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值<!-- External CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* ... */ </style> <!-- JavaScript --> <script src="code-guide.js"></script>
2.註釋
<!--註釋內容--!> 註意：--後不要留空格，若留空格，其他註釋全加空格（方便後續程序開發）換句話說，註釋要全局統一eg: <!-- Better --!> <!--S 註釋內容--!> 為書寫規範，最好每一個需要註釋都需要開頭和結尾，減少後續麻煩和錯誤。不要換行。CSS、JS註釋亦然。 <!--E 註釋內容--!> <!-- No so great --!> <!-- S 註釋內容 --!> 為書寫規範，最好每一個需要註釋都需要開頭和結尾，減少後續麻煩和錯誤。不要換行。CSS、JS註釋亦然。 <!-- E 註釋內容-- !>
3.命名規範
class用 “-” ；ID用 “_” ；name:data-自定義名； 根據內容書寫語義化編碼：可用以項目名簡寫開頭-語義化名稱eg: class="tb-head"; id="tb_head"; data-head="tb-head";
4.屬性排序
（方便後臺程序員整理代碼) 1、根據屬性定義排序 : class,id,name排序 （建議用此方法） (class用於標識高度可復用組件，因此排首位，id用於標識具體組件，慎用，因此排第二位) class [強制]class用中劃線 ‘ - ‘ 區分 id, name [強制]ID用下劃線 ‘ _ ‘ 區分 data-* src, for, type, href title, alt aria-*, role eg: <a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <input class="form-control" type="text"> <img src="..." alt="..."> 2、特殊屬性可根據元素跟隨排序，後根據（1）方法排序 eg: <a href="#" class="..." id="..."</a> Example link </a> <input type="text" class="..."> 3、根據字母開頭順序排序 eg:<a class="bfl-head" data-head="bfl-head" href="javascript:;" id="bfl_head"></a>根據自己理解排序。
5.減少標簽量
<!-- Not so great --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="...">
6.布爾型屬性
布爾型屬性可以在聲明時不賦值。XHTML 規範要求為其賦值，但是 HTML5 規範不需要。換句話說，不用賦值。<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
二、css規範
1、語法
1.1、縮進
[強制]使用 4 個空格做為一個縮進層級，不允許使用 2 個空格 或 tab 字符。1.2、空格
[強制]為了代碼易讀性，每個聲明塊的左花括號前添加一個空格 [強制]每條聲明語句的" : "後應該插一個空格 [強制]屬性多值每個逗號後應該插入空格 eg:box-shadow,border-image [強制]不要在rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號後面插入空格 對於屬性值或顏色參數，省略小於 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代,替 -0.5px）1.3、選擇器
[強制]為選擇器分組時，將單獨的選擇器單獨存放在一行 eg:tr,td{} [強制] >、+、~ 選擇器的兩邊各保留一個空格。 [強制]為選擇器中的屬性添加雙引號 不允許單引號 例如，input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。 [強制] 如無必要，不得為 id、class 選擇器添加類型選擇器進行限定。 [建議] 選擇器的嵌套層級應不大於 3 級，位置靠後的限定條件應盡可能精確。 eg:/* good */ #error, .danger-message { font-color: #c00; } #username input {} .comment .avatar {} /* bad */ dialog#error, p.danger-message { font-color: #c00; } .page .header .login #username input {} .comment div * {}
1.4、行
[強制]每行不得超過 120 個字符，除非單行不可分割。 [強制]聲明塊右花括號應當成行 [建議] 對於超長的樣式，在樣式值的 空格 處或 , 後換行，建議按邏輯分組。 eg:background:url(....) 此處應有換行 no-repeat;1.5、屬性
[強制] 屬性定義必須另起一行。 [強制] 屬性定義後必須以分號結尾。 即每條聲明應單獨成行，以分號結尾 [建議] 在可以使用縮寫的情況下，盡量使用屬性縮寫。 eg:font: 12px/1.5 arial, sans-serif;1.6、前綴
[強制] 帶私有前綴的屬性由長到短排列，按冒號位置對齊。 [建議] 可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。1.7、簡寫
十六進制值應該全部小寫,盡可能簡寫 eg:#fff .避免為 0 值指定單位 例如，用 margin: 0; 代替 margin: 0px;/* Bad CSS */ main>nav { padding: 10px; } .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF } .selector, .selector-secondary, .selector[type=text] {padding:15px;margin:0px 0px 15px;} /* Good CSS */ main > nav { padding: 10px; } .selector, .selector-secondary, .selector[type="text"] { padding: 15px; margin-bottom: 15px; background-color: rgba(0,0,0,.5); background: transparent url(aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0 0; box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }
2.註釋
/* 註釋內容 */ 註意：*後不要留空格，若留空格，其他註釋全加空格（方便後續程序開發）換句話說，註釋要全局統一eg: /* S 註釋內容 */ 為書寫規範，最好每一個需要註釋都需要開頭和結尾，減少後續麻煩和錯誤。不要翻行。CSS、JS註釋亦然。 /* E 註釋內容 */
3.命名規範
1.應用 英文縮寫命名法，杜絕用中文拼音或者中文拼音縮寫（這是因為英文具有簡易性，必要時可上網搜索國際縮寫英文） 2. 只能出現小寫字符或者中劃線（破折號符），不用下劃線，駝峰命名法。 eg: .btn 或者 .btn-danger 3.避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思 4.class 名稱應當盡可能短，並且意義明確。 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。 基於最近的父 class 或基本（base） class 作為新 class 的前綴。 使用 .js-* class 來標識行為（與樣式相對），並且不要將這些 class 包含到 CSS 文件中。 在為 Sass 和 Less 變量命名是也可以參考上面列出的各項規範。 /* Bad example */ .t { ... } .red { ... } .header { ... } /* Good example */ .tweet { ... } .important { ... } .tweet-header { ... }4.選擇器
對於通用元素使用 class ，這樣利於渲染性能的優化。 對於經常出現的組件，避免使用屬性選擇器（例如，[class="..."]）。瀏覽器的性能會受到這些因素的影響。 選擇器要盡可能短，並且盡量限制組成選擇器的元素個數，建議不要超過 3 。 只有在必要的時候才將 class 限制在最近的父元素內（也就是後代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴類似於命名空間）。 /* Bad example */ span { ... } .page-container #stream .stream-item .tweet .tweet-header .username { ... } .avatar { ... } /* Good example */ .avatar { ... } .tweet-header .username { ... } //不要超過3個 .tweet .avatar { ... }5.聲明順序
5.1. 相關的屬性聲明應當歸為一組，並按照下面的順序排列：
* Positioning * Box model * Typographic * Visual 由於定位（positioning）可以從正常的文檔流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。 其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在後面。 eg: .declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1; }5.2.設置盒子模型 - 是否脫離標準（子絶父相）- 其他屬性
註意兼容性寫法（純屬個人習慣） 盒子模型 1.設置是否需要浮動元素 或者 轉塊(float,display) 2.設置盒子邊框、背景顏色、字體顏色（border,background，font,color） 3.設置寬高大小（width,height） 4.文字垂直居中（line-hight,text-align,vertical-align等等） 5.設置margin、padding值 標準流（子絶父相） position ：relative、absolute、static、fixed left/top/right/bottom z-index 其他屬性 opcaity、cursor等 css3新屬性 transition、transform、animation等 每個範圍可由首字母開頭為排序： eg:盒子模型中的第2條中，可由background,border,color等首字母為先排序; 但有些例外，如position肯定排先，後定義left等方向位屬性ps:需要用到媒體查詢，將媒體查詢放在盡可能相關規則的附近
eg: .declaration-order { display: block; float: right; background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; color: #333; font: normal 13px "Helvetica Neue", sans-serif; width: 100px; height: 100px; text-align: center; line-height: 100px; margin: 0 auto; padding: 10px 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; opacity: 1; transtion: all .5s ease 0s; animation: name initial 2s; } @keyframes name{ 0%{} 100{} /// from{} to{} } @media screen and (min-width) and (max-width){ and左右之間要留空格 }
5.3.按照首字母排列順序編寫
註意事項：
1. 盡量不使用 !important 聲明。
[建議] 當需要強制指定樣式且不允許任何場景覆蓋時，通過標簽內聯和 !important 定義樣式。2.媒體查詢（Media query）的位置
將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。3.帶前綴的屬性
當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便於多行編輯。 在 Textmate 中，使用 Text → Edit Each Line in Selection (??A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (??↑) 和 Selection → Add Next Line (??↓)。 Prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);4.單行規則聲明
對於只包含一條聲明的樣式，為了易讀性和便於快速編輯，建議將語句放在同一行 (能仔細分析，檢測錯誤)5.簡寫形式的屬性聲明
在需要顯示地設置所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下： padding margin font background border border-radius /* Bad example */ .element { margin: 0 0 10px; background: red; background: url("image.jpg"); border-radius: 3px 3px 0 0; } /* Good example */ .element { margin-bottom: 10px; background-color: red; background-image: url("image.jpg"); border-top-left-radius: 3px; border-top-right-radius: 3px; }6.Less 和 Sass 中的嵌套
避免非必要的嵌套。這是因為雖然你可以使用嵌套，但是並不意味著應該使用嵌套。只有在必須將樣式限制在父元素內（也就是後代選擇器），並且存在多個需要嵌套的元素時才使用嵌套。 // Without nesting .table > thead > tr > th { … } .table > thead > tr > td { … } // With nesting .table > thead > tr { > th { … } > td { … } }了解更多請點擊，本文更多參照此文章
常用的命名規則
class的命名
用中劃線 ‘ - ‘
頭：header 內容：content/container 尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center 登錄條：loginbar 標誌：logo 廣告：banner 頁面主體：main 熱點：hot 新聞：news 下載：download 子導航：subnav 菜單：menu 子菜單：submenu 搜索：search 友情鏈接：friendlink 頁腳：footer 版權：copyright 滾動：scroll 內容：content 標簽：tags 文章列表：list 提示信息：msg 小技巧：tips 欄目標題：title 加入：joinus 指南：guide 服務：service 註冊：regsiter 狀態：status 投票：vote 合作夥伴：partnerId的命名:
用下劃線 ‘ _ ‘
1)頁面結構 容器: container 頁頭：header 內容：content/container 頁面主體：main 頁尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center (2)導航 導航：nav 主導航：mainnav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子菜單：submenu 標題: title 摘要: summary (3)功能 標誌：logo 廣告：banner 登陸：login 登錄條：loginbar 註冊：register 搜索：search 功能區：shop 標題：title 加入：joinus 狀態：status 按鈕：btn 滾動：scroll 標籤頁：tab 文章列表：list 提示信息：msg 當前的: current 小技巧：tips 圖標: icon 註釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 合作夥伴：partner 友情鏈接：link 版權：copyrightCSS樣式表文件命名
主要的 master.css 模塊 module.css 基本共用 base.css 布局、版面 layout.css 主題 themes.css 專欄 columns.css 文字 font.css 表單 forms.css 補丁 mend.css 打印 print.css文件命名規則
項目命名 全部采用小寫方式，以下劃線分隔 例：my_project_name 目錄命名 參照項目命名規則； 有復數結構時，要采用復數命名法。 例：scripts, styles, images, data_models JS文件命名 參照項目命名規則。 例：account_model.js CSS, SCSS文件命名 參照項目命名規則。 例：retina_sprites.scss HTML文件命名 參照項目命名規則。 例：error_report.html 鳴謝：小碼農雯 轉載至：https://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.htmlHTML編寫規範