1.注意外边距折叠
与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：
HTML
class="square red">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;}2.使用flex进行布局
flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。
flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。
.container {display: flex;}3.重置元素的CSS样式
尽管这些年来有了很大的改善，但是不同浏览器对于各种元素的默认样式仍然存在很大的差异。解决这个问题的最佳办法是在CSS开头为所有的元素设置通用的CSS Reset重置代码，这样你是在没有任何默认内外边距的基础上进行布局，于是所产生的效果也就是统一的。
网络上已经有成熟的CSS代码库为我们解决浏览器不一致问题，例如normalize.css、minireset和ress，你可以在你的项目中引用它们。如果你不想使用第三方代码库，你可以使用下面的样式来进行一个非常基本的CSS reset：
* {margin: 0;padding: 0;box-sizing: border-box;}4.所有元素设置为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值会将元素撑开变形或者换行显示。
5.将图片作为背景
当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是标签。
这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。
举个例子
HTML
<section><p>Img elementp><img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">section><section><p>Div with background imagep><div>div>section>CSS
img {width: 300px;height: 200px;}div {width: 300px;height: 200px;background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');background-position: center center;background-size: cover;}section{float: left;margin: 15px;6.短横线命名
当class或者ID包含多个单词时，应使用连字符(-)，CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。
/* 正确 */.footer-column-left { }/* 错误 */.footerColumnLeft { }.footer_column_left { }7.不要重复设置
大多数CSS属性的值都是从DOM树中向上一级的元素继承的，因此才被命名为级联样式表。以font属性为例-它总是从父级继承的，您不必为页面上的每个元素都单独设置。
只需将要设置的字体样式添加到或
元素中，然后让它们自动向下继承。html {font: normal 16px/1.4 sans-serif;}8.使用AutoPrefixer达到更好的兼容性
浏览器前缀是CSS中最烦人的事情之一，每个属性需要的前缀是不一致的，你永远不知道到底需要哪一个，如果真的要把它一个一个手动添加到样式表中，那无疑是一个无聊的噩梦。
值得庆幸的是，有工具可以自动为我们提供添加浏览器前缀的功能，甚至可以决定需要支持哪些浏览器：
在线工具：Autoprefixer
文本编辑器插件：Sublime Text, Atom
代码库：Autoprefixer (PostCSS)
9.压缩CSS文件
为了提高网站和应用程序的加载速度和页面负载，您应该使用压缩后的资源。压缩版本的文件将删除所有空白和重复，从而减少总文件的体积。当然，这个过程也会使样式表完全不可读，所以要在生产环境中使用.min版本，同时为开发保留常规版本。
有许多不同的方法来压缩CSS代码：
在线工具：CSS Minifier, CSS Compressor
文本编辑器插件：Sublime Text, Atom
代码库：Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)
根据您的工作流程，可以使用上述任何一种方式。
10.验证
验证CSS可能不像验证HTML或JavaScript代码那么重要，但是通过工具运行一下你的代码仍然非常有用。它会告诉你是否犯了任何错误，警告错误的用法，并为您提供改进代码的提示。
就像压缩和Autoprefixer一样，有免费的工具可以利用：
在线工具：W3 Validator, CSS Lint
文本编辑器插件：Sublime Text, Atom
代码库：stylelint (Node.js, PostCSS), css-validator (Node.js)
来源：https://zhuanlan.zhihu.com/p/93551157
