CSS樣式編寫的簡明指南

 　　代碼如下:

　　[selector]{

　　[property]:[value];

　　[<- Declaration ->]

　　}

< p>[選擇器]{

 

　　[屬性]:[值];

　　[<- 聲明 ->]

　　}

　　編寫 CSS 樣式時，我習慣遵守這些規則：

　　class 名稱以連字符(-)連接，除了下文提到的 BEM 命名法;

　　縮進 4 空格;

　　聲明拆分成多行;

　　聲明以相關性順序排列，而非字母順序;

　　有前綴的聲明適當縮進，從而對齊其值;

　　縮進樣式集從而反映 DOM;

　　保留最後一條聲明結尾的分號。

　　例如：

　　CSS Code復制內容到剪貼板

　　.widget{

　　padding:10px;

　　border:1px solid #BADA55;

　　background-color:#C0FFEE;

　　-webkit-border-radius:4px;

　　-moz-border-radius:4px;

　　border-radius:4px;

　　}

　　.widget-heading{

　　font-size:1.5rem;

　　line-height:1;

　　font-weight:bold;

　　color:#BADA55;

　　margin-right:-10px;

　　margin-left: -10px;

　　padding:0.25em;

　　}

　　我們可以發現，.widget-heading 是 .widget 的子元素，因為前者的樣式集比後者多縮進了一級。這樣通過縮進就可以讓開發者在閱讀代碼時快速獲取這樣的重要信息。

　　我們還可以發現 .widget-heading 的聲明是根據其相關性排列的：.widget-heading 是行間元素，所以我們先添加字體相關的樣式聲明，接下來是其它的。

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

　　CSS Code復制內容到剪貼板

　　.t10 { width:10% }

　　.t20 { width:20% }

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

　　.t30 { width:30% }

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

　　.t40 { width:40% }

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

　　.t60 { width:60% }

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

　　.t70 { width:70% }

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

　　.t80 { width:80% }

　　.t90 { width:90% }

　　在這個例子(來自inuit.css’s table grid system)中，將 CSS 放在一行內可以使得代碼更緊湊。