【早阅】@scope 与 HTML style：一个强大的组合

前端早读课 · 公众号 · 前端 · 2024-10-20 08:03

主要观点总结

文章介绍了使用纯HTML和CSS实现scoped CSS的方法，即利用@scope规则定义样式作用域，无需依赖特定工具或框架。文章分析了现有工具的局限性，并强调了该方法的优势，如真正的作用域样式、提高效能、易于维护等。同时，也提到了浏览器支持情况和未来影响。

关键观点总结

关键观点1: 现有工具的局限性

文章指出CSS Modules、Styled Components和Vue的scoped样式等现有工具在解决全局样式冲突和提高样式管理效率方面存在局限性，如需要构建工具支持、样式文件与组件分离、依赖JavaScript等。

关键观点2: @scope规则简介

文章介绍了使用纯HTML和CSS实现scoped CSS的方法，即通过HTML中的标签并使用@scope规则定义样式作用域。这种方法具有真正的作用域样式、提高效能、易于维护等优点。

关键观点3: 浏览器支持情况

文章提到Firefox浏览器目前尚不支持@scope规则，但其他主流浏览器如Chrome、Safari已经支持。Firefox正在积极开发对@scope的支持，预计不久的将来会得到全面支持。

关键观点4: @scope规则的应用场景

文章阐述了@scope规则适用于各种场景，如构建组件、创建主题和变量、快速原型设计等。

关键观点5: 影响与展望

文章强调了使用纯HTML和CSS实现scoped CSS的方法对简化开发流程、提高样式管理效率等方面的积极影响，并展望了未来可能成为前端开发的主流实践。

正文

作者：@Chris Coyier
原文：https://frontendmasters.com/blog/reminder-that-scope-and-html-style-blocks-are-a-potent-combo/

背景

在现代前端开发中，CSS 的作用越来越重要，尤其是在组件化开发的趋势下。为了解决全局样式冲突和提高样式管理的效率，开发者们引入了许多工具和技术来实现 “scoped CSS”，即局部作用域的 CSS。这些工具包括 CSS Modules、Styled Components、Vue 的等。然而，最近有一种新的方法引起了关注，即使用纯 HTML 和 CSS 来实现 scoped CSS，而不依赖于任何特定的工具或框架。

【第2978期】CSS中@scope的简介

要点

本文探讨了一种使用纯 HTML 和 CSS 实现 scoped CSS 的方法，即通过在 HTML 中嵌入标签并使用 @scope 规则来定义样式的作用域。这种方法不需要任何额外的工具或框架支持，且具有广泛的适用性。

分析

现有工具的局限性

CSS Modules

需要构建工具的支持，且样式文件与组件分离，增加了维护成本。

Styled Components

虽然提供了组件级别的样式封装，但依赖于 JavaScript，且样式定义与组件逻辑混合，可能影响代码的可读性。

Vue 的

仅适用于 Vue 框架，且需要特定的构建工具支持。

【第1444期】Vue: scoped 样式与 CSS Module 对比

纯 HTML 和 CSS 的解决方案

@scope 规则

@scope 是一个新的 CSS 功能，允许您将样式限制在特定的 HTML 元素及其子元素中。通过在 HTML 中嵌入标签，并使用 @scope 规则来定义样式的作用域。例如：

 <div>
        <p>Hi ho here we go.p>
        <style>
          @scope {
            :scope {
              border: 1px solid red;
              p {
                color: red;
              }
            }