html和css書寫規範

簡簡和單單發表於2016-04-21
HTMLCSS

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-width: 1px;
border-style: solid;
border-color: #ccc;

border:1px solid #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#OSC_h3_5

相關文章