前言
之前开发者大会上，大佬分享@layer这个新特性的时候，就想着要研究一下它的具体用法。
在开始freestyle之前，先来看一下规范：
这是一个实验中的功能。
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
CSS规则
MDN中对CSS规则的定义如下
At-rules是指导 CSS 如何表现的CSS 语句。它们以 at 符号 ' @' ( U+0040 COMMERCIAL AT) 开头，后跟一个标识符，包括直到下一个分号 ' ;' ( U+003B SEMICOLON) 或下一个CSS 块（以先到者为准）的所有内容。
先来看几个眼熟的CSS规则：@media、@font-face、@keyframes、@viewport、@import。
@layer
知识点
@layer声明了一个 级联层， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。
创建级联层的方式有以下三种，支持级联层嵌套和匿名。以下知识点来自MDN。
语法 |
含义 |
块级创建方式 |
创建了一个块级的 @规则，其中包含作用于该层内部的 CSS 规则。 |
通过 @import 来创建 |
一个级联层同样可以通过 @import 来创建，规则存在于被引入的样式表内。 |
命名创建方式 |
可以创建带命名的级联层，但不指定任何样式。 或者，多个命名层也可以被同时定义。 |
嵌套层 |
级联层允许嵌套 |
匿名层 |
如果创建了一个级联层但并未指定名字，那么则称为创建了一个匿名层。除创建后无法向其添加规则外，该层和其他命名层功能一致。 |
使用试验
类型 |
效果展示 |
实现方案 |
通过 @import 来创建 |
|
级联层样式写在了外部的css文件中，通过@import 引入。
|
多个命名层 |
|
如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。
|
非@layer与@layer的优先级 |
|
非@layer与@layer拥有相同的属性时，非@layer的优先级更高。
|
嵌套优先级 |
|
嵌套优先级 @layer common 大于 @layer layer3。 把@layer common这个遮住，其实就是非@layer与@layer的优先级，这样是不是好理解了。
|
匿名优先级 |
|
匿名的优先级取决于匿名层所在的位置 1、匿名层在@layer common和@layer layer1 前面时，优先级是@layer common > @layer layer1 > @layer 匿名。 2、匿名层在@layer common和@layer layer1 后面时，优先级是@layer 匿名 > @layer common > @layer layer1 。 3、@layer common > @layer layer1的原因是，多个命名层时，最后一层中的将优先于其他层。 |
总结
@layer目前还是非标准特性，正式生产不建议使用。
不过试验使用起来，还挺有趣的，今天也特别有收获的一天。
CSS样式真有趣，光写样式我感觉自己能写一天。
偶尔翻出来珍藏的技术书，读几章，有了新想法的感觉真不赖。
