한 기사에서 CSS3 @layer의 새로운 기능에 대해 알아보세요.

이 기사는 CSS3의 새로운 기능 @layer에 대한 심층적인 이해를 제공할 것입니다. 도움이 되기를 바랍니다.

2022년을 맞이하면서 CSS의 새로운 기능이 속속 등장하고 있는데, 최근 CSS계에서 가장 주목받고 있는 새로운 기능은 바로 CSS @layer입니다.

이 기사에서는 독자들이 새로운 CSS @layer 사양이 무엇인지 빠르게 이해할 수 있도록 가장 간결한 언어를 사용합니다.

과거 CSS 우선순위에 존재하던 문제

페이지 개발 시 사용자 정의 스타일, 가져온 구성 요소 라이브러리 스타일 등 페이지에 스타일이 많은 경우. 이때 스타일은 매우 혼란스럽고 관리하기 어려울 것입니다.

우리가 작성하지 않은 일부 스타일을 재정의하려면 우선 순위가 더 높은 스타일 이름을 사용하여 해당 스타일을 재정의해야 하는 경우가 많습니다.

동시에 스타일 우선순위를 제어하기 어렵다고 느낄 때 개발자는 이를 해결하기 위해 !important를 남용하는 데 익숙하며, 이는 결국 앞으로 더 혼란스러운 스타일 구조로 이어집니다. !important 去解决，这又循环导致了后续更混乱的样式结构。

基于让 CSS 得到更好的控制和管理的背景，CSS @layer 应运而生。

何为 CSS @layer？

CSS @layer 从 CSS Cascading and Inheritance Level 5 被规范定义。

何为 CSS @layer？简单而言，CSS @规则 中的@layer声明了一个 级联层， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。

语法也非常简单，看这样一个例子：

@layer utilities {
  /* 创建一个名为 utilities 的级联层 */
}

这样，我们就创建一个名为 utilities 的 @layer 级联层。

@layer 级联层如何使用呢？

通过 @layer 级联层管理样式优先级

@layer 级联层最大的功能，就是用于控制不同样式之间的优先级。

看下面这样一个例子，我们定义了两个 @layer 级联层 A 和 B：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}

由于 @layer B 的顺序排在 @layer A 之后，所以 @layer B 内的所有样式优先级都会比 @layer A 高，最终 div 的颜色为 green：

当然，如果页面内的 @layer 太多，可能不太好记住所有 @layer 的顺序，因此，还有这样一种写法。

我们可以同时命名多个 @layer 层，其后再补充其中的样式规则。

<div></div>

@layer B, C, A;
div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}

上述代码，我们首先定义了 @layer B, C, A 三个 @layer 级联层。而后再后面的 CSS 代码中补充了每个级联层的 CSS 代码，但是样式的优先级为：

A > C > B

因此，最终的 div 的颜色值为 @layer A 中定义的颜色，为 blue

CSS를 더 잘 제어하고 관리할 수 있게 된 배경을 바탕으로 CSS @layer가 탄생했습니다.

CSS @layer란 무엇인가요? CSS 계단식 및 상속 수준 5

은 사양에 의해 정의됩니다.

CSS @layer란 무엇인가요? 간단히 말해서, CSS @ @rule의 레이어는 계단식 레이어를 선언합니다. 동일한 레이어의 규칙은 함께 계단식으로 연결되므로 개발자가 계단식 메커니즘을 더 잘 제어할 수 있습니다.

구문도 매우 간단합니다. 다음 예를 보세요.

@layer utilities {
  p {
    padding: .5rem;
  }
}

이런 방식으로 유틸리티라는 이름의 @layer 계단식 레이어를 만듭니다.

@layer 계단식 레이어를 사용하는 방법은 무엇입니까?

@layer 캐스케이딩 레이어를 통해 스타일 우선순위 관리

@layer 캐스케이딩 레이어의 가장 큰 기능은 서로 다른 스타일 간의 우선순위를 제어하는 ​​것입니다

