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