查看原文
其他

Chrome 99新特性:@layers 规则浅析

匿名 Tecvan 2023-01-03

来自某不愿具名同学的投稿

背景

CSS 写多了,就会觉得它不太好用,经常会遇到各种问题... 比如:

  • 「引入顺序导致的样式竞争问题」

用过 ant design 等组件库 + 发布在 npm 上的业务组件 的同学,可能会经常遇到自定义样式不生效的问题,比如像这样...

/* main.module.css */
.green {
  color: green;
}
// main.tsx
import { Button } from  antd ;
import  antd/dist/antd.css ;

// @ts-ignore
import styles from  ./main.module.css ;

import Nothing from  packed-bad-component ;

export default function Component() {
  const { green } = styles;
  return (
    <>
      <Button className={green}>我是什么颜色?</Button>
      <Nothing />
    </>

  );
}


// bad-component.tsx, published as packed-bad-component
import { Button } from  antd ;
import  antd/dist/antd.css?uncached ;

export default function Nothing() {
  return null;
}

按钮中的文字是什么颜色? 可以点击这里试试:https://codesandbox.io/embed/bad-case-css-priority-xs3ds?fontsize=14&hidenavigation=1&theme=dark

这是因为,如果发布的组件引入了 ant design 的样式,就会被打包📦,导致最终在我们的项目中,样式被重复引入。而由组件引入的样式优先级有可能高于我们自定义的样式,因此显示为黑色。

导致问题变得更糟的是,如果此时触发了 hot-reload,因为打包样式无需重复插入,而我们的样式有可能被更新,就会导致字变成绿色,进而导致一些样式问题在开发阶段难以被发现。

  • 「组件嵌套导致的样式竞争问题」

有时候,尤其是在组件中,我们可能不会随机命名样式,而是将一些类型的元素固定为同一个名称,比如 .link,以方便用户在使用我们的组件时覆盖这些样式。当引入样式较多时,容易发生混乱。

┌──────────────┐
│ POST.post │
│ │
│ a.link │
│ │
│ ┌─────┐ │
│ │ .card │ │
│ │ a.link │ │
│ └─────┘ │
│ │
└──────────────┘

倘若这两个组件有以下样式

.post a.link { /* b = 2, c = 1 */
  color: red;
}

.card .link { /* b = 2, c = 0 */
  color: green;
}

这样就会出现 .card 中的 link 样式被 .post 中的 link 样式覆盖的问题,不符合预期

目前可能会比较常见使用 BEM(Block, Element, Modifier) 的方式通过避免名称冲突,来解决这些问题,例如这样...

有没有什么更好的办法来解决我们的问题呢?

前置

在继续之前,我们先复习一下 CSS 的样式优先级。

Cascading Specificity

CSS 根据定义来源不同分为 3 种:

  • 用户代理定义(user-agent declarations)
  • 网页作者定义(author declarations)
  • 用户定义(user declarations)

以及 2 种特殊的来源:

  • 过渡定义(transition declarations)
  • 动画定义(animation declarations)

并根据特定的顺序进行层叠,以计算出元素最终样式。根据来源的优先级如下(优先级高优先):

「优先级」

1

2

3

4

5

6

7

8

「定义」

用户代理

用户

网页作者

动画

网页作者

用户

用户代理

过渡

Selector Specificity

如果定义来源相同,则考虑选择器权重:

「权重」

A

B

C

特殊

:is() :not() :has()

:nth-child() :nth-last-child()


:where()


「计数」


ID 选择器

类选择器 属性选择器 伪类选择器

元素(类型)选择器 伪元素选择器

= 其中权重最高的选择器

= 1 B + 其中权重最高的选择器

= 0


「举例」


#root

.link [hidden] :hover

button ::after



* :where 是特殊的权重为 0 的 :is

