CSS @layer：当你的代码库膨胀成银河系时，拯救你的优先级
想象一下，你正在搭建一个网站，一开始只是个小小的博客，你信手拈来，CSS 样式也写得随意潇洒。但是，随着时间的推移，你的网站像吹气球一样膨胀，功能越来越多，页面也越来越复杂。最终，你的 CSS 代码库也变得像银河系一样庞大，各种样式定义散落在宇宙的各个角落。
这时候，你会发现一个可怕的问题：样式优先级变得一团糟！你原本信心满满地写的样式，经常被一些不知从哪里冒出来的样式覆盖，结果页面呈现出你完全没有预料到的样子。你开始抓狂，对着屏幕怒吼：“这到底是谁写的！为什么我的样式不起作用！”
如果你也经历过这样的噩梦，那么恭喜你，你已经来到了 @layer 规则的拯救现场。它就像一个宇宙管理员，帮你整理混乱的样式优先级，让你的 CSS 代码库重新变得井然有序。
什么是 @layer？简单来说，就是 CSS 的“图层”
你可以把 @layer 想象成 Photoshop 或者 Sketch 里的图层。每个图层都包含一组样式，你可以控制图层之间的堆叠顺序，从而控制样式的优先级。
在没有 @layer 的时候，CSS 的优先级规则是基于选择器的特殊性、源代码顺序和 !important 等因素决定的。这种机制在小项目中还算好用，但在大型项目中很容易失控。因为你很难追踪所有样式的来源，也很难预测它们的优先级。
而 @layer 则提供了一种更清晰、更可控的方式来管理样式优先级。你可以把不同的样式分组放到不同的图层里，然后明确指定图层的顺序。这样，即使选择器的特殊性相同，图层顺序靠后的样式也会覆盖图层顺序靠前的样式。
@layer 的基本用法：就像叠披萨一样简单
@layer 的基本语法很简单：
@layer <layer-name> {
/* 你的 CSS 样式 */
}<layer-name> 是你给图层起的名字，可以随便起，只要符合 CSS 标识符的规范就行。
举个例子，假设我们有一个网站，需要定义一些全局样式、组件样式和第三方库的样式。我们可以这样使用 @layer：
@layer base {
/* 定义全局样式，比如 body 的背景颜色、字体等等 */
body {
background-color: #f0f0f0;
font-family: sans-serif;
}
}
@layer components {
/* 定义组件样式，比如按钮、导航栏等等 */
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}
}
@layer third-party {
/* 定义第三方库的样式，比如 Bootstrap、Materialize 等等 */
/* 这里假设我们引入了一个名为 "awesome-library" 的第三方库 */
.awesome-library-button {
background-color: green;
color: white;
padding: 5px 10px;
}
}这段代码定义了三个图层：base、components 和 third-party。但是，我们还没有指定它们的顺序。默认情况下，图层的顺序是按照它们在代码中出现的顺序排列的。也就是说，在这个例子中，base 图层优先级最低，third-party 图层优先级最高。
如果我们想要改变图层的顺序，可以使用 @layer 规则的另一种语法：
@layer base, components, third-party;这段代码声明了三个图层的顺序，从左到右优先级依次升高。也就是说，base 图层优先级最低，third-party 图层优先级最高。
你也可以把声明和定义放在一起：
@layer base, components, third-party {
@layer base {
/* 定义全局样式 */
}
@layer components {
/* 定义组件样式 */
}
@layer third-party {
/* 定义第三方库的样式 */
}
}这样写的好处是，可以把图层的声明和定义放在一起，更容易维护。
@layer 的优先级：就像吃披萨一样分层
理解了 @layer 的基本用法，接下来我们来深入了解一下它的优先级规则。
简单来说，@layer 的优先级规则可以概括为以下几点：
- 图层顺序优先： 图层顺序靠后的样式会覆盖图层顺序靠前的样式。
- 选择器特殊性次之： 在同一个图层内，选择器特殊性高的样式会覆盖选择器特殊性低的样式。
- 源代码顺序再次之： 在同一个图层内，选择器特殊性相同的样式，源代码顺序靠后的样式会覆盖源代码顺序靠前的样式。
!important大杀器：!important可以覆盖任何图层的样式，但要慎用。
用一个简单的例子来说明：
@layer base, components;
@layer base {
body {
background-color: #f0f0f0;
}
}
@layer components {
body {
background-color: #fff;
}
}在这个例子中，components 图层优先级高于 base 图层，所以 body 的背景颜色会是 #fff，而不是 #f0f0f0。
如果我们在 base 图层里使用了更具体的选择器：
@layer base, components;
@layer base {
html body {
background-color: #f0f0f0;
}
}
@layer components {
body {
background-color: #fff;
}
}虽然 html body 的选择器特殊性更高，但由于 components 图层优先级更高，所以 body 的背景颜色仍然会是 #fff。
但是，如果我们使用了 !important：
@layer base, components;
@layer base {
body {
background-color: #f0f0f0 !important;
}
}
@layer components {
body {
background-color: #fff;
}
}这时候，body 的背景颜色会是 #f0f0f0，因为 !important 可以覆盖任何图层的样式。
@layer 的优势：让你的代码更清晰、更可控
@layer 的优势在于它可以让你更清晰、更可控地管理样式优先级。它可以帮你解决以下问题：
- 避免样式冲突： 通过把不同的样式分组放到不同的图层里，可以避免样式冲突，让你的代码更易于维护。
- 控制第三方库的样式： 可以把第三方库的样式放到一个单独的图层里，然后通过调整图层顺序来控制它们的优先级。
- 实现主题切换： 可以把不同的主题样式放到不同的图层里，然后通过调整图层顺序来实现主题切换。
- 提高代码的可读性： 通过使用
@layer，可以把代码分成不同的逻辑块，让代码更易于阅读和理解。
@layer 的使用场景：从博客到企业级应用
@layer 几乎可以应用于任何规模的项目，从简单的博客到复杂的企业级应用。
- 小型项目： 在小型项目中，
@layer可以帮助你更好地组织代码，避免样式冲突。 - 中型项目： 在中型项目中，
@layer可以帮助你更好地管理第三方库的样式，实现主题切换。 - 大型项目： 在大型项目中，
@layer可以帮助你更好地管理样式优先级，提高代码的可维护性和可扩展性。
@layer 的注意事项：不要滥用 !important
虽然 @layer 可以让你更好地管理样式优先级，但也要注意不要滥用 !important。!important 就像一个核武器，虽然威力巨大，但一旦使用不当，就会造成严重的后果。
- 尽量避免使用
!important： 只有在万不得已的情况下才使用!important。 - 只在最具体的选择器上使用
!important： 避免在全局样式上使用!important。 - 注释清楚为什么使用
!important： 让其他开发者知道为什么需要使用!important，避免他们误删或者修改。
@layer 的未来：拥抱 CSS 的新时代
@layer 是 CSS 的一个重要补充，它可以让你更好地管理样式优先级，提高代码的可维护性和可扩展性。随着 CSS 的不断发展，@layer 的应用场景也会越来越广泛。
现在，越来越多的浏览器开始支持 @layer，这意味着你可以放心地在你的项目中使用它。
总结：@layer 是你的 CSS 超级英雄
总而言之，@layer 就像一个超级英雄，它可以拯救你的 CSS 代码库，让你的样式优先级重新变得井然有序。如果你正在开发一个大型项目，或者你经常遇到样式冲突的问题，那么不妨尝试一下 @layer，相信它会给你带来惊喜。
所以，不要再害怕庞大的 CSS 代码库了！有了 @layer，你就可以像一个宇宙管理员一样，掌控整个 CSS 银河系。祝你编码愉快！