实现高性能css代码

1、所有选择器的性能由高到低

1. id
2. class
3. 标签选择器（div）（span）（…）
4. 相邻选择器（div + span）
5. 子元素选择器（div > span）
6. 后代选择器（div span）（消耗性能，下面会有讲解）
7. 通配符选择器（*）
8. 属性选择器（input[type=“checkbox”]）
9. 伪类选择器（a:hover）

所以编写css时要尽量避免使用性能低的选择器，能用高性能选择器代替一定要用高性能选择器。

2、浏览器解析css的规则

浏览器是从右往左来解析css的

3、如何编写高性能的css代码：

1. 嵌套最好不要超过3层，只要class是唯一的，就没必要在其前面添加其他的选择器
2. 能用class解决的问题，就不用其他的选择器
3. class不好解决的，如ul下的很多li，就可以用子元素选择器（ul > li）来解决，性能变化并不大
4. 能用子元素选择器解决的，就不要用后代选择器，因为后者性能比前者低
5. 可以继承的属性，在子元素中就没必要再次声明（如font-size）
6. 我们知道一行css选择器中浏览器最先执行的选择器是最右方的一个，所以最右方的选择器性能很大程度
7. 上影响着整行选择器的效率，比如最右方是id或class，性能就很高，如果是标签（如div）选择器，那么性能就会大打折扣
8. 不要刻意的只用高性能的id与class，很多时候其他的选择器会更好的帮你完成工作，要懂得取舍

4、如何编写高维护性的css代码：

1. 尽量不要写行间样式，用link外链或放到style标签中
2. 样式代码都放到head中，不要零零散散的放到body中
3. id选择器能实现的所有样式的功能，class都可实现，可用class代替id，id有更艰巨的任务
4. 多编写可重用的class类，来重复使用

5、Scope 在 CSS 中的使用

在 Vue 文件中的 style 标签上有一个特殊的属性，scoped。在组件中给 style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染，scoped 使得组件内的样式变成局域样式，只作用于当前组件。

原理：

在编译组件的时候，如果当前组件内 style 标签上有 scoped 属性，那么会在当前所有标签上添加一个 [data-v-hash] 属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。值得注意的是，当父组件、子组件同时使用 scoped 属性时，子组件最外层的标签既会被加上当前组件的 hash 值，又会加上父级组件的 hash 值。

data-v-hash 生成规则

查阅 vue loader 的仓库中搜索发现：此 hash 值是根据组件的内容加相对路径生成的。

const moduleId = 'data-v-' + hash(isProduction ? (shortFilePath + '\n' + content) : shortFilePath)

scoped 三条渲染规则

1. 给 HTML 的 DOM 节点加一个不重复 data 属性(形如：data-v-19fca230)来表示他的唯一性。
2. 在每句 css 选择器的末尾（编译后的生成的 css 语句）加一个当前组件的 data 属性选择器（如
   [data-v-19fca230]）来私有化样式。
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的 data 属性。

！important

作用：

提升指定样式规则的应用优先权，即 !important 为开发者提供了一个增加样式权重的方法，让浏览器首选执行这个语句。

语法：

选择器 { 样式 : 值 !important;}

优先级的顺序：

！important> 行间样式 > id 选择器 > class 选择器 || 属性选择器 > 标签选择器 > 通配符选择器

深度作用选择器

>>>

普通的css语法，在要修改的样式前添加>>>符号

/deep/

如果添加了less、sass，就不能使用>>>，在要修改的样式前添加/deep/

::v-deep

在scss中，在要修改的样式前添加 ::v-deep
注：

在vue3.2中，新规则：:deep(.el-card)，，，不然报错

6、tailwindcss vs windicss

安装

   npm install tailwindcss
  "tailwindcss": "^3.0.24",

Vite2.0默认安装postcss了
默认生成这两个文件

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  corePlugins: {
    preflight: false
  },
  darkMode: 'media',
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

tailwindcss 被postcss处理，加载真实的css代码