CSS設計規範[5]-樣式編排十大要點

293 月

CSS設計規範[5]-樣式編排十大要點

  1. 大括號
    大括號包含了樣式定義所有的屬性值。開頭大括號跟樣式名稱同一行,結尾單獨在最後一行。
    說明-大括號
     
  2. 縮排 (1 tab = 4 spaces)
    這4個空白可以幫助代碼的可讀性。所以在每一行屬性的一開始加上4個空白。將tab設成4個真正的半型空白,不要混用tab和半型空白。
     
  3. 冒號之後多一個空白
    藉由在冒號後面增加一個空白,增加屬性和值之間的視覺重點,讓字不會全部靠在一起。
    說明-冒號後多一個空白
     
  4. 每個屬性自成一行
    不管樣式定義有多少,每個屬性都自成一行,是為了瀏覽及修改的便利性。如果樣式定義有很多屬性的話,X軸scrollbar就會出現,當要改這個樣式定義的時候就有一點點不方便。
    說明:每個屬性自成一行
     
  5. 在樣式定義區塊中間空一行
    在每一個樣式定義區塊之間,增加一行(只有一行)空行,例如:
    在樣式定義區塊中間空一行
     
  6. 結束分號
    好的慣例是在結束時,在每一行的最後加上分號,即使是最後一行屬性。這樣對於以後要加上其他屬性也更為方便,不用擔心之前的屬性是不是結束了。
     
  7. 雙引號
    CSS的撰寫慣例中很少會用到引號的,而且在CSS裡單引號和雙引號的效用是一樣的,不過為了統一風格,我們一律使用雙引號,另外雙引號的使用時間有幾個需要特別注意的地方。
    1.字型體系除了字體會有一個空白以上、字體有特殊字元、中文字體,其他一律不加引號。
    2.background-image的url不另外使用引號,簡寫的時候也一樣。
    3.如果必須使用in-line style的話,就要特別注意in-line style是使用雙引號還是單引號,如果在雙引號內使用雙引號,那麼瀏覽器就會認不出來而變成預設值,或是繼承上面的設定。
    說明-雙引號
     
  8. 按結構順序書寫樣式
    書寫css樣式時,應該是按照結構由上而下的順序書寫,並且將相同的區塊聚集在一起,例如在id區塊中,標題部份的樣式要聚集在一起,ul部份的樣式要聚集在一起,這樣的做法可以讓我們只看css就能在腦中構築頁面的樣子。
     
  9. 對齊
    如果有不同的區塊但是樣式是相同的,我們就會用逗號把selector串起來,但是因為名稱的長度沒有完全一樣,所以會照成tag沒有對齊的現象發生,這時候我們會刻意的把相同的tag對齊,讓整份文件看起來更清楚。
    說明-對齊
     
  10. 具體值 (Specificity)
    我們的設計方式是page底下的css都以自己的區塊名開始撰寫,前面不加上#content-main,所以一些不是以id做為區塊名的,可能會受到權重的影響,即使設定了屬性也無法變成你想要的樣式,這時候只要在前面再加上#content-main就能解決,如果不能,那就要再看看是不是其他地方的權重大於你要設定的地方。

    具體值是一個衡量CSS屬性優先順序的一個標準,具有一套判斷規則的計算方式,由四位數字階層組成,數字階層越大的代表具體值越大,越不容易被替換掉。以下介紹具體值的算法:
    0,0,0,0:*通用樣式
    0,0,0,1:所有的tag組件、虛擬組件(::after, ::before, ::first-letter, ::first-line)
    0,0,1,0:class、虛擬類別(:link, :hover)、屬性選擇器(element[attr])
    0,1,0,0:id 1,0,0,0:行內的樣式設定(<div style=”color: #f00;”>XXX</div>
    !important:可以把他視為10000非必要盡量避免使用,以下舉例說明:
    說明:具體值

    那如果遇到具體值是一樣的,那瀏覽器該如何判斷要採取哪個樣式呢? 以下有四種判斷依據:
    1. 看看有無明確針對該組件的樣式。
    2. 針對來源判斷,來源有三種:設計者author、瀏覽者user、瀏覽器agent。那如果這三個都設了!important該以哪個為主呢?
    以下列出優先順序:
      – 1. user important
      – 2. author important
      – 3. author normal
      – 4. user normal
      – 5. browser agent
    3. 根據具體值 (Specificity)。
    4. 根據串接順序。

 

Posted by admin  Posted on 29 3 月 
  • !important, CSS, Specificity
  • Post Comments 0