前端規範2-CSS規範

CSS規範

縮進

使用Tab縮進(至關於四個空格)

選擇器與{之間必須包含空格， 參1

屬性名和以後的:不容許包含空格， :與屬性值之間必須包含空格。

     例

列表性屬性值在單行時,後必須跟一個空格。

     例：

          

對於超長的樣式，在樣式值得空格處或，後換行，建議按邏輯分組。

     例：

選擇器

當用集合方式選擇且有多個選擇器時，建議聲明單獨寫在一行（利於維護）

     例

>、+、-選擇器的兩邊各留一個空格

　　例

屬性選擇器中的值必須用雙引號包圍

     例

      　　

屬性定義是同一類的寫在同一行（ 參-1）

     例

屬性定義後必須以分號結尾（特別是最後一個）

如無必要，不得爲 id、class 選擇器添加類型選擇器進行限定。

    說明：在性能和維護上，都有必定的影響

    例

         

1.使用 classes 而不是通用元素標籤來優化渲染性能。（下圖第891行和895行比較）

2.建議選擇器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘量精確。（ 參1）

3.避免在常常出現的組件中使用一些屬性選擇器 (例如，[class^="..."])。瀏覽器性能會受到這些狀況的影響。

4.只在必要的狀況下使用後代選擇器 

     以上1和2的例子

          

屬性簡寫

     在可以縮寫的狀況下，儘可能使用縮寫。

     若是須要重寫屬性時，儘可能避免沒必要要的屬性簡寫。

     例應該避免如下狀況：

          margin:3px 5px;

          margin-left:8px;

屬性書寫順序（ 參1， 參2ctrl+F:聲明順序）

• Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
• Box Model 相關屬性包括：border / margin / padding / width / height 等
• Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等
• Visual 相關屬性包括：background / color / transition / list-style 等

清除浮動

!important

     儘可能不要使用!important

     在第三方環境（理如定義一個模塊，模塊中使用在線的文本編輯器，能夠嘗試使用改屬性定義）

z-index

     暫時沒有用到太複雜的，在使用該屬性的時候標註便可

值與單位

數值（參1）

      當爲0到1之間的小數時，是否省略整數部分的0？

          例：opacity: .8;

     可是沒有查到省略小數點前零的緣由，因此這裏就暫時仍是寫上零

url()

     url()中的路徑不加引號

          例：background: url(bg.png);

    不使用絕對路徑可省去的協議名

          例：background: url(//baidu.com/img/bg.png);

                 //意思爲http://協議，有的資料說在IE中會請求兩次

長度

     省略零的單位

          padding: 0 8px;

顏色

     RGB顏色值 必須使用16進制的標記符號#RRGGBB。

     帶有alpha（透明）的顏色信息值使用rgba()。

     能使用縮寫的時候使用縮寫形式

     不容許使用顏色名，rgb()

     保證16進制的標記符號大小寫統一。（建議大寫）

2D位置（background-position）

     必須給出background-position的兩個方向的值。

          由於默認爲0% 0%,可是隻給一個方向的值，另外一方向會默認爲center屬性值。

文字

     font-family屬性應該使用英文

          例：font-family:"Microfoft YaHei";

     font-size屬性

          不得小於12px

          緣由：windows文字顯示效果差，不易辨認

     font-weight

          屬性值用數字表示。（100～900）

          實際只有400和700兩個檔分別等於normal和bold。

          已有瀏覽器支持600屬性值。（參1： 字體漫談）

     line-height應該使用相對值，由於會根據font-size值進行計算。

其它

屬性前綴

     兼容性寫法屬性由長到短冒號對其。

          例子