HTML 和 CSS 程式碼結構的基本準則

weixin_33785972發表於2016-03-01
HTMLCSS

基本準則
符合web標準, 語義化html, 結構表現行為分離, 相容性優良. 頁面效能方面,
程式碼要求簡潔明瞭有序, 儘可能的減小伺服器負載, 保證最快的解析速度.

html書寫規範

  1. 文件型別宣告及編碼: 統一為html5宣告型別<!DOCTYPE html>;
    編碼統一為<meta charset=”gbk” />, 書寫時利用IDE實現層次分明的縮排;

  2. 非特殊情況下樣式檔案必須外鏈至<head>…</head>之間;
    非特殊情況下JavaScript檔案必須外鏈至頁面底部;

  3. 引入樣式檔案或JavaScript檔案時, 須略去預設型別宣告, 寫法如下:
    <link rel=”stylesheet” href=”…” /><style>…</style><script src=”…”></script>

  4. 引入JS庫檔案, 檔名須包含庫名稱及版本號及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入外掛, 檔名格式為庫名稱+外掛名稱, 比如jQuery.cookie.js;

  5. 所有編碼均遵循xhtml標準, 標籤 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且所有標籤必須閉合, 包括 br (<br />), hr(<hr />)等; 屬性值必須用雙引號包括;

  6. 充分利用無相容性問題的html自身標籤, 比如span, em, strong, optgroup, label,等等; 需要為html元素新增自定義屬性的時候, 首先要考慮下有沒有預設的已有的合適標籤去設定, 如果沒有, 可以使用須以”data-”為字首來新增自定義屬性，避免使用”data:”等其他命名方式;

  7. 語義化html, 如 標題根據重要性用h(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可巢狀塊級元素;

  8. 儘可能減少div巢狀, 如
    <div><div class=”welcome”>歡迎訪問XXX, 您的使用者名稱是<div class=”name”>使用者名稱</div></div></div>
    完全可以用以下程式碼替代:
    <div><p>歡迎訪問XXX, 您的使用者名稱是<span>使用者名稱</span></p></div>;

  9. 書寫連結地址時, 必須避免重定向，例如：href=”[http://taobao.com/)”, 即須在URL地址後面加上“/”；

  10. 在頁面中儘量避免使用style屬性,即style=”…”;

  11. 必須為含有描述性表單元素(input, textarea)新增label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>須寫成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

  12. 能以背景形式呈現的圖片, 儘量寫入css樣式中;

  13. 重要圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title;

  14. 給區塊程式碼及重要功能(比如迴圈)加上註釋, 方便後臺新增功能;

  15. 特殊符號使用: 儘可能使用程式碼替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;

  16. 書寫頁面過程中, 請考慮向後擴充套件性;

  17. class & id 參見 css書寫規範.

css書寫規範

  1. 編碼統一為utf-8;

  2. 協作開發及分工: i會根據各個模組, 同時根據頁面相似程式, 事先寫好大體框架檔案, 分配給前端人員實現內部結構&表現&行為; 共用css檔案base.css由i書寫, 協作開發過程中, 每個頁面請務必都要引入, 此檔案包含reset及頭部底部樣式, 此檔案不可隨意修改;

  3. class與id的使用: id是唯一的並是父級的, class是可以重複的並是子級的, 所以id僅使用在大的模組上, class可用在重複使用率高及子級中; id原則上都是由分發框架檔案時命名的（如#header #footer #content #nav 等）, 為JavaScript預留鉤子的除外;

  4. 為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show(淘寶是用的J_開頭);

  5. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由 小寫英文 & 數字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 儘量使用簡易的單片語合; 總之, 命名要語義化, 簡明化.

  6. 規避class與id命名(此條重要, 若有不明白請及時與i溝通)
    (a） 通過從屬寫法規避, 示例見d;
    (b）取父級元素id/class命名部分命名, 示例見d;
    (c）重複使用率高的命名, 請以自己代號加下劃線起始, 比如i_clear;
    (d）a,b兩條, 適用於在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面程式碼
    <div id=”mainnav”></div>中加入新的div元素,按a命名法則:
    <div id=”mainnav”><div>…</div></div>,
    樣式寫法: #mainnav .firstnav{…….}
    按b命名法則: <div id=”mainnav”><div>…</div></div>,
    樣式寫法: .main_firstnav{…….}

相關文章