有@layer支持时，是否仍需用冗长类名解决CSS特异性问题？

问题场景 #

现有框架CSS代码如下：

/* from css framework */
.container .card {
    margin: 20px;
    height: 100px;
    background-color: green;
}
.container .card.narrow {
    max-width: 50px;
}
.container .card.wide {
    background-color: purple;
    width: 200px;
}

对应的HTML结构：

<style>
    .special { background-color: red; }  /* end user trying to override */
</style>
<div class="container">
    <div class="card narrow"></div>
    <div class="card wide special"></div>
</div>

由于.container .card.wide的CSS特异性高于.special，用户自定义的.special样式无法生效，第二个卡片依然显示紫色。

传统解决方案：扁平化类名 #

过去常用的解决方式是将嵌套的CSS选择器扁平化，避免高特异性，但会产生冗长重复的类名：

/* from css framework */
.c2-card {
  margin: 20px;
  height: 100px;
  background-color: green;
}
.c2-card-narrow {
  max-width: 50px;
}
.c2-card-wide {
  background-color: purple;
  width: 200px;
}

对应的HTML结构：

<style>
    .special { background-color: red; }  /* end user trying to override */
</style>
<div class="c2">
    <div class="c2-card c2-card-narrow"></div>
    <div class="c2-card c2-card-wide special"></div>
</div>

此时.special与c2-card c2-card-wide的特异性相同，第二个卡片会显示红色，但类名失去了原有的简洁语义化特性。

使用@layer的优化方案 #

如今所有浏览器已支持@layer特性，可以采用以下方式解决：

/* from css framework */
@layer theme {
  .container .card {
      margin: 20px;
      height: 100px;
      background-color: green;
  }
  .container .card.narrow {
      max-width: 50px;
  }
  .container .card.wide {
      background-color: purple;
      width: 200px;
  }
}

对应的HTML结构：

<style>
    .special { background-color: red; }  /* end user trying to override */
</style>
<div class="container">
    <div class="card narrow"></div>
    <div class="card wide special"></div>
</div>

这种方式既能保留简短语义化的类名，又无需过度关注CSS特异性，就能实现用户自定义样式对框架样式的覆盖。

核心疑问 #

既然@layer已获得全浏览器支持，还有必要继续使用之前那种冗长的扁平化类名方案吗？

内容的提问来源于stack exchange，提问作者thebjorn