樣式術語

在開始討論書寫規則之前，先說明一下CSS元素有什麼不一樣的術語。
selector(樣式名稱) {
    property(特性、屬性): value(值);
}

下面那一段稱為「樣式」或「樣式定義」。

CSS目錄索引 (Table of Contents)

為了能夠迅速的瞭解整個css的結構，我們會在每一支css前面加上Table of Contents，並依照樣式的階層做成樹狀結構的目錄，如果底下還有分支的，就在前方加個”+”，底下沒有分支的，就在前方加個”=”，這樣可以讓整個結構更清楚，也有助於我們搜尋。以下是table of contents的例子。

/*————————————————–
[TABLE OF CONTENTS]
+header
=ad72890
+wrapper
=logo
+content-wrapper
———————————————————-*/

除了在最前面的目錄外，在每個區塊前會用明顯的註釋來區隔，依照我們現在的書寫習慣分為三種階層的註釋方式，分別說明如下：

• 這個是最大階層的區塊註釋方式，一般底下都還會包含著中階層註釋。
  /* +header
  *—————————————————————*/
• 這是中階層的區塊註釋方式，也是最常用的註釋方式。
  /**
  *
  * +wrapper
  *
  **/
• 最後這個是最小階層的區塊註釋，長度是最大區塊的一半。
  /* =logo
  **************************************/

以上三種註釋是搭配文件的table of contents做書寫，只要是階層出現三層以上，這三個註釋都可以在文件中交替使用。