1. 注意外边距折叠

外边距重叠时，只会保留两个margin中较大的那个。

块格式化上下文 BFC

利用BFC避免margin重叠(高度塌陷问题，待补充)

2. flex布局，grid布局

阮一峰老师的文章

flex一维布局教程

grid二维网格布局教程

3. 重置css样式

如 normalize.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
复制代码

4. 所有元素设置border-box

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

box-sizing: border-box;
复制代码

限制总宽度为给定值，内边距及边框也包含在内；

5. 用背景图的形式展示图片

保持或改变图片原始尺寸和宽高比会更方便。

缺点是页面的Web可访问性会受到轻微的影响，因为屏幕阅读器和搜索引擎无法正确地获取到图像。这个问题可以通过CSS object-fit属性解决。

background-size: cover;
background-position: center center;
复制代码

6. 表格边框

贴合边框，不留缝。

border-collapse: collapse
复制代码

7. css 注释

/*---------------
    #Header
---------------*/
header { }

header nav { }

/*---------------
    #content
---------------*/
.content { }

/*  正确  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}
复制代码

8. 短横线命名

包含多个单词时，应使用连字符（-），CSS不区分大小写，也不建议使用下划线连接的命名方式。

9. 不要重复设置

只需将要设置的通用样式添加到<html>或<body>元素中，然后让它们自动向下继承。

并不是所有的属性都是可继承的，对于这些属性我们仍然需要在每个元素上单独设置。

body {
  font-size: 14px;
  line-height: 1.5;/*让它渲染行高是 渲染字体大小的1.5倍*/
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}
复制代码

10. 使用transform属性

最好使用transform来创建元素的位移或缩放等动效。

11. 保持选择器低权重

ID (#id) > Class (.class) > Type (例如 header)

权重也会叠加，于是a#button.active的权重要比a#button的高。

一开始就使用高权重的选择器会导致你在后面的维护中不断的使用更高权重的选择器，最终选择使用!important，这是非常不推荐的。

12. 不要使用!important

虽然可以快速解决问题，但最终可能会导致大量的重写。相反，我们应该花点时间找到CSS选择器不工作的原因并更改它。

13. em、rem与px

前两者构建响应式页面时使用，em单位在每一级中都是相对于父元素进行计算的。

使用rem进行全局大小调整；使用em进行局部大小调整。

14. css书写顺序

正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。

定位属性(position、display、float、left、top、right、bottom、overflow、clear、z-index等)
自身属性(width, height, padding, margin，border，background等)
文字系列(font, line-height, letter-spacing, color等)
文本属性(text-align，vertical-align，text-wrap，text-transform，text-indent，text-decoration，letter-spacing，word-spacing，white-space，text-overflow等)
css3等属性(box-shadow, border-radius, animation, transition等)

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能。

repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。也会影响浏览器渲染性能。

css语法解释器的过程

原理：浏览器的渲染流程:

① 解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构

② 构建render树：DOM树和CSS树合并之后形成的render树。

③ 布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。

④ 绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
复制代码

css样式解析到显示至浏览器屏幕上就发生在②③④步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。

div{
  width: 100px;
  height: 100px;
  background-color: red ;
  position: absolute;
}
复制代码

当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示，影响了用户体验。

注意：

a.render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。

b.有些情况，比如修改了元素的样式，浏览器并不会立即reflow或repaint，而是把这些操作积攒一批，然后做一次reflow，这也叫做异步reflow。但在有些情况下，比如改变窗口，改变页面默认的字体等，对于这些情况，浏览器会马上进行reflow。

c.为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
复制代码

15. 页面结构名称

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

16. CSS代码的命名规范

必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；
不允许单个字母的类选择器出现；
不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，已防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。
下划线 '_' 禁止出现在class命名中，全小写,统一使用 '-' 连字符.
禁止驼峰命名 className
见名知意

17. CSS代码注意事项

不要以完全没有语义的标签作为选择器,这会造成大面积污染
简写CSS颜色属性值
删除CSS属性值为0的单位
删除无用CSS样式
为单个CSS选择器或新申明开启新行
避免过度简写 , .ico足够表示这是一个图标 , 而.i不代表任何意思
使用有意义的名称，使用结构化或者作用目标相关的，而不是抽象的名称

18. 使用:not() 解决lists边框的问题

在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。

.nav li {
  border-bottom: 1px solid #666;
}

.nav li:last-child {
  border: none;
}
复制代码

更好的做法：not伪类(pseudo-class)

.nav li:not(:last-child) {
  border-bottom: 1px solid #666;
}
复制代码

19. 在表单元素上设置字体大小，以获得更好的移动体验

为了避免移动浏览器（iOS Safari等）在点击<select>下拉列表时放大HTML表单元素，请在添加font-size样式：

input[type="text"],
input[type="number"],
select,
textarea{
  font-size: 16px;
}
复制代码

20 OWL选择器

通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+

* + * {
  margin-top: 1.5rem;
}
复制代码

其它

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

提供诸如变量、CSS函数、选择器嵌套
使用text-transform转换字母为大写

text-transform: uppercase;
多使用开源库等解决方案
使用AutoPrefixer达到更好的兼容性，在线工具：Autoprefixer
压缩CSS文件

为了提高网站和应用程序的加载速度和页面负载
留心兼容性，使用caniuse
验证CSS，在线工具：W3 Validator, CSS Lint，代码库：stylelint

CSS代码技巧