1.注意外边距折叠

与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：

Html

<div class="square red"></div>

<div class="square blue"></div>

CSS

.square {

    width: 80px;

    height: 80px;

}

.red {

    background-color: #F44336;

    margin-bottom: 40px;

}

.blue {

    background-color: #2196F3;

    margin-top: 30px;

}

红色方块与蓝色方块的上下间距是40px，而不是70px。解决外边距折叠的方法有很多种，对于初学者来说最简单的就是所有元素只使用一个方向上的margin，比如上下的外边距我们统统使用margin-bottom。

2. 使用flex进行布局

flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。

flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。

.container {

    display: flex;

}

3. 所有元素设置为Border-box

大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。box-sizing属性有两个值：

content-box（默认） - 当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素（100+2*10）。

border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:border-box的div元素，他的总宽度就是100px，无论它的内边距和边框有多少。

将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。

4. 保持选择器的低权重

css的选择器并不都是平等的。当初学习CSS时，我总是认为选择器会覆盖它上面的所有内容。然而，情况并非如此，就如我们在下面的示例中所说明的：

HTML

<a href='#' id='blue-btn' class="active">按钮</a>

CSS

a{

    color: #fff;

    padding: 15px;

}

a#blue-btn {

    background-color: blue;

}

a.active {

    background-color: red;

}

我们希望.active类中设置的样式会生效使按钮变为红色。但是它并不会起作用，因为按钮在上面有一个ID选择器，它同样设置了background-color，ID选择器具有更高的权重，所以按钮的颜色是蓝色的。选择器的权重大小规格如下：

ID (#id) > Class (.class) > Type (例如 header)权重也会叠加，于是a#button.active的权重要比a#button的高。一开始就使用高权重的选择器会导致你在后面的维护中不断的使用更高权重的选择器，最终选择使用!important，这是非常不推荐的，具体的原因紧接着就会讲到。

5. 不要使用!important

不要使用!important。现在看起来可以快速的解决问题，但最终可能会导致大量的重写。相反，我们应该花点时间找到CSS选择器不工作的原因并更改它。

唯一可以使用的!important的地方是当您想要覆盖HTML中的内联样式时，但是内联样式同样也是一个坏的习惯，应该尽量的避免。

6. 对于大型项目使用预处理器

你一定听说过它们 - Sass, Less, PostCSS, Stylus。预处理器是CSS的未来。它们提供诸如变量、CSS函数、选择器嵌套和许多其他很酷的功能，使CSS代码更易于管理，特别是在大型项目中。

举个简单的例子，下面是一个SASS代码的片段，它使用到了一些CSS变量和函数：

$accent-color: #2196F3;

a {

    padding: 10px 15px;

    background-color: $accent-color;

}

a:hover {

    background-color: darken($accent-color,10%);

}

预处理器的唯一的不足之处是它们任然需要编译成普通的CSS。而CSS推出的自定义属性则是真正意义上的预处理。

7. 使用AutoPrefixer达到更好的兼容性

浏览器前缀是CSS中最烦人的事情之一，每个属性需要的前缀是不一致的，你永远不知道到底需要哪一个，如果真的要把它一个一个手动添加到样式表中，那无疑是一个无聊的噩梦。

值得庆幸的是，有工具可以自动为我们提供添加浏览器前缀的功能，甚至可以决定需要支持哪些浏览器：

在线工具：Autoprefixer

文本编辑器插件：Sublime Text, Atom

代码库：Autoprefixer (PostCSS)

8. 压缩CSS文件

为了提高网站和应用程序的加载速度和页面负载，您应该使用压缩后的资源。压缩版本的文件将删除所有空白和重复，从而减少总文件的体积。当然，这个过程也会使样式表完全不可读，所以要在生产环境中使用.min版本，同时为开发保留常规版本。

有许多不同的方法来压缩CSS代码：

在线工具：CSS Minifier, CSS Compressor

文本编辑器插件： Sublime Text, Atom

代码库： Minfiy (php), CSSO, CSSNano (PostCSS, Grunt, Gulp)

平台部供稿