1. 谨慎使用外边距属性
与其它的属性不同，垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距，那么二者中较大的一个将被留下。下面是一个简单的例子。
<div class="square red"></div>
<div class="square blue"></div>
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
其实上述两个元素在垂直方向上的距离并不是 70px， 而是 40px， 蓝色正方形的margin没有被计算在内。 有很多的方法消除这种默认的行为，但最好的方法是只使用一个方向上的margin属性，比如说margin-bottom。
2. 利用盒子模型布局
盒子模型自然有其存在的理由。float和inline-block当然也可以工作，但它们都是样式化文档的基础工具，而不是整个网站。从某种意义来说，Flexbox是为更容易更精确创建我们想要的布局而设计的。
Flexbox模型提供的一系列属性给了开发者更大的灵活性，而且你一旦熟悉了它们，那创建任何响应式布局都是轻而易举的事。浏览器对Flexbox的支持也已经接近完美，所以已经没有什么理由能够阻止你使用Flexbox了。
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
}
3. 执行 CSS 重置
尽管这些年来情形已经有所好转，但是各浏览器的默认行为还是存在很多分歧。解决这个问题最好的办法就是使用一个CSS重置文件为所有元素重新设置默认样式。这可以让你在一个纯净的样式环境下工作，并且在所有浏览器中产生相同的结果。
有很多的库做这个工作做的非常不错，比如 normalize.css, minireset, 和 ress， 纠正了浏览器间的不一致。如果你不想使用库，你也可以自己制作一个简单的CSS
重置，像下面这样。
* { margin: 0; padding: 0; box-sizing: border-box; }
这可能看上去比较苛刻，但是消除了默认的margin和padding
我们将更容易的摆放我们的元素，而不用担心它会占用额外的空间。box-sizing: border-box是一个很受用的属性，我们将在下面介绍这个属性。
4.为所有元素使用 Border-box
许多初学者不知道box-sizing属性，但它的确很重要。了解它的最好办法就是看看它的两个可选值。
content-box(default) - 当我们为元素设置了宽度和高度，但那只是内容的尺寸。所有的padding和border都在不包含在内容当中，也就是在内容的外部。举例来说，如果我们有一个div它的宽度为 100px，padding为 10px, 那么它的实际宽度为 120px。
border-box-padding和border被包含在 宽度和高度当中。 如果一个div的宽度为100px，而被设置了box-sizing: border-box， 那么它的宽度将始终是100px， 无论你添加多少padding和border。
为所有元素设置border-box将有利于样式化，而且你在也不用做乏味的数学运算了。
5.图像作为背景
当你为自己的站点添加图片时，尤其是你想做响应式设计的时候，利用一个div标签并为其设置background属性，而不是使用<img>元素。
似乎额外的工作并没有起到任何作用，但实际上这更利于你对图片设置样式，保持它们原有的尺寸或者根据比例变化，这需要借助background-size，background-size还有一些其它的属性。
<section>
<p>Img element</p>
<img src="" alt="bicycle">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
这种技术的一个缺点是你页面的可访问性可能略有打击，因为你的图片不会被屏幕阅读器和引擎正确抓取。 这个问题可以被 object-fit 解决，但它还不被所有浏览器支持。
6.更好的注释方式
CSS可能不是一门编程语言但它的代码仍然需要被记录，所以一些简单的注释将会对你的同事或者未来的自己很有帮助！
对于CSS中的一些比较大的模块，比如主要模块或者媒体查询，使用风格化的注释并且在其后留下一些空行。
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
设计中的一些细节或那些不是特别重要的模块，可以用单行注释。
/* Footer Buttons */
.footer button { }
.footer button:hover { }
另外，值得注意的是，CSS中没有//注释，所以当你需要注释的时候你需要使用/* */符号。
/* Do */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* Don't */
p {
padding: 15px;
// border: 1px solid #222;
}
7.命名连接
当class或者id不止一个单词的时候，需要使用-符号连接，CSS对大小写不敏感，所以骆驼命名法不是一个好的选择。很久以前，下划线不被支持所以破折号成为了默认约定。
/* Do */
.footer-column-left { }
/* Don't */
.footerColumnLeft { }
.footer_column_left { }
8.CSS 动画与变换
不要通过直接更改元素的宽度和高度去动画元素，或者是更改left/right/top/bottom。最好的办法是使用transform()属性因为它提供了更加圆滑的过渡效果而且可以让你的意图在阅读代码时更加易于理解。下面是一个例子，我们想动画一个ball，让它往右滑动。 不要去改变left的值，最好是使用translateX()。
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Not Cool*/
.ball.slide-out {
left: 500px;
}
/* Cool*/
.ball.slide-out {
transform: translateX(450px);
}
transform以及它的所有方法（translate, rotate, scale等）拥有几乎一致的浏览器兼容性，你可以自由使用它们。
网友评论