css层叠优先级
选择器尽量少用id
尽量不要用!important
自己的样式加载在引用库样的后面
css继承
大部分具有继承特性的属性跟文本相关，还有少部分列表、表格的属性
可以使用inherit关键字显式指定一个属性值从父元素继承
盒模型-负外边距
padding、border、margin中，只有margin可以设置负值
外边距塌陷
产生外边距塌陷的情况：
- 两个兄弟元素之间相邻的上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻
消除外边距塌陷的方法：
- 在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻
- 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子在不同级BFC中
- line box的高度为所包含的位置最高的元素的顶部和位置最低的元素的底部的距离
网格布局
grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。
Grid和Flex布局的使用策略
Flex
- 一维布局
- 基于内容
- 浏览器兼容性更好
Grid
- 二维布局
- 基于布局
- 2017年后浏览器的版本普遍支持
- 大面积或整体布局推荐使用Grid布局
- 小面积或组件中，或Grid Item中可以使用Flex做灵活布局
- 层叠上下文
层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素之间也有顺序：
z-index只在同一个层叠上下文内比较
子元素的z-index无法超越父元素的z-index显示顺序
编写z-index的建议：
- 使用css变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置10或100，方便后续插入
transform、transition、animation--性能相关
如何写动画性能更好？
- 尽量不用触发reflow的属性
- 在遇到性能问题时可以出发硬件加速，比如设置will-change属性、设置transform3d等
- 尽量使用transform和opacity去写动画
响应式设计
推荐遵循原则
- 优先选用流式布局，如百分比、flex、grid等
- 使用响应式图片，匹配尺寸，节省带宽
- 使用媒体查询为不同的设备类型做适配
- 给移动端设备设置简单、统一的视口
- 使用相对长度，em、rem、vw作为长度度量
媒体查询
媒体查询允许某些样式只在页面满足特定条件时才生效。我么可以将媒体模型（如screen、print）以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）作为约束条件。
使用媒体查询的一些Tips
- 媒体查询同样遵循cascading层叠覆盖原则，min-和max-选一个
- 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
- 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点
设备像素
设备像素（物理像素）：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，是屏幕显示出不同的图像。
设备像素的设备相关，屏幕从工厂出来的那天起，它上面的物理像素点就固定不变了。
rem：根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像em那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局。
工程架构--CSS模块化
为了解决CSS全局污染，本是上是保证样式集合对应的选择器是唯一的，从这个角度，主流的单纯针对于防止全局污染的方案大概有：
- BEM命名规范：通过.block_element--modifier这种命名规范来约束开发者，从而实现样式隔离
- vue-loader 的scoped方案：通过编译的方式，在html元素上添加data-xxx的唯一属性，然后css添加属性选择器[data-xxx]的方式，实现样式隔离
- CSS Modules：通过编译的方式，将一个css file中的样式命名默认转换为一个全局唯一的名称，实现样式隔离，（常用css-loader或postcss-module）
