收集來自google、推ter、 騰訊、 淘寶等互聯網公司對前端 HTML 、CSS 、 Javascript 等一些規范。總結于下，有部分刪減。希望大家在書寫規范上起到一定作用。

前端HTML/CSS書寫規范

為何規范？**

• 規范不是一種約束，而是一種約定，強調團隊的一致性
• 加強團隊的合作性，提高協作效率
• 形成一種團隊文化，積累知識
• 規范最終是為項目服務的，我們所做的一切都是為了優化項目和流程提高我們的工作效率

最近收集來自google、推ter、 騰訊、 淘寶等互聯網公司對前端 HTML 、CSS 、 Javascript 等一些規范。總結于下，有部分刪減。希望大家在書寫規范上起到一定作用。規范沒有絕對，有不足之處敬請補充！**

HTML 規范

• 分離的標記、樣式和腳本

  結構、表現、行為分離

• 在可能情況下驗證你的標記

  使用編輯器驗證你的標記是否正確，一般編輯器都自帶有這個功能。

• 技術不支持的時候使用備胎，如canvas

• 編碼格式：使用UTF-8

• 語義性

  對于HTML5而言，例如header、footer、nav、section等跟div能實現的功能基本類似，但是語義性上有著天壤之別。

• TODO待定項

  尚未實現的或待定的內容一定要標識強調出來，利用TODO辨識，而非其他諸如@@來強調。
  在todo項中如果有必要列明聯系人，比如負責人。在TODO后追加一個冒號作為行動內容，例 如 TODO:增加HTML5模板

• 多媒體后備：為多媒體提供備選內容

  典型就是為img添加alt內容。

• HTML 的模塊化

  <div id="module-1" class="module">
        <h3>TITLE</h3>
          <p class="module-item">
       some text
           </p>
  </div> <!-- #module .module  end -->`

CSS 規范

一、CSS文件

• 注釋

  /*
  @name:  文件的名稱
  @description: 簡要的描述這個css 文件功能
  @require: 依賴文件，沒有就不用寫
  @author: 作者  最好附帶聯系方式(郵箱)
  */

• 文件編碼級

  編碼必須使用utf-8（無BOM）

二、 CSS書寫順序

不去完全按照某個書寫順序來寫。但我們應該養成良好的習慣，讓看代碼的人更易理解。易讀對于團隊協作來說是非常重要的：**

1. 框架為先，細節次之。
比如寫一個浮動容器的樣式，我們應該先讓這個容器的框架被渲染出來，讓大家看到基本的    網站框架。然后再再去渲染容器里面的內容。最終呈現給用戶. 通常像 color font padding     之類的，寫在后面。
    .selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
2.有因才有果。
比如想使用”圖片替換文字“技術，通常要使用的text-indent。如果我們使用標簽的是    span：<span>這個文字將被圖片替換</span>，那么正確寫法：

.thepic{display:block;text-indent:-9999em;}
我們應該是先將 span 變成”塊級元素“，再將文字 indent。而不是先 indent 再變成塊級 的。
又如我們，如果想讓一個 span 使用 margin, 那么我們應該這樣寫：

span{display:block;margin-bottom:10px;}
而非margin-bottom先行，因為沒有 display 之前，行內元素是沒有 margin 的。

• 1.位置屬性(position, top, right, z-index, display, float等)
• 2.大小(width, height, padding, margin)
• 3.文字系列(font, line-height, letter-spacing, color- text-align等)
• 4.背景(background, border等)
• 5.其他(animation, transition等)

三、 CSS書寫規范

• 模塊注釋

  /*區域模塊-1    分模塊的寫上注釋 */
  .classname, .ued{
      background:#f60 url(xxx/orange.png) no-repeat 0 0;
  }
  .ued>ul li>a{
       font-size:10px;
  }
  
  /*區域模塊-2 分模塊的寫上注釋  */
  .classname{
      width:950px;
      margin:0 auto;
  }

• 避免內聯樣式

• 避免使用低效選擇器，參考這里

• 不要隨意使用id

  id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先級優先與class，所以id應該按需使用，而不能濫用。

• 使用有效的CSS, 除非是bugs處理或專屬語法（瀏覽器私有前綴）

• 使用短ID或類命名，但確保他們不要太過隱晦，或直白（如#blue-button）

• 大型項目使用前綴，如#xyz-help, .xyz-column

• 選擇器盡可能簡單，如#example，而不是ul #example

• 使用縮寫

  border:1px solid #ccc      //   反對
  // 贊
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  
  color :#99ccff;  //  反對
  color :#9cf;     //  贊

• url()中不使用引號，0后面不跟單位

  margin: 0px auto; // 反對

  margin :0 auto // 贊

• 去掉小數點 0

  opacity : 0.8;  // 反對
  opacity : .8;   // 贊

• 每個聲明最后都要有分號（即使是最后一個）

• 避免瀏覽器hacks

• 瀏覽器前瀏覽器私有寫法在前，標準寫法在后。

  -moz-box-shadow: 1px 2px 3px #ddd;
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;

• 注釋

  根據需要解釋代碼，這個就不多說了，團隊開發這個非常重要，盡管很多時候大家不愿意遵守，但確實重要！！！

CSS樣式表文件命名

• 主要的 master.css
• 模塊 module.css
• 基本共用 base.css
• 布局、版面 layout.css
• 主題 themes.css
• 專欄 columns.css
• 文字 font.css
• 表單 forms.css
• 補丁 mend.css
• 打印 print.css

來自：http://my.oschina.net/frontendinfo/blog/184995