特殊例子:

  • 「:is(div, #root)」 的权重是 (a = 1, b = 0, c = 0),因为其中权重最高的是 #root (1, 0, 0)
  • 「.link:where(a, #root)」 的权重是 (a = 0, b = 1, c = 0),因为 where 中的权重是 0
  • 「:nth-child(even of li, .item)」 的权重是 (a = 0, b = 2, c = 0),因为 :nth-child 其中权重最高的是 .item (0, 1, 0),:nth-child 本身是 (0, 1, 0),共 (0, 2, 0)

比较的时候,先是否为内联样式,然后 A,然后 B,然后 C。权重还相同的样式,则后定义的优先级更高。

「比较顺序」

1

2

3

4

5

「权重」

内联样式

A

B

C

定义顺序

「说明」

内联优先

更高优先

优先

优先

后定义优先

🤔 Web 标准似乎是不支持权重进位的,因此,再具体的 class selector 都没有 id selector 优先,真实的浏览器实现是否如此呢?

@layer

背景中的两个问题,都是因为选择器权重导致的(比如问题 1,由定义顺序导致;问题 2,由隐式权重导致)。而层叠样式中的用户代理、用户、网页作者什么什么的,我好像都没听说过,它们没有被充分利用起来。那么,是不是可以在计算选择器权重前,增加点什么,让它比选择器权重更优先计算,从而解决选择器权重导致的问题呢?

即将推出的 CSS Cascading and Inheritance: Cascade Layers 致力于通过将 CSS 分层的方式避免预期外的样式覆盖,并提供更好的 CSS 组织结构。通过分层,我们可以更显式地声明每一层的选择器权重,确保不会出现默认权重导致的跨层样式覆盖。

一句话概括 Layer 的特点:「对于处在不同层中的样式,无视样式本身的权重,后声明的层中的样式优先级更高,不在层中的样式优先级最高」

不使用 layer 的样式

假如我们的样式有 3 个来源,basetypographyutilities,它们分别设置了不同的样式如图。那么根据我们的选择器权重理论:

  • 第一行,命中 2 个,颜色冲突,特异性相同,后声明样式优先,加粗绿色
  • 第二行,命中 3 个,颜色冲突,.link 特异性高优先,加粗蓝色
  • 第二行,命中 4 个,颜色冲突,.link, .pink 特异性高优先,.pink 后声明优先,加粗粉色

添加 layer 后的样式

如果我们按照不同的来源将样式分层,会发现 .link 变为了绿色...

  • 第一行,命中 2 个,颜色属性有冲突,后声明的 Layer 「typography」 优先,加粗绿色
  • 第二行,命中 3 个,颜色属性有冲突,后声明的 Layer 「typography」  优先,加粗绿色
  • 第二行,命中 4 个,颜色属性有冲突,后声明的 Layer 「utilities」 优先,加粗粉色

即,不管样式选择器的特异性(权重)如何,总是后声明的 Layer 中的样式更优先一些

调整 layer 的顺序

假如我们对这些样式的优先级不满意,想要稍做修改,只需要在前面加上声明... 现在 base 的样式优先级更高,因此前两行的颜色都发生了变化。

可以在这里实践一下:https://codesandbox.io/s/chrome-99-css-cascade-layers-krgo6\  注意浏览器是否支持这一特性,可以在下方 「可用性」 中对照。

其他用法

「扩展已有的层」

同名的 Layer 会自动扩展,类似 TypeScript 的 Interface,如

@layer base;
@layer base {}
@layer base {
  a {
    font-weight800;
    color: red; /* ignored */
  }
}
@layer base { 
  .link {
    color: blue; /* ignored */
  }
}

「组织通过 @import 导入的 CSS」

我们可以将层的声明写在文件最上方,然后将不同功能的 css 引入并放入对应层中,防止互相干扰。* @import 的性能远不如 <link>,但 link 导入的样式表暂不支持 layer,web 正在寻求解决方案。

@layer base, theme, layouts, components, utilities;

/* Base */
@import '../styles/base/normalize.css' layer(base); /* normalize or rest file */
@import '../styles/base/base.css' layer(base); /* body and base styles */
@import '../styles/base/theme.css' layer(theme); /* theme variables */
@import '../styles/base/typography.css' layer(theme); /* theme typography */
@import '../styles/base/utilities.css' layer(utilities); /* base utilities */

/* Layouts */
@import '../styles/components/post.css' layer(layouts); /* post layout */

/* Components */
@import '../styles/components/cards.css' layer(components); /* imports card */
@import '../styles/components/footer.css' layer(components); /* footer component */

「声明嵌套或匿名的层」

层也可以被嵌套,嵌套的层也可以通过 . 来扩展。匿名层无法扩展。

@layer framework {
  @layer layout {

  }
}
@layer framework.layout {
  p {
    margin-block1rem;
  }
}

@layer {
  p {
    margin-block1rem;
  }
}

优先级

「优先级」

1

2

3

4

5

6

「样式类型」

先声明的层

后声明的层

不在层中

不在层中

后声明的层

先声明的层

如果层中包含嵌套层,则对每一个嵌套层

「优先级」

1.1

1.2

1.3

「样式类型」

先声明的嵌套层

后声明的嵌套层

不在嵌套层

注意, 是反着来的,和其他层叠权重一样

解决问题

「问题 1:引入组件顺序导致的问题」

因为层中的样式优先级总是更低,因此将 antd 的样式放入 antd 层中即可,无论以何顺序引入都不会覆盖我们不在层中的样式。

「问题 2,组件嵌套导致的问题」

给来自不同组件的样式分配不同的层,通过组织层的顺序,即可避免这一问题。

注意事项

不是创建作用域的手段

它只是一个组织 CSS、避免选择器权重导致问题的方式,不是创建 CSS 作用域的方式。如果需要限制 CSS 的作用域,还是得添加更具体的样式,如 .card:

.card a {
  /* ... */
}

层叠层中的 CSS 优先级低于不在层中的 CSS

层叠层中的 CSS 优先级更低,是考虑到这样在已有的代码中引入层叠层,会更容易一些,不太会带来很大的问题。

的层叠权重相反

如果存在 ,则

  • 先声明的层中的样式优先级高
  • 层中的样式优先级高
  • 不在层中的样式优先级低

这样和原有的层叠权重比较一致。

明确插入点

层叠层的层叠权重与对应层叠层在代码中第一次出现的顺序有关系,因此,最好把可能用到的层放在最顶点,可以很清晰地看到层叠层的顺序。

注意权重

引入了层叠层之后,可能会出现选择器权重更高,却被权重更低的样式覆盖的情况,提高权重又不能解决这个问题。当出现这种情况时,就要考虑是不是因为层叠层导致的... 后声明的层叠层,层叠权重更高,可以无视选择器权重覆盖其他样式。

引入层后,权重发生了一些变化,但一定要注意,只有同一等级才能对比,因此不要搞错了比较顺序...

参考

  • 「Chrome Blog」: https://developer.chrome.com/blog/cascade-layers/
  • 「@layer 作者的想法」: https://css.oddbird.net/layers/explainer/
  • 「MDN」: https://developer.mozilla.org/en-US/docs/Web/CSS/
  • 「@layerW3 中的文档」: https://w3.org/TR/css-cascade-5/#layering


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存