Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

CSS設計規範[1]-樣式術語與CSS目錄索引

樣式術語

在開始討論書寫規則之前,先說明一下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做書寫,只要是階層出現三層以上,這三個註釋都可以在文件中交替使用。

 

Leave a Reply

*