分享20条编写 CSS 代码的建议

在这篇文章中，我想跟你分享 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 属性，但它的确很重要。了解它的最好办法就是看看它的两个可选值。