web開發中怎麼樣使css書寫規範?

在web開發中頁面設計時如何使css書寫規範是很重要的。正確規範的書寫css樣式表可以使提高網頁的速度以及，各種瀏覽器的相容性，以便於開發程式的人員更好的嵌入程式。對於現在的web2.0,到底怎麼書寫css樣式表，才算是最好的，最規範的！幾乎沒有什麼明確的規定。在整個開發的項目中，只要寫出一套最適合於團隊開發的最好了。當然了很多的css樣式書寫範是大同小異的。需要不斷的去歸納總結。

根據經驗總結出以下幾點規範，請大家參考一下：

一.所有的CSS的盡量採用外部調用:這是我認為最重要的一點,因為這影響載入頁面時的速度.

<LINK href="style/style.css" rel="stylesheet" type="text/css">

書寫時重定義的最先，偽類其次，自訂最後（其中a:link a:visited a:hover a:actived 要按照順序寫）便於自己和他人閱讀。

為了保證不同瀏覽器上字型大小保持一致，字型大小建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12pt 和14.7px 這是經過最佳化的字型大小，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字型大小比較合適。
 

二. 樣式名均以字母開頭，尾碼可包含字母、數字、底線和中劃線，樣式名盡量採用通俗易懂的英文單片語成，如.img .body-bg #left_nav等(後附一些通用的命名標準)；對於公用的自訂樣式可適當加入模組標識或comm標識,以免與獨立模組樣式產生衝突!

三.凡html內建標籤及CSS屬性名稱均採用大寫字母書寫，而自訂樣式名稱及CSS屬性值則均採用小寫字母寫書；如：P{...} BODY{...}  .p1{COLOR: red}  .li_bg{MARGIN: 0px;} 等；

四.能採用縮寫的樣式屬性盡量採用縮寫形式，如margin，padding，border等;
（原則：上-右-下-左 --> MARGIN: 1px 2px 3px 4px  上-(右左)-下 -->  MARGIN: 1px 2px 3px
（上下）-（左右）-->  MARGIN: 2px 4px   上右下左  --> MARGIN: 4px;  
字型顏色類：  #000000  -->  #000         #00FFDD -->  #0FD; 

附：縮寫參考
There are a lot of CSS shorthand properties.

    * font
      font: font-style font-variant font-weight font-size/line-height font-family;
    * margin
      margin: margin-top margin-right margin-bottom margin-left;
    * padding
      padding: padding-top padding-right padding-bottom padding-left;
    * border
      border: border-width border-style border-color;
          * border-top
            border-top: border-top-width border-top-style border-top-color;
          * border-right
            border-right: border-right-width border-right-style border-right-color;
          * border-bottom
            border-bottom: border-bottom-width border-bottom-style border-bottom-color;
          * border-left
            border-left: border-left-width border-left-style border-left-color;
          * border-width
            border-width: border-top-width border-right-width border-bottom-width border-left-width
    * background
      background: background-color background-image background-repeat background-attachment background-position;
    * list-style
      list-style: list-style-type list-style-position list-style-image;
    * outline
      outline: outline-color outline-style outline-width;

五. 在書寫樣式的過程中，同一划分模組的樣式盡量寫在一起，並適當加入注釋，以方便閱讀和尋找；如<-- Footer --><-- End Footer -->或者/* Footer */  /* End Footer */

六.樣式抽象,我們可以把一些常用的樣式抽象出來，做為一類樣式；如COLOR: red  FLOAT:left  FONT-WEIGHT: bold等 這些屬性我們可能要經常用到，我們是否需要為每個需要應用這個樣式的元素都單獨寫上一個樣式呢？答案是明確的：不需要； 我們可以定義：  .red{ COLOR:red }  .fleft{FLOAT:left} 這樣是不是要方便多了^_^

七. 效率規則:(css屬性書寫順序)

1.顯示樣式
    display/position/float/clear
2.自身樣式
    width/height/margin/padding/border/background 
3.內容樣式
    line-height/text-align/font系列（font-size/font-weight）/color/text-decoration/vitical-align

 

八.css樣式的命名:

對於css樣式表的命名書寫規範,請參考http://www.po-soft(listly).com/blog/listly/220.html (地址中去掉"(listly)")

 關於更多的css書寫規範,不止這些,還需要我們共同的來總結和學習,如果您有更好的見意,請留言!