CSS Reset Dawn.css

Box-sizing最佳實踐與Bootstrap的Reboot.css

box-sizing 是什麼?

CSS 的盒子模型 Box Model不會將 padding 與 border 計算到容器(如 div)的的寬度(width)當中,這就導致你所設定的容器寬度未必是最終寬度(需要加上 padding 與 border)。這被很多開發者所詬病,因此就有了box-sizing: border-box的設定,其效果便是將 padding 和 border 納入容器寬度。

如何應用 box-sizing

這顯然是很實用的設計,很多開發者將它用於所有 CSS 選擇器:

相對於border-box,原本的不計算 padding 與 border 的稱為:content-box。詳情請參考W3Schools

這一設定的問題是 box-sizing 是不被繼承的。如果需要在某些地方用回 content-box,這個 content-box 內部的容器依然會是 border-box:

因此 Chris Coyier 建議這樣設定:

*::before 和 *::after 也被加了進來,並且所有元素都會繼承上級的設定。

然而 Bootstrap 的 reset : Reboot.css 卻推翻了這一設定,理由是, Google Chrome 中存在一個小 bug:details無法正確繼承父級的 box-sizing 設定(一說 summary 也有同樣的情況)。這個 codepen 演示了這個 bug。

這個 bug 在2016年就已經報告到 Google Chrome,但一直沒得到重視。而 Bootstrap 的做法是,放棄繼承的部分:

但個人覺得,這樣的做法有種削足就履的感覺。再說,這個 bug 沒有得到 Google Chrome 的重視,也說明了它其實影響很小: 你上次用details是什麼時候?相反層層繼承是CSS的基本概念,遠比這個小 bug 重要,特別網頁中用到 component 時,某些 component 可能就是以 content-box 設計的。若沒有了繼承,它的設計就可能會亂套。因此,我比較傾向 Chris Coyier 的做法。

CSS Reset 與 Bootstrap 4 的 Reboot.css

研究 box-sizing 的過程中,考慮了一下 CSS Reset 的問題,因為最好的做法是將 box-sizing 的設定放在 Reset 中。 CSS Reset 最流行的方案有兩個: Eric MeyerNormalize.css。Eric Meyer 基本上取消掉預設設定(h1看起來跟h2一樣),使得所有瀏覽器效果都一樣。這意味著,你要重寫所有基本設定,如h1和h2的字體大小等。而 Normalize.css 則是讓瀏覽器回歸基本,讓你有一個一致的基礎來進行設計。它其中一個原則是避免武斷(opinionated),意即,只提供基本,不要求你使用某人的偏好。因此,Normalize.ccs 沒有設定字體等會因人而異的內容。 box-sizing 的設定自然是不會出現在 Normalize.css 當中。

Bootstrap 4 也引入了自己的 CSS Reset 方案:Reboot.css。它是基於 Normalize.css 的,加入了一些偏好設定,Bootstrap 的網站上有詳細說明。Bootstrap 仍是全世界最流行的前端框架,它的偏好設定也是以適合絕大多數開發者為考量,並做到與時俱進。例如,我們之前討論過的讓網頁使用系統字體(System Font Stack), Reboot.css 也做了同樣的處理。

但 Reboot.css 也有一些我不喜歡的地方。像上面提到的 box-sizing 的處理。另外,我習慣將 html 的字體設為 62.5%,即10px,這樣之後設定 rem 時便是以 10px 為基礎,而不是預設的 16px,更容易計算:

還有使用系統字體的部分,我想加入微軟雅黑(Microsoft YaHei)以加強對簡體中文的支持:

Dawn.css

為了方便以後的開發,我對 Reboot.css 做了一點修改,主要是以上提到的幾點,並上傳到 GitHub,命名為: Dawn.css。如果你也認同這些修改的話,歡迎參考和提供意見。

No comment yet, add your voice below!


Add a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Comment *
Name *
Email *
Website

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料