.

다음 예를 보면 두 개의 @layer 캐스케이드 레이어 A와 B를 정의했습니다.

@import(utilities.css) layer(utilities);

@layer utilities;
// ...
// ...
@layer utilities {
    p {
        color: red;
    }
}

@layer B가 @layer A 다음에 정렬되므로 그 후, @layer B의 모든 스타일 우선순위는 @layer A의 우선순위보다 높으며 div의 최종 색상은 녹색입니다.

Of 물론 페이지에 @layers가 너무 많아 모든 @layers의 순서를 기억하기가 쉽지 않을 수 있으므로 다른 작성 방법이 있습니다.

여러 개의 @layer 레이어에 동시에 이름을 지정한 다음 스타일 규칙을 추가할 수 있습니다.

@layer A { a { color: red; } }
@layer B { a { color: orange; } }
@layer C { a { color: yellow; } }
a { color: green; } /* 未被 @layer 包裹的样式 */

@layer {
  p {
    margin: 1rem;
  }
}

위 코드에서는 먼저 세 개의 @layer 캐스케이드 레이어 @layer B, C, A를 정의합니다. 그런 다음 각 계단식 레이어에 대한 CSS 코드가 후속 CSS 코드에 추가되지만 스타일의 우선순위는

A

> 🎜C🎜 > 🎜B🎜🎜🎜 따라서 최종 div의 색상 값은 @layer A에 정의된 색상은 blue입니다. 🎜🎜🎜🎜🎜이 시점에서 CSS @layer의 역할을 명확하게 알 수 있습니다. 🎜🎜🎜CSS @layer를 사용하면 서로 다른 CSS 모듈을 서로 다른 @layer로 나누고 순서를 사용하여 전역 스타일 우선순위를 제어할 수 있습니다🎜. 🎜🎜@layer 캐스케이딩 레이어 정의를 소개하는 세 가지 방법🎜🎜위에서는 실제로 @layer 캐스케이딩 레이어 정의를 소개하는 두 가지 방법을 다시 설명하겠습니다. 계단식 레이어. 🎜🎜1. 레이어 내에서 작동하는 CSS 규칙이 포함된 블록 수준 @layer 규칙을 직접 생성합니다. 🎜

<div></div>

🎜2. 계단식 레이어는 🎜@import🎜를 통해 생성할 수 있으며 규칙은 가져온 스타일에 존재합니다. 테이블: 🎜

div {
    width: 200px;
    height: 200px;
}
@layer {
    div {
        background: pink;
    }
}
@layer B, C, A;
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}

🎜3. 명명된 캐스케이드 레이어를 생성하되 스타일을 지정하지 마세요. 그런 다음 CSS 내의 어느 위치에나 스타일을 추가할 수 있습니다. 🎜

div {
    width: 200px;
    height: 200px;
}
@layer B, C, A;
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}
@layer {
    div {
        background: pink;
    }
}

🎜🎜@layer가 아닌 래핑 레이어 및 레이어 내 @layer 스타일 스타일의 우선순위🎜🎜🎜물론 @layer로 래핑되지 않은 스타일이 클래스가 @layer에 래핑된 스타일과 어떻게 비교되나요? 🎜🎜이 예를 보세요: 🎜

@layer A {
  @layer B{
    ...
  }
}

🎜여기서 매우 중요한 결론이 나옵니다. 🎜@layer가 아닌 스타일로 래핑된 스타일은 @layer 래핑된 스타일🎜보다 우선순위가 높습니다. 따라서 위 규칙의 순서는 다음과 같습니다. 🎜🎜 @layer> @layer C > @layer A🎜로 래핑되지 않은 스타일

匿名层与嵌套层

还有两种层级关系，分别是匿名层和嵌套层。

匿名层

允许创建一个不带名字的 @layer：

@layer {
  p {
    margin: 1rem;
  }
}

这里，创建了一个匿名层。匿名层的两个重要特性：

