CSS @scope 如何取代 BEM

最新推荐文章于 2024-04-09 17:18:48 发布
最新推荐文章于 2024-04-09 17:18:48 发布
阅读量218 收藏 1
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq449245884/article/details/134389580
版权

前端工程师最常见且最具挑战性的问题之一是 CSS 命名约定。随着 Block Element Modifier（BEM）方法的流行，许多人习惯于按照一种可维护的模式组织他们的样式。

即将在 Chrome 浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分，从而进一步提高了 BEM 的性能。这将使样式表更易于维护，同时对 CSS 级联进行更严格的控制。

在这篇文章中，我们将展示如何在 Chrome 中使用 @scope 特性，以及如何使用它来替换前端项目中的 BEM。我们通过几个例子进行讲解，你可以在 GitHub 上的示例项目中查看并跟随操作。

CSS @scope 是什么？

在即将发布的 Chrome 118 版本中，@scope 特性创建了 CSS 样式的块级作用域。这给了开发者对 CSS 样式更多的控制权，因为我们现在可以在 CSS 文件中直接为视图的不同部分明确定义作用域。

请看下面的 HTML 示例：

<main className="sample-page">
    <h1>With Scope</h1>
    <section className="first-section">
        <p>some text</p>
        <p>
            some text and then a <a href="/">back link</a>
        </p>
    </section>
    <section className="second-section">
        <h2>Dog Picture</h2>
        <div>
            <p>second section paragraph text</p>
        </div>
        <img src={'./DOG_1.jpg'} alt="dog" />
    </section>
</main>

在此 HTML 中，我们可以使用以下方法对 second-section 样式区域内的元素进行样式设置：

.second-section {
    display: flex;
    flex-direction: column;
    border: solid;
    padding: 40px;
    margin: 20px;
}
@scope (.second-section) {
    h2 {
        text-align: center;
    }
    img {
        max-width: 400px;
        max-height: 100%;
    }
    div {
        display: flex;
        justify-content: center;
        margin: 20px;
    }
    p {
        max-width: 200px;
        text-align: center;
        background-color: pink;
        color: forestgreen;
        padding: 10px;
        border-radius: 20px;
        font-size: 24px;
    }
}

使用 @scope 时，还可以创建一个 "甜甜圈 "作用域，为一组样式及其中的元素定义起始和结束部分。使用上述相同的 HTML，甜甜圈作用域可以定义从 sample-page 的起始区域到 second-section 样式区域的样式：

/* donut scope */
@scope (.sample-page) to (.second-section) {
    p {
        font-size: 24px;
        background-color: forestgreen;
        color: pink;
        text-align: center;
        padding: 10px;
    }
    a {
        color: red;
        font-size: 28px;
        text-transform: uppercase;
    }
}

最棒的是，它的功能与使用 BEM 造型非常相似，但代码量更少。

浏览器支持 CSS @scope

截至2023年10月2日，CSS @scope 还未正式发布，因此需要开启实验性网络功能标志来使用它。要做到这一点，首先在 Chrome 中打开一个标签页，前往 chrome://flags/，然后搜索并启用“实验性网络平台功能”标志：

什么是 BEM

BEM 是一种在HTML视图中分组样式的方式，可以轻松地进行导航。

考虑到一个大型 HTML 页面有许多具有不同样式的元素。在设置了几个初始样式名称后，随着页面的扩展，要保持样式就会变得很困难。BEM 试图通过围绕实际样式来构建样式名来缓解这一问题。

block 是一个包含 HTML 元素。考虑一下类似这样的 HTML

<main className="sample-page">
    <h1 className="sample-page__title">With BEM</h1>
    <section className="sample-page__first-section">
        <p className="sample-page__first-section--first_line">
            some text
        </p>
        <p className="sample-page__first-section--second-line">
            some text and then a{' '}
            <a
                className="sample-page__first-section--second-line-link"
                href="/"
            >
                back link
            </a>
        </p>
    </section>
</main>

