1.使用CSS复位
CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
现在元素的 margin 和padding 已为0，box-sizing可以管理您的CSS盒模型布局。
注意：如果你遵循接下来继承 box-sizing讲解的这个技巧, 你不需要在以上代码中添加 box-sizing 属性。
2.继承 box-sizing
从 html 元素继承box-sizing ：
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }
如此在插件或其它组件里改变 box-sizing 变得简单。
3.使用unset而不是重置所有属性
重置元素的属性时，不需要重置每个单独的属性：
button { background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0; }
你可以用all简写來指定所有元素的属性。 将该值设置为unset会将元素的属性更改为其初始值：
button { all: unset; }
注意： 所有速记在IE11中不被支持，目前正在考虑Edge的支持。 IE11不支持unset。
4.使用 :not() 选择器来决定表单是否显示边框
先为元素添加边框
/* 添加边框 */ .nav li { border-right: 1px solid #666; }
为最后一个元素去除边框
/* 去掉边框 */ .nav li:last-child { border-right:none; }
不过不要这么做，使用 :not() 伪类来达到同样的效果：
/* 去掉边框 */ .nav li:last-child { border-right:none; }
当然，你也可以使用 .nav li + li，但是 :not() 更加清晰，具有可读性。
5.为 body 元素添加行高
不必为每一个 ，元素逐一添加 line-height，直接添加到 body 元素：
body { line-height: 1.5; }
文本元素可以很容易地继承 body 的样式。
6.为表单元素设置:focus
有视力的键盘用户依靠焦点来确定键盘事件在页面中的位置。 使表单元素的焦点脱颖而出，然后与浏览器的默认实现保持一致：
a:focus, button:focus, input:focus, select:focus, textarea:focus { box-shadow: none; outline: #000 dotted 2px; outline-offset: .05em; }
7.垂直居中任何元素
不！这绝不是黑魔法，真的可以垂直居中任何元素：
html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
...還有CSS Grid:
body { display: grid; height: 100vh; margin: 0; place-items: center center; }
这还不够？垂直方向，水平方向？任何元素，任何时间，任何地点？CSS-Tricks 有篇好文讲到了各种居中的技巧。
注意： IE11 对 flexbox 的支持有点 bug。
8.逗号分隔列表
使列表的每项都由逗号分隔：
ul > li:not(:last-child)::after { content: ","; }
因最后一项不加逗号，可以使用 :not() 伪类。
注意： 这一技巧对于无障碍，特别是屏幕阅读器而言并不理想。而且复制粘贴并不会带走CSS生成的内容,需要注意。
9.使用负的 nth-child 来选择元素
使用负的 nth-child 可以选择1 至 n 个元素。
li { display: none; } /* 选择第 1 至第 3 个元素并显示出来 */ li:nth-child(-n+3) { display: block; }
或许你已经掌握了如何使用 :not()这个技巧，试下这个：
/* 选择除前3个之外的所有项目，并显示它们 */ li:not(:nth-child(-n+3)) { display: none; }
如此简单！
10.使用 SVG 图标
没有理由不使用 SVG 图标：
.no-svg .icon-only::after { content: attr(aria-label); }
SVG 在所有分辨率下都可以良好缩放，并且支持所有 IE9 以后的浏览器，丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
注意： 针对仅有图标的按钮，如果 SVG 没有加载成功的话，以下样式对无障碍有所帮助：
* + * { margin-top: 1.5em; }