• 创建后无法向其再添加规则

• 该层和其他命名层功能一致，优先级也遵循后定义的匿名层，比其他已定义的 @layer 层，优先级更高

看一个例子：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer {
    div {
        background: pink;
    }
}
@layer B, C, A;
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}

上述代码，我们首先定义了一个匿名层，指定了 div 的颜色为 pink，而后又定义了 @layer B, C, A。这里优先级顺序为：

A > C > B > 匿名层

最终的颜色为 @layer A 内的颜色值 -- blue：

如果，我们将匿名层放在最后的话：

div {
    width: 200px;
    height: 200px;
}
@layer B, C, A;
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}
@layer {
    div {
        background: pink;
    }
}

此时，样式的优先级顺序为：

匿名层 > A > C > B

最终的颜色为匿名层内的颜色值 -- pink：

嵌套层

说完了匿名层，我们再来看看嵌套层。

顾名思义，嵌套层的意思就是在 @layer 内部，我们可以再嵌套使用 @layer 级联层。像是这样：

@layer A {
  @layer B{
    ...
  }
}

当然，它还有另外一种语法，上述代码等价于：

@layer A.B {
  ...
}

了解了这个后，那么，看这样一个例子：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
    
    @layer B {
        div {
            background: red;
        }
    }
}

我们在 @layer A 中嵌套一个 @layer B，同时都定义了一个 div 的样式，最终 div 的 background 到底是什么颜色呢？

最终为蓝色 background: blue，为什么呢？这个很好记忆，我们假设如果没有 @layer A 这一层包裹，其实就是上述说的 @layer 层与非 @layer 层的优先级比较，这里，非 @layer 层（我们可以理解为更高级别的一层 @layer）的优先级更高。

因此，对于单个 @layer 内的嵌套关系，样式优先级为：

@layer A > @layer A.B

多层嵌套层的优先级关系

OK，再看这样一种情况：

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green;
        }
    }
}

这里存在同时存在多个嵌套 @layer 的情况。那么这种情况优先级又是如何划分呢？

这里的规则是，优先级高的 @layer，无论是否存在嵌套，优先级都整体比优先级低的 @layer（无论是否存在嵌套）高，因此，这里的优先级排序是：

@layer C > @layer C.D > @layer A > @layer A.B

!important 对 CSS @layer 的影响

再来看看  !important 对 CSS @layer 的影响。

这里可以分为几种情况，先看其中一种：

<div></div>

div {
    width: 200px;
    height: 200px;
    background: black;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green!important;
        }
    }
}

上述代码，我们给 @layer C.D 的 <div> 添加了一个 <code>!important 规则。

如果，不考虑 !important 规则，那么实际的 CSS 优先级为（序号越高，优先级越高）：

• @layer A.B

• @layer A

• @layer C.D

• @layer C

• 非 layer 包裹块

那么，<div> 的颜色应该为黑色 <code>black。然而，这里给 @layer C.D 的 <div> 添加了一个 <code>!important 规则。

实际上，最终 <div> 的颜色为 <code>green，也就是最终的优先级排序为（序号越高，优先级越高）：

• @layer A.B

• @layer A

• @layer C

• 非 layer 包裹块

• !important 下的 @layer C.D

也就是说，这里 !important 规则的优先级还是凌驾于非 !important 规则之上的。

上述 DEMO 还是比较有意思的，感兴趣的可以看看：CodePen Demo -- CSS Cascade @layer Demo

https://codepen.io/Chokcoco/pen/KKZKBRr

非 @layer 包含块 !important 与 @layer 包含块 !important

到这里，你也许会以为你懂了。好，我们再来看一个 DEMO，如果我们给非 @layer 包含块，也加上一个 !important 规则，事情就变得有趣了。

<div></div>

div {
    width: 200px;
    height: 200px;
    background: black!important;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red;
        }
    }
}
@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green!important;
        }
    }
}

