一些CSS的建议

检查本地字体是否存在或已安装

如果本地有这个字体，就不要从远端获取，从而提升Web的性能

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */
    local("Dank Mono"),
    /* Otherwise, download it! */
    url("//xksaturn.com/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

将line-height添加到body

你不需要将line-height添加到每一个元素上，比如<p>、<h*>等标签上，可以添加到body标签上来代替

body {
  line-height: 1.5;
}

给表单元素设置:focus样式

可以给表单元素设置统一的focus样式

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 8px;
  outline-offset: .1em;
}

垂直居中任何元素

请注意，这不是什么黑魔法，是可以真的垂直居中任何元素

html,
body {
  height: 100%;
  margin: 0;
}

/* flex布局 */
body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

/* grid布局 */
body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

参考资料：CSS-Tricks

尽量使用SVG icons

.logo {
  background: url("logo.svg");
}

猫头鹰选择器（Lobotomized Owl）

选中文档流中存在前一个任意兄弟元素的所有元素

* + * {
  margin-top: 1.5em;
}

统一table cell的宽度

.calendar {
  table-layout: fixed;
}

在没有文字的链接上用attr选择器

a[href^="http"]:empty::before {
  content: attr(href);
}

默认链接的样式

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

设置图片裂开的默认样式

如果图片裂开了，可以用一下CSS进行设置，使其更美观

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

也可以用伪类显示相关的文本

img::before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

全局单位用rem，局部大小用em

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

用:root适配任何视窗

比如字体大小的设置如下

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

参考链接