css規範

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

基本原則

  * 1. 自定義樣式為設計師自定義的新 CSS 樣式，影響被使用本樣式的區域，用於完成網頁中區域性的樣式設定。

  樣式名 “.”+“相應樣式效果描述的單詞或縮寫”例：“ .shadow ”
  文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“ .no12 ”、“ .no12-24 ”
 

  * 2. 重新定義HTML樣式為設計師重新定義已有的HTML標籤樣式，影響全部的被設定標籤樣式，用於統一網頁中某一標籤的樣式定義。樣式名“HTML標籤”例：hr { border: 1px dotted #333333 }

  * 3. 連結狀態樣式為設計師對連結不同狀態設定特殊樣式，影響被使用本樣式區域中的連結。

  該樣式寫法有2種： 
    a.nav:link
    nav.a:link
  第一種只能修飾<a>標籤中。
  第二種可以修飾所有包含有<a>標籤的其他標籤。

  * 4. 程式碼塊內容縮排，它能夠提高層次結構的清晰度。
 

@media screen, projection {
  html {
      background: #fff;
      color: #444;
  }
}

  * 5. 忽略瀏覽器的特定字首排序，但多瀏覽器特定的某個CSS屬性字首應相對保持排序（例如-moz字首在-webkit前面）。

  ...
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  ...

  * 6. 宣告完結，所有宣告都要用“;”結尾。
 

  /* not recommended */
  .test {
      display: block;
      height: 100px
  }
  /* recommended */
  .test {
      display: block;
      height: 100px;
  }

  * 7. 選擇器和宣告分行，每個選擇器和宣告都要獨立新行。

  /* not recommended */
  a:focus, a:active {
      position: relative;
      top: 1px;
  }
  /* recommended */
  a:focus,
  a:active {
      position: relative;
      top: 1px;
  }

  * 8. 規則分行，每個規則獨立一行，兩個規則之間隔行。

    ...

    html {
      background: #fff;
      ...
    }

    body {
      margin: auto;
      width: 50%;
      ...
    }

  ...

編碼規則

  * 1. 嚴禁特簡化命名。
  * 2. ID和class的命名。

  > 為ID、Class 使用語義化、通用的命名方式
    * 只允許使用的小寫字母、連字元、數字。
    * 應該從 ID 和 Class 的名字上就能看出這元素是幹嘛用的（角色、功能、狀態），而不是表象（顏色、位置等）或模糊不清的命名。
    * 應該優先慮以這元素具體目來進行命名，易於理解，且後期修改的可能性小。
    * 對與同級元素相比沒有特殊的意義的元素使用通用的命名。
    * 使用功能性或通用的名字可以減少不必要的文件或模板修改。

  ...
    /* not recommended: 無意義 不易理解 */
    #yee-1901 {}

    /* not recommended: 表達不具體 */
    .button-green {}
    .clear {}

    /* recommended: 明確詳細 */
    #gallery {}
    #login {}
    .video {}

    /* recommended: 通用 */
    .aux {}
    .alt {}
  ...

  * 3. 非必要的情況下，ID和class的名稱應儘量簡短。

  ...
    /* not recommended */
    #navigation {}
    .atr {}

    /* recommended */
    #nav {}
    .author {}
  ...

  * 4. 簡要傳達ID或class是關於什麼的。
    > 不要駝峰命名法和下劃線。
    > 選擇器前面加上特殊應用標識的字首（可選)。
    > 大型專案中最好在ID或class名字前加上這種標識性字首（名稱空間），使用短破折號連結。
    > 使用名稱空間可以防止命名衝突，方便維護，比如在搜尋和替換操作上。
    > ID和class名字有多單詞組合的用短破折號“-”分開。

  ...
    /* not recommended */
      .demoimage {}
      .error_status {}
      .errorStatus {}

    /* recommended */
      #video-id {}
      .ads-sample {}
  ...

  * 5. 通過這種方式，似的程式碼易懂且高效。
  * 6. 避免元素選擇器和 ID、Class 疊加使用
  * 7. 非必要的情況下不要使用元素標籤名和ID或class進行組合【影響效能】。
  * 8. 考慮避免使用父輩節點做選擇器 performance reasons【影響效能】。

  ...
    /* not recommended */
      ul#example {}
      div.error {}

    /* recommended */
      #example {}
      .error {}
  ...

  * 9. 屬性值為 0 時省略單位。

  ...
    /* not recommended */
      padding: 0px;

    /* recommended */
      padding: 0;
  ...

  * 10. 使用rem作為字號、長度單位。

  > 使用 px對可訪性會造成一定的問題，em 則隨著上下文不斷變化，計算較為繁雜。
    * 推薦使用 rem：[Font sizing with rem](https://snook.ca/archives/html_and_css/font-size-with-rem)。
    * 需要 1px 級別精準定位的，仍然使用 px。
    * 需要根據字號變化的（如 padding、margin 等）場景使用可以使用 em，較少不必要的程式碼。

  * 11. 屬性縮寫

  ...
    /* not recommended */
      border-top-style: none;
      font-family: palatino, georgia, serif;
      font-size: 100%;
      line-height: 1.6;
      padding-bottom: 2em;
      padding-left: 1em;
      padding-right: 1em;
      padding-top: 0;

    /* recommended */
      border-top: 0;
      font: 100%/1.6 palatino, georgia, serif;
      padding: 0 1em 2em;
  ...

  * 12. 屬性宣告順序
    > 1.Positioning。
    > 2.Box model。
    > 3.Typographic。
    > 4.Visual。
    > 由於定位（positioning）可以從正常的文件流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型決定了元件的尺寸和位置，因此排在第二位。

  ...
  .**** {   
    /* 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;
  }
  ...

  * 13. 必須為大區塊樣式添加註釋, 小區塊適量註釋。
  * 14. 減少使用影響效能的屬性, 比如position:absolute || float 。
  * 16. 背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模組製作。
  * 17. 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請為ie6單獨定義背景。
  * 18. 充分利用html自身屬性及樣式繼承原理減少程式碼量。

  ...
  <ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul>
  ul.list li{position:relative}  ul.list li span{position:absolute; right:0}
  即可實現日期居右顯示
  ...

註釋

  /* CSS推薦註釋，左右各空一個空格，區塊註釋說明 */
  .sell {
      /*background: #000;*/
  }

  /* CSS推薦註釋，註釋符號一上一下覆蓋整個要註釋的區塊，多行註釋 */
  /*
  .sell p {
      background: #000;
      font-size: 12px;
  }
  */

頁面內的樣式載入必須用連結方式

參考文件

• css：主要有縮排，換行，引號，註釋等等。可以參考：
  • idiomatic-css

ps:建議大家在各個產品，嚴格遵守規範，以便後期的維護以及程式碼的健壯性等。

如果文件有更好的補充和好的建議，歡迎聯絡@博主

如有雷同，請聯絡@博主。