仔细看上述代码，非 @layer 包含块，我们也加上了一个 !important 规则，按照上述我能描述的规则来看，非 @layer 包含块的优先级高于 @layer 包含块，那么正常而言，我们不难猜测，这里 background: black!important 的优先级应该要比 background: green!important 高，最终 <div> 应该展示黑色。<p>而实际上，这里最终 <code><div> 的颜色还是 <code>green。这里就又有一个非常有意思的知识点了，!important 下样式优先级的规则与非 !important 正常状态下刚好相反。

这是一个非常重要的特性，在比较正常（非 !important）规则时，越是级联（排序较后的 @layer 规则），优先级越低；反之，在比较 !important 规则时，越是级联靠后的（排序较后的 @layer 规则），优先级越高。

这个，更进一步的话，我们需要去了解 CSS Cascading 相关的知识了。

CSS Cascade 规范

在 CSS @layer 之前，我们简单看一张图：

上图表面的是在没有 CSS @layer 之前，CSS 样式申明的优先级排序，根据 CSS Cascading 4(Current Work) 标准，定义的当前规范下申明的层叠顺序优先级如下（越往下的优先级越高，下面的规则按升序排列）：

• Normal user agent declarations
• Normal user declarations
• Normal author declarations
• Animation declarations
• Important author declarations
• Important user declarations
• Important user agent declarations
• Transition declarations

按照上述算法，可以得到一个样式优先级的排序，大概是这样（越往下的优先级越高，下面的规则按升序排列）：

• User Agent - 用户代理普通样式

• User - 用户设置的普通样式

• Author - 页面作者普通样式

• Animations - 动画样式

• ❗️Author - 页面作者 !important 样式

• ❗️User - 用户设置的 !important 样式

• ❗️User Agent - 用户代理的 !important 样式

• Transitions - 过渡样式

简单解释一下：用户代理样式：浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式页面作者样式：网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即页面主题，可以理解为页面作者样式用户样式：读者，作为浏览器的用户，可以使用自定义样式表定制使用体验，自定义用户偏好，可以理解为用户样式

关于 CSS Cascading，也就是层叠规范，你可以看看我的这篇文章加深理解 -- 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）。

https://github.com/chokcoco/iCSS/issues/76

而当有了 CSS @layer 之后，这个层叠优先级顺序有了更新，具体优先级如下：

整体会变更为复杂一些，但是总体还是遵循了两个规则：

• !important 样式高于非 !important 样式

• 在比较 !important 规则时，优先级顺序与正常规则相反，在正常状态下优先级越低的，在 !important 下优先级越高

总结一下

综上，便是关于 CSS @layer 的基础相关知识。

CSS @layer 的诞生，让我们有能力更好的划分页面的样式层级，更好的处理内部样式与外部引用样式的优先级顺序，属于比较重大的一次革新。

同时，它也让我们意识到要逐渐摒弃大规模使用 !important 去覆盖样式优先级的错误做法，避免许多因为优先级问题带来的不必要的副作用。

当然，时至今天（2022-03-14），我们来看一眼兼容性：

많이 대중화되었지만 최신 버전의 Chrome, Safari, Firefox, Edge에서는 CSS @layer를 지원하기 시작했으며 이미 일부 폴리필을 통해 초기에 사용할 수 있을 것으로 예상됩니다. 미래에는 비즈니스 CSS 코드의 필수적인 부분이 될 것입니다.

확장 읽기

인터넷에서 CSS @layer에 대한 많은 토론이 있었습니다. 관심이 있으시면 계속해서 읽어보세요.

• Cascade Layers explainer
• CSS 캐스케이드 레이어 시작하기
• 기사에 있는 스크린샷의 일부는 !important가 실제로 어떻게 작동하나요?(당신이 생각하는 것과는 다릅니다!)

마지막으로

이 글은 여기서 끝납니다. 도움이 되길 바랍니다 :)

(동영상 공유 알아보기: 웹 프론트엔드)