在按钮的伪元素没有其它用途的时候，这个方法确实是个很好的提升用户体验的点。
快速选择优化 -- user-select: all操作系统或者浏览器通常会提供一些快速选取文本的功能，看看下面的示意图：
快速单击两次，可以选中单个单词，快速单击三次，可以选中一整行内容。但是如果有的时候我们的核心内容，被分隔符分割，或者潜藏在一整行中的一部分，这个时候选取起来就比较麻烦。
利用 user-select: all，可以将需要一次选中的内容进行包裹，用户只需要点击一次，就可以选中该段信息：
.g-select-all { user-select: all }给需要一次选中的信息，加上这个样式后的效果，这个细节作用在一些需要复制粘贴的场景，非常好用：
CodePen -- user-select: all 示例
选中样式优化 -- ::selection当然，如果你想更进一步，CSS 还有提供一个 ::selection 伪类，可以控制选中的文本的样式（只能控制color, background, text-shadow），进一步加深效果。
CodePen -- user-select: all && ::selection 控制选中样式
添加禁止选择 -- user-select: none有快速选择，也就会有它的对立面 -- 禁止选择。
对于一些可能频繁操作的按钮，可能出现如下尴尬的场景：
文本按钮的快速点击，触发了浏览器的双击快速选择，导致文本被选中：
翻页按钮的快速点击，触发了浏览器的双击快速选择：
对于这种场景，我们需要把不可被选中元素设置为不可被选中，利用 CSS 可以快速的实现这一点：
{ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ }这样，无论点击的频率多快，都不会出现尴尬的内容选中：
现阶段，单页应用（Single Page Application）的应用非常广泛，Vue 、React 等框架大行其道。但是一些常见的写法，也容易衍生一些小问题。
譬如，点击按钮、文本进行路由跳转。譬如，经常会出现这种代码：
<template> ... <button @click="gotoDetail"> Detail </button> ... <template> ... gotoDetail() { this.$router.push({ name: 'xxxxx', }); }大致逻辑就是给按钮添加一个事件，点击之后，跳转到另外一个路由。当然，本身这个功能是没有任何问题的，但是没有考虑到用户实际使用的场景。
实际使用的时候，由于是一个页面跳转，很多时候，用户希望能够保留当前页面的内容，同时打开一个新的窗口，这个时候，他会尝试下的鼠标右键，选择在新标签页中打开页面，遗憾的是，上述的写法是不支持鼠标右键打开新页面的。
原因在于浏览器是通过读取 <a> 标签的 href 属性，来展示类似在新标签页中打开页面这种选项，对于上述的写法，浏览器是无法识别它是一个可以跳转的链接。简单的示意图如下：
所以，对于所有路由跳转按钮，建议都使用 <a> 标签，并且内置 href 属性，填写跳转的路由地址。实际渲染出来的 DOM 可能是需要类似这样：
<a href="http://www.likecs.com/xx/detail">Detail</a> 易用性易用性也是交互设计中需要考虑的一个非常重要的环节，能做的有非常多。简单的罗列一下：
注意界面元素的一致性，降低用户学习成本
延续用户日常的使用习惯，而不是重新创造
给下拉框增加一些预设值，降低用户填写成本
同类的操作合并在一起，降低用户的认知成本
任何操作之后都要给出反馈，让用户知道操作已经生效
先探索，后表态这一点非常的有意思，什么叫先探索后表态呢？就是我们不要一上来就强迫用户去做一些事情，譬如登录。
想一想一些常用网站的例子：
类似虎牙、Bilibili 等视频网站，可以先观看体验，一定观看时间后才会要求登录（登录享受蓝光）
电商网站，只有到付款的时候，才需要登录
上述易用性和先探索，后表态的内容，部分来源于：Learn From What Leading Companies A/B Test，可以好好读一读。
字体优化字体的选择与使用其实是非常有讲究的。
如果网站没有强制必须使用某些字体。最新的规范建议我们更多的去使用系统默认字体。也就是 中新增的 font-family: system-ui 关键字。
font-family: system-ui 能够自动选择本操作系统下的默认系统字体。