在此 HTML 中

  • 块 = sample-page 样式就是 block 样式，因为它包裹了一组元素

  • 元素 = 在为 <h1> 元素设计样式时，该元素被视为 element ，因此会在样式名称中添加额外的 __ ，从而创建 sample-page__title 。 sample-page__first-section 也是如此。

修改器 = 当在 <section> 元素中为 <p> 元素设计样式时，样式名称会多出一个 --first-line ，从而创建 sample-page__first-section--first-line ，所以：

  • 块为 sample-page

  • 元素是 first-section

  • 修饰词是 first-line

BEM 的扩展性很好，尤其是在使用 SASS 将样式分组并使用 & 操作符创建类似内容时：

.sample-page {
    display: flex;
    flex-direction: column;
    margin-top: 10px;

    &__title {
        font-size: 48px;
        color: forestgreen;
    }

    &__first-section {
      font-size: 24px;
      border: solid;
      padding: 40px;
      margin: 20px;

      &--first-line{
        font-size: 24px;
        background-color: forestgreen;
        color: pink;
        text-align: center;
        padding: 10px;
      }
    }
}

难点在于，在一个大型项目中，这会产生非常大的 CSS 或 SASS 文件，而这些文件仍然很难进行大规模管理。可以使用 @scope 替换 BEM 样式，使样式定义更小、更易于管理。

使用@scope重构BEM

展示使用 @scope 的优势的最佳方式是在使用 React 等主流框架或库的应用程序中使用 @scope。在 GitHub 上的示例应用程序中， react-example 文件夹中有一个项目，其中的页面首先使用 BEM 进行了样式设计，然后使用 @scope 进行了重构。

可以运行应用程序并单击 WithBEM 或 WithScope 按钮来查看具体实现。组件和样式表都有相应的名称，前缀为 WithBEM 或 WithScope ，分别位于 pages 和 styles 文件夹中。

从 BEM 样式组件 WithBEMPage.tsx 开始，我们首先看到了用 BEM 方法设计的 HTML 样式：

<main className="sample-page">
    <h1 className="sample-page__title">With BEM</h1>
    <section className="sample-page__first-section">
        <p className="sample-page__first-section--first_line">
            some text
        </p>
        <p className="sample-page__first-section--second-line">
            some text and then a{' '}
            <a
                className="sample-page__first-section--second-line-link"
                href="/"
            >
                back link
            </a>
        </p>
    </section>
    <section className="sample-page__second-section">
        <h2 className="sample-page__second-section--title">
            Dog Picture
        </h2>
        <div className="sample-page__second-section--div">
            <p className="sample-page__second-section--div-paragraph">
                second section paragraph text
            </p>
        </div>
        <img
            className="sample-page__second-section--image"
            src={'./DOG_1.jpg'}
            alt="dog"
        />
    </section>
</main>

在组件 WithScopePage.tsx 中，我们可以通过以下内容看到重构是多么干净利落：

<main className="sample-page">
    <h1>With Scope</h1>
    <section className="first-section">
        <p>some text</p>
        <p>
            some text and then a <a href="/">back link</a>
        </p>
    </section>
    <section className="second-section">
        <h2>Dog Picture</h2>
        <div>
            <p>second section paragraph text</p>
        </div>
        <img src={'./DOG_1.jpg'} alt="dog" />
    </section>
</main>

要将 BEM 重构为 @scope ，只需找到样式组，然后适当添加您的作用域样式。我们先来看看标题部分。在原始的 WithBEMPage.tsx 文件中，每个部分都定义了不同的样式。而在 @scope 版本中，则为特定元素定义了更简洁的样式：

