Style Guideline 雜談

看了 HTML語意化及前端架構 About HTML semantics and front-end architecture 頗有感觸,對於 CSS 的撰寫方式確實是需要一些規範,才可以看了就知道在寫甚麼,好懂就好維護了!其實各家都有不同的 style guide,可以參考 CSS-Tricks 整理出來的 CSS Style Guides,其中包含了 GitHub、Google、CSS Wizardry 和 WordPress 等等大公司的規範。各家略有不同,不過大同小異。

制定 style guideline 我可沒這麼厲害,如果真的需要 guideline 可以看上述公司所訂出來的,選擇一個可以接受的,適度的調整成符合自己/公司需求的,然後在開始規範即可。以下會針對幾點特別有感觸的規範來做一些說明。

1. CSS Specificity

關於 CSS 權重計算方式可以參考 Specificity Calculator,權重由高至低可以分個四個部分計分

  1. inline style
  2. id
  3. class/attribute/pseudo-classes
  4. tag/pseudo-elements

四個分數分開計算,[1, 0, 0, 0] 分數會大於 [0, 10, 5, 3],其中 inline style 為 HTML 標記,而且分數權重最高,因此使用上要越少越好,最好是沒有,如果未來有往套用樣式的方向發展的話,則應該要全面地避免inline style的出現。

接下來是 id,其權重也是超高的,通常用來當定位用的,也就是網址後面的 hash-tag(#),以及表單(FORM)使用,此外也可以作為 layout 定義用,方便在不同的 layout 下給予不同的樣式,不過其實 layout 的部分使用 class 也可以解決此問題(不過通常為提高權重會使用 id)。

到了 class 與 attribute 的部分就會跟 UI 的 component 有關係,一個 component 通常會有一個 class 代表,並且針對不同的 state 給予不同的變形的 class,以 Bootstrap 的 button 為例,button 的 class 是 .btn,而其提供了不同顏色的 button,延伸出了 .btn-primary、.btn-info、.btn-xs、.btn-lg、.btn-block等等。至於 attribute 的部分可以參考 Bootstrap 的 icon,那時候的語法是 [class^="icon"], [class*=" icon-"] 所以 class 出現 icon- 的就會變成 icon 的樣式,其實不是那麼的好用,所以 Bootstrap 3 也改掉了。

最後是 tag,權重分數最低,通常都是 CSS Normalize用的還有 component 內的定義用的。

2. JavaScript-specific classes

這已經很久了,不過我是最近才知道!以前一開始直接使用 class 來做,後來發現太容易衝突了,而且畫面調整非常容易造成寫好的 JavaScript 突然就無法再使用了,所以後來演變成 [data-role=*] 的方式來 hook,缺點就是查詢的效率比較低還有要寫很長的 selector,最後變成 .js-* 的方式,解決了效率比較低的問題。另外狀態的部分可以使用 is-* 的方式來表示狀態,由 JavaScript 切換,由 CSS 來定義樣式。

3. single-class patten 與 multi-class pattern

這個最明顯的代表就是 Bootstrap 2 與 Bootstrap 3了,Bootstrap 2 是標準的 single-class 的代表,.btn 就已經有標準的樣式,而 btn-* 是針對 .btn 做修改。到了 Bootstrap 3,如果只有下 .btn,很抱歉你會得到一個透明的很奇怪的 button,而不是一個白色的 button,還需要在下一個 btn-default 才是一個白色的 button。不可否認的,一開始跳到 Bootstrap 3 真的是覺得 HTML 的 class 要多打好多,很煩…不過這也是一種趨勢吧…為了彈性,必須要有這樣的犧牲。

4. File organization

LESS、SCSS、SASS等等幫助 CSS 撰寫的工具需要更有組織性的開發,由於沒有實務經驗,沒辦法分享。

結語

要把 CSS 寫好,真的是非常非常的困難,個人覺得比把 JavaScript 寫好更難…不是說 JavaScript 不用規範,而是比起來應該更要先規範 CSS 才對,如果濫用了 !important 的話,整份 CSS 就沒有 re-use 可言,又或是用了 #id 的 selector,直接改掉了樣式,導致不想要修改的也一起改了…又為了避免被蓋掉,所以用了更高的權重,再來把他蓋掉…惡性循環下,畫面的 render 就變慢了,CSS 的檔案大小也很肥大,後人無法維護,就等著砍掉重練了…

PS: z-index 又是另外一個戰場了…

參考資料:

  1. HTML語意化及前端架構 About HTML semantics and front-end architecture
  2. CSS Styleguide - GitHub
  3. Specificity Calculator
  4. What the Heck Is CSS Specificity
  5. CSS Style Guides - CSS-Tricks
  6. CSS Pseudo-elements