在這篇文章中，我想跟你分享 20 條由 CSS 社區推薦的約定和最佳實踐。 有些建議可能比較適合新手，而有些則更高級一些，但我希望每個人都可以在本篇文章中收獲自己不知道的知識。

01、謹慎使用外邊距屬性

與其它的屬性不同，垂直方向上的外邊距相遇時將會發生折疊。這意味著如果一個元素的下邊距遇到了另一個元素的上邊距，那么二者中較大的一個將被留下。下面是一個簡單的例子。

其實上述兩個元素在垂直方向上的距離并不是 70px， 而是 40px， 藍色正方形的 margin 沒有被計算在內。 有很多的方法消除這種默認的行為，但最好的方法是只使用一個方向上的 margin 屬性，比如說 margin-bottom 。

02、利用盒子模型布局

盒子模型自然有其存在的理由。float 和 inline-block 當然也可以工作，但它們都是樣式化文檔的基礎工具，而不是整個網站。從某種意義來說， Flexbox 是為更容易更精確創建我們想要的布局而設計的。

Flexbox 模型提供的一系列屬性給了開發者更大的靈活性，而且你一旦熟悉了它們，那創建任何響應式布局都是輕而易舉的事。瀏覽器對 Flexbox 的支持也已經接近完美，所以已經沒有什么理由能夠阻止你使用 Flexbox 了。

03、執行 CSS 重置

盡管這些年來情形已經有所好轉，但是各瀏覽器的默認行為還是存在很多分歧。解決這個問題最好的辦法就是使用一個 CSS 重置文件為所有元素重新設置默認樣式。這可以讓你在一個純凈的樣式環境下工作，并且在所有瀏覽器中產生相同的結果。

有很多的庫做這個工作做的非常不錯，比如 normalize.css, minireset, 和 ress， 糾正了瀏覽器間的不一致。如果你不想使用庫，你也可以自己制作一個簡單的 CSS 重置，像下面這樣。

這可能看上去比較苛刻，但是消除了默認的 margin 和 padding 我們將更容易的擺放我們的元素，而不用擔心它會占用額外的空間。box-sizing: border-box 是一個很受用的屬性，我們將在下面介紹這個屬性。

04、為所有元素使用 Border-box

許多初學者不知道 box-sizing 屬性，但它的確很重要。了解它的最好辦法就是看看它的兩個可選值。