.sample-page {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
/* replaced */
/* .sample-page__title {
    font-size: 48px;
    color: forestgreen;
} */
/* donut scope */
@scope (.sample-page) to (.first-section) {
    h1 {
        font-size: 48px;
        color: forestgreen;
    }
}

同样，在第一部分内容中，原始 BEM 风格如下：

.sample-page__first-section {
    font-size: 24px;
    border: solid;
    padding: 40px;
    margin: 20px;
}
.sample-page__first-section--first_line {
    font-size: 24px;
    background-color: forestgreen;
    color: pink;
    text-align: center;
    padding: 10px;
}
.sample-page__first-section--second-line {
    font-size: 24px;
    background-color: forestgreen;
    color: pink;
    text-align: center;
    padding: 10px;
}
.sample-page__first-section--second-line-link {
    color: red;
    font-size: 28px;
    text-transform: uppercase;
}

用 @scope 重构第一部分，我们现在就有了一个更简洁的样式定义：

.first-section {
    font-size: 24px;
    border: solid;
    padding: 40px;
    margin: 20px;
}
/* donut scope */
@scope (.sample-page) to (.second-section) {
    p {
        font-size: 24px;
        background-color: forestgreen;
        color: pink;
        text-align: center;
        padding: 10px;
    }
    a {
        color: red;
        font-size: 28px;
        text-transform: uppercase;
    }
}

这样做的另一个好处是，HTML 视图更小，更容易阅读。考虑到之前

<section className="sample-page__first-section">
    <p className="sample-page__first-section--first_line">
        some text
    </p>
    <p className="sample-page__first-section--second-line">
        some text and then a{' '}
        <a
            className="sample-page__first-section--second-line-link"
            href="/"
        >
            back link
        </a>
    </p>
</section>

然后

<section className="first-section">
    <p>some text</p>
    <p>
        some text and then a <a href="/">back link</a>
    </p>
</section>

通过这两个示例组件，我们可以对每个部分进行重构。最终注意到它是如何使样式更简洁、更易读的。

@scope 与 BEM 相比的其他优势

除了将 BEM 重构为 @scope 的优势外，使用 @scope 还可以更好地控制 CSS 级联。CSS 级联是一种算法，它定义了网络浏览器如何处理组成 HTML 页面上元素的样式条件。

在处理任何前端项目时，开发者可能需要处理由于样式层叠而产生的奇怪结果。通过使用@scope，可以通过紧密限定元素范围来控制层叠的副作用。

文件 no_scope.html 的样式和一些元素定义如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Plain HTML</title>
        <style>
            .light {
                background: #ccc;
            }
            .dark {
                background: #333;
            }
            .light a {
                color: red;
            }
            .dark a {
                color: yellow;
            }
            div {
                padding: 2rem;
            }
            div > div {
                margin: 0 0 0 2rem;
            }
            p {
                margin: 0 0 2rem 0;
            }
        </style>
    </head>
    <body>
        <div class="light">
            <p><a href="#">First Level</a></p>
            <div class="dark">
                <p><a href="#">Second Level</a></p>
                <div class="light">
                    <p><a href="#">Third Level</a></p>
                </div>
            </div>
        </div>
    </body>
</html>

结果如下:

819e19f1486233632320e24247453ca9.png

这里的问题是，根据已定义的 CSS， Third Level 应为红色文本，而不是黄色。这是 CSS 级联的副作用，因为页面样式是根据外观顺序来解释的，因此 Third Level 被认为是黄色而不是红色。通过 Bram.us 原文中的图表，我们可以看到 CSS 级联评估选择器和样式的顺序：

c8461593732abb09e2884a12b70299ea.png

如果不使用 @scope ，CSS 级联将直接从 "特定性 "转为 "外观顺序"。使用 @scope 后，CSS 级联将首先考虑 @scope 元素。您可以通过在示例中为 .light 和 .dark 样式添加 @scope 来了解其效果。

首先，将原始 HTML 和 CSS 修改如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Plain HTML</title>
        <style>
            .light {
                background: #ccc;
            }
            .dark {
                background: #333;
            }
            div {
                padding: 2rem;
            }
            div > div {
                margin: 0 0 0 2rem;
            }
            p {
                margin: 0 0 2rem 0;
            }
            @scope (.light) {
                :scope {
                    background: white;
                }
                a {
                    color: red;
                }
            }
            @scope (.dark) {
                :scope {
                    background: black;
                }
                a {
                    color: yellow;
                }
            }
        </style>
    </head>
    <body>
        <div class="light">
            <p><a href="#">First Level</a></p>
            <div class="dark">
                <p><a href="#">Second Level</a></p>
                <div class="light">
                    <p><a href="#">Third Level</a></p>
                </div>
            </div>
        </div>
    </body>
</html>

输出结果如下

927a61bbdb9ec75203974e57355b616b.png

总结

在本文中，我们探讨了将 BEM 风格应用程序重构为使用 Chrome 浏览器中新推出的 @scope 功能的方法。我们介绍了 @scope 的工作原理，然后将一个简单的页面从 BEM 重构为 @scope 。

新的 @scope 功能有可能成为前端开发人员的一大优势。不过，其他浏览器也必须实现支持，这可能需要时间。在此之前，这绝对是一个有趣的功能，对前端项目的样式设计可能会有很大帮助。

欢迎长按图片加刷碗智为好友，定时分享 Vue React Ts 等。

e21f00c3fce2f3f78137c0b0a1354afa.png

最后：

vue2与vue3技巧合集

VueUse源码解读

e68d904572704493d09c7c9d41b032e6.jpeg

因为微信公众号修改规则，如果不标星或点在看，你可能会收不到我公众号文章的推送，请大家将本公众号星标，看完文章后记得点下赞或者在看，谢谢各位！

@大迁世界
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
postcss-scoped:在@scope到CSS的规则将限定嵌套规则
04-27
PostCSS范围 插件添加一个新的@scope规则，该规则可限定任何后代CSS。 @scope Panel { . foo { /* Input example */ } } . scope-761597ae . foo { /* Output example */ } 用法 postcss ( [ require ( 'postcss-scoped' ) ] ) 有关您的环境的示例，请参见文档。
详解css BEM书写规范
09-22
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。本文主要介绍了详解css BEM书写规范,非常具有实用价值，需要的朋友可以参考下
关于css中的scope
wangzhen12138的博客
03-30 1409
在 vue 文件中的 style 标签上当一个 style 标签拥有 scoped 属性时，它的 CSS 样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签全部加上了 scoped ，相当于实现了样式的模块化。 ...
【spring】@Scope注解学习
一个写了10年bug的程序员日常笔记。
04-09 1109
Scope注解是Spring框架中用于指定bean作用域的注解。在Spring中，一个bean的作用域定义了该bean的生命周期和创建bean实例的上下文。Spring提供了几种预定义的作用域，同时也支持自定义作用域。通过使用@Scope注解，开发者可以更精确地控制Spring容器如何创建和维护bean实例。value：表示作用域，可以取如下值。singleton：这是默认的作用域。在singleton作用域下，无论多少次请求，Spring容器都会为每个bean定义创建一个实例。
Scope 在 CSS 中的使用
weixin_45575594的博客
02-17 2748
scope 在 CSS 中的使用
CSS Scope 简述
weixin_33961829的博客
03-18 4174
简介 在 vue 文件中的 style 标签上，有一个特殊的属性：scoped 。当一个 style 标签拥有 scoped 属性时，它的 CSS 样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签全部加上了 scoped ，相当于实现了样式的模块化。 实现原理 采用 PostCSS 转义实现。 ...
学习日记--css :scope 伪类的用法
McDull的博客
05-03 1542
在js中查询dom中的querySelector返回的是第一个查找到的也是单个DOM元素，querySelectorAll返回的是一个数组，NodeList。同时既可以用document.querySelectorAll(),也可以用dom.querySelectorAll();
深入解读CSS的OOCSS和SMACSS以及BEM
09-25
例如，OOCSS强调元件复用和抽象，SMACSS提供了一套组织CSS的结构框架，而BEM则提供了一种命名约定，确保CSS选择器的清晰和模块化。通过理解和掌握这些CSS编程方式，可以提升前端开发的效率和代码质量，使得CSS更易于...
CSS BEM 命名规范简介(推荐)
09-22
BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加...这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料,感兴趣的小伙伴们可以参考一下
CSS BEM 命名规范的实现
04-21
BEM的主要目的是通过定义命名空间来解决CSS的范围问题，从而使CSS更具可维护性。BEM的核心思想是将页面分解为独立的块（Block），块中包含元素（Element），并且可以通过修饰符（Modifier）来改变块或元素的状态或...
CSS规范BEM CSS和OOCSS的示例代码详解
11-20
BEM CSS和OOCSS的思想大家在日常编码中一定有所用到，只是没有系统的了解和完全规范的使用。 BEM(Block, Element, Modifier) CSS 介绍 BEM是一种 前端命名规范 ，顾名思议就是将页面拆分成每一个富有语义的块，块和...
vue的scope css原理
qq_34111969的博客
10-22 894
1. 每个组件中style如果加了scope，vue-loader将会为这个组件生成一个独特的hash值（多个scope也只会生成一个相同的hash值） 2. 组件的hash值只会添加到当前组件的原生元素，以及子组件的根元素上面，不会添加到子组件非根元素 带::v-deep的scope css最后经过vue-loader处理之后的样式为[hash] .class 不带::v-deep的处理后的样式为.class[hash] 看上面就懂了 ...
CSS的scoped私有作用域和深度选择器
Future1994的博客
11-10 356
大家都知道当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。那么他是怎么实现的呢，大家看一下编译前后的代码就明白了： 编译前： <style scoped> .example { color: red; } </style> 编译后： <style> .example[data-v-f3f3eg9] { color: red; } 看完你肯定就会明白了，其实是在你写的组件的样式，添加..
浅谈vue项目进阶开发-样式篇
weixin_37693991的博客
10-17 1466
1.全局sass的引入 项目开发时,引入全局基本样式，是必要的。如何引入就不再赘述，度娘知道:https://blog.csdn.net/qq_31393401/article/details/80759535; 全局样式包括：reset.scss里包括哪些相信应该都清楚，其次base.scss内可以根据需求加一些基础可适用的样式，如input，button。利用scss预处理样式的优势定义一...
CSS中scope和scoped区别
沛哥儿的专栏
06-08 1992
scope和scoped是两个完全不一样的东西。放一起说，一般是面试官的杰作。
[css]：css mudule和css scope的对比及css scope的原理
吃瓜群众的博客
04-04 848
今天在看style规范时发现一个属性css mudulehttps://cn.vuejs.org/v2/style-guide/，搜了搜他的相关用法 css scoped <template> <button class="button button-close">X</button> </template> <!-- 使用...
@Scope注解 详细讲解及示例
热门推荐
扛麻袋的少年的博客
03-05 3万+
本文目录1.@Scope注解是什么2.@Scope注解怎么使用3.singleton/prototype模式演示3.1 singleton单例演示3.2 prototype多例演示4.恶汉/懒汉4.1 singleton 恶汉 演示4.2 prototype 懒汉 演示5.Bean实例对象的销毁6.@Scope注解的使用场景 1.@Scope注解是什么   @Scope注解是 Spring IOC 容器中的一个作用域，在 Spring IOC 容器中，他用来配置Bean实例的作用域对象。@Scope 具有
@Scope 用法
老照片
01-19 3233
@Scope 用法
使用@Scope注解设置组件的作用域
weixin_44230693的博客
04-23 1152
使用@Scope注解设置组件的作用域
BEM模型matlab
最新发布
05-11
BEM（边界元方法）是一种数值计算方法，通常用于求解与某个区域边界有关的物理问题，如电场、磁场、声场等。BEM方法将待求解区域边界分割为若干小区域，通过对每个小区域进行计算，最终得到整个区域的解。在BEM中，被分割的小区域通常称为边界元。 MATLAB是一种流行的科学计算软件，它提供了很多工具箱和函数，可以方便地实现BEM模型的求解。MATLAB中可以使用PDE Toolbox工具箱来求解二维和三维的边界元问题，也可以使用其他工具箱或自己编写代码来实现。 具体实现步骤包括：建立几何模型、定义材料属性、设置边界条件、离散化边界、求解方程、后处理结果等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@大迁世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值