通順一致的 CSS 編寫原則

通順一致的CSS編寫原則是翻譯自 Nicolas GallagherPrinciples of writing consistent, idiomatic CSS,我已盡力讓譯文淺顯易懂又不失本意,雖然看起來好像有種比起直接看原文更不容易懂了的感覺,安慰一下自己,至少原文真的看不懂的時候還能當作參考吧。
除了 CSS 沒再侈譯成串接樣式表外,diff 與 blame 也以術語形式保留,希望各位不吝指教以期改進。

Nicolas 就是大名鼎鼎的 normalize.css 作者,熱情推薦他的這篇 About HTML semantics and front-end architecture,如果哪時有空不知道要寫什麼的時候,再來挑戰翻譯看看好了。

這邊還是來補充一下我對這份指南的看法好了:

關於空白的使用,文件中他推薦的是空格,但我是跳格派(TAB)的擁護者(個人認為跳格比較合乎縮排的語意),雖然裡面提到不能混用空格跟跳格,但如果是以跳格來縮排的話,有些場合(例如函式參數的多行並列對齊)是可以再用上空格來整理排版的,不過在 CSS 的編寫上應該遇不太上就是。

關於註解的部分,還可以參考之前寫的〈用StyleDocco來撰寫CSS樣式指引文件〉。

至於主要的格式這邊,我也是推薦使用雙引號。第一個例子中 box-sizing 還有加上 vendor prefix,我知道在現在這個時間點如果要使用 box-sizing 是非得如此,但我自己是盡可能地減少使用那些還沒 un-prefixed 的屬性啦。而且在一篇純論述的文章裡其實可以省去這些 prefix 的,將來應該會被修掉,就當是我現在吹毛求疵吧。

最後實例的部份,值得一提的是在最近的修改中,採用了前面所沒有提到的註解方式,將區塊中所有的註解文字移到區塊之前,原本在文件中提到應該獨立成行的註解現在只剩下標注的數字編號並附在行尾,使得代碼的部份更為整齊劃一,也能做出更詳盡的註解敘述。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *