CSS 樣式集分析

1. 
   

1. [selector]{

2. ? ?[property]:[value];

3. ? ?[<\- Declaration \->]

4. }

6. [選擇器]{

7. ? ?[屬性]:[值];

8. ? ?[<\- 聲明 \->]

9. }

編寫 CSS 樣式時(shí)，我習(xí)慣遵守這些規(guī)則：

• class 名稱以連字符（-）連接，除了下文提到的 BEM 命名法；

• 縮進(jìn) 4 空格；

• 聲明拆分成多行；

• 聲明以相關(guān)性順序排列，而非字母順序；

• 有前綴的聲明適當(dāng)縮進(jìn)，從而對齊其值；

• 縮進(jìn)樣式集從而反映 DOM；

• 保留最后一條聲明結(jié)尾的分號。例如：

1. 
   

1. .widget{

2. ? ?padding:10px;

3. ? ?border:1px solid #BADA55;

4. ? ?background\-color:#C0FFEE;

5. ? ?\-webkit\-border\-radius:4px;

6. ? ? ? \-moz\-border\-radius:4px;

7. ? ? ? ? ? ?border\-radius:4px;

8. }

9. ? ?.widget\-heading{

10. ? ? ? ?font\-size:1.5rem;

11. ? ? ? ?line\-height:1;

12. ? ? ? ?font\-weight:bold;

13. ? ? ? ?color:#BADA55;

14. ? ? ? ?margin\-right:\-10px;

15. ? ? ? ?margin\-left: \-10px;

16. ? ? ? ?padding:0.25em;

17. ? ?}

我們可以發(fā)現(xiàn)，.widget-heading?是?.widget?的子元素，因?yàn)榍罢叩臉邮郊群笳叨嗫s進(jìn)了一級。這樣通過縮進(jìn)就可以讓開發(fā)者在閱讀代碼時(shí)快速獲取這樣的重要信息。

我們還可以發(fā)現(xiàn)?.widget-heading?的聲明是根據(jù)其相關(guān)性排列的：.widget-heading?是行間元素，所以我們先添加字體相關(guān)的樣式聲明，接下來是其它的。

以下是一個(gè)沒有拆分成多行的例子：

?復(fù)制代碼

1. 
   

1. .t10 ? ?{ width:10% }

2. .t20 ? ?{ width:20% }

3. .t25 ? ?{ width:25% } ? ? ? /\* 1/4 \*/

4. .t30 ? ?{ width:30% }

5. .t33 ? ?{ width:33.333% } ? /\* 1/3 \*/

6. .t40 ? ?{ width:40% }

7. .t50 ? ?{ width:50% } ? ? ? /\* 1/2 \*/

8. .t60 ? ?{ width:60% }

9. .t66 ? ?{ width:66.666% } ? /\* 2/3 \*/

10. .t70 ? ?{ width:70% }

11. .t75 ? ?{ width:75% } ? ? ? /\* 3/4\*/

12. .t80 ? ?{ width:80% }

13. .t90 ? ?{ width:90% }

https://www.wanxiangyundang.top/read/CSS-Guidelines/spilt.3.css.md