CSS@layer 前端开发如何更好的避免样式冲突？级联层( 二 ) _CSS

起源和重要性（Origin and Importance）

上下文（Context）

样式属性（Element-Attached Styles）

层（Layers）

特异性（Specificity）

出场顺序（又名源代码顺序）（Order of Appearance）

浏览器在确定最终元素样式呈现的时候，会依据这些准则按照优先权从高到低排序，并且会一个一个的检查，直到确定最终样式。
2.3 级联起源（Cascading Origins）2.3.1 三个核心起源
css中每个样式规则有三个核心起源，它决定了它进入级联的位置，理解起源优先级是理解级联的关键。

用户代理来源（浏览器内置样式）
用户来源（浏览器的用户设置）
作者来源（Web开发者）

2.3.2 起源的优先级
Css声明的起源取决于它来自哪里，重要性在于它是否用!important声明。
各种起源的优先级按降序排列：

过渡
重要的用户代理
重要用户
重要作者
动画
普通作者
普通用户
普通用户代理

越靠前来源的声明优先级越高。过渡和动画我们可以暂时忽略。
2.4 熟悉又陌生的 !important通常作为开发者，!important会被我们视为一种增加特异性的方法，用以覆盖内联样式或特异性较高的选择器。
但是!important设计出来的初衷是作为整体级联中的一个特性，来平衡开发者、用户设置和浏览器内置之间对css优先级的影响能力。
默认情况下三者的优先级是：作者来源> 用户来源>用户代理来源（可以参看上文起源优先级中6-8的排序）。但是当css声明添加!important之后会使它们的优先顺序颠倒（参看上文起源优先级中2-4的排序）。
如果站在浏览器和用户的角度看!important提供了在必要时重获优先级控制权的能力，而非只是简单的增加特异性。
举个例子：
浏览器默认样式表包含我们开发者无法覆盖的重要样式。
浏览器对具有'hidden'类型的input输入框设置了默认的展示属性并且将其声明为重要。
input[type=hidden i] { display: none !important; }看下面两张图例：
第一张可以看出我们对具有'hidden'类型的input输入框的展示属性设置成了显示并且声明为重要

文章插图
第二张是样式最终计算结果：隐藏

文章插图
从上面的浏览器表现可以看到我们作为开发者在作者样式表中设置的规则没能覆盖用户代理样式表中的相同规则。
这验证了上面说的：在级联中!important会颠倒三大核心起源默认优先顺序。
验证的过程中还发现了一个chrome控制台这边的bug，看上面的第一张图例：没生效的规则不划删除线，生效的反而划删除线了。
再看一个官方文档的例子加强一下理解：

文章插图
图片来源：w3.org
font-size的值最终是‘12pt ’ 。
因为作者样式表中添加!important的规则优先权高于用户样式表中普通规则。
text-indent的值最终是‘1em’ 。
因为虽然两个样式表都标注了!important，但是标注!important用户声明优先级大于标注!important作者声明。
2.5 一张图带你理解级联下图可以帮助我们直观的理解级联以及级联层在级联中的位置：

文章插图
图片来源：css-tricks
我们会发现平时操作最多的选择器特异性（selector specificity）只是级联中的一小部分。也轻松地理解了为什么内联样式优先级天然高。同时我们会发现!important在级联中有特殊地位。他穿插在级联规则的各个阶段并能颠倒优先级。
三、级联层(CSS@layer) 使用探索3.1 @layer 是什么？我们来看MDN上的定义：
The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.