尽量减少代码重复
对于响应式来说，每个媒体查询都会增加成本，添加的媒体查询越多，CSS代码就会越变得经不起折腾，这并不是说媒体查询就是一种不良实践，只要用对了，它就是利器，但是它只应该作为最后的手段，媒体查询不能以一种连续的方式来修复问题。它的工作原理基于特定的断点，如果大部分代码并不是以弹性方式来写，那么媒体查询能做的只是修补某个特定分辨率下的特定问题——这本质就是酱灰尘扫到地毯下面而已。
下面几种方式可以避免不必要的媒体查询：
- 使用百分比长度来取代固定长度。
eg：vw、vh、vmin、vmax
当需要在较大分辨率下得到固定宽度时，使用
max-width而不是width。
不要忘记为替换元素(比如imgobjectvideoiframe等)设置一个max-width
，值为100%。加入背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化。
background-size: cover当图片或其他元素以行列式进行布局时，让视口的宽度来决定列的数量。
Flexbox或者display: inline-block在使用多列文本时，指定
column-width
(列宽)而不是指定column-count(列数)。
合理使用简写
以下两行代码并不是等价的：
background: rebeccapurple;
background-color: rebeccapurple;
前者得到纯色背景，
后者只是单个属性，可能存在其他比如background-image声明。
展开式属性与简写属性配合使用可以让代码更加的DRY。
我应该使用预处理器吗
Stylus，Sass,Less如果使用得当，它们会在大型项目中可以让代码更加灵活
下面变量的玩法预处理器无法做到：
ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }
在引入预处理器的问题上需冷静决策，避免依赖和滥用。
