嵌套样式CSS 中的下一个原生功能

[account_disabled]

这个工具甚至还没有正式推出，但全世界成千上万的开发者都在等待。这就是 CSS 嵌套模块，旨在促进大型项目的开发及其随着时间的推移的可维护性。 计算机内部有一个嵌套，引用了 CSS Nesting 模块。 W3C （万维网联盟）是一个国际联盟，旨在为网络技术的开发制定指南、标准和协调规范。成员团体、大学、政治机构、商业公司等都参与这一过程。 在开源代码理念下，他们共同开发新的标准和规范，并以“文档”的名义发布。反过来，它们又具有不同的类别，可以被视为网络开发标准化提案的成熟状态。目前，W3C 的创始人和该联盟的现任主席参与了 客户端-服务器协议和架构、 HTTP、 HTML 等的开发，仅举几例。 不过，这次我们将重点关注 6 月 17 日提交的一项提案，该提案目前处于“编辑草案”状态。此外，此功能已开始吸引该领域各种前端开发人员的注意。 CSS 嵌套模块 “CSS Nesting Module”或者西班牙语的CSS Nested，处于“Editor's Draft”状态，这是什么意思？嗯，这是一项正在进行的工作，旨在成为标准，尚未发布供审查，希望参与该规范的成员的持续贡献将达到小组章程中足够的技术要求，以进入下一阶段。



规范由编辑Tab Atkins Jr.和Adam Argyle负责，他们都是 Google 员工。正如该提案的官方网站所示，该草案仅供讨论，应被引用为正在进行的工作。应该指出的是，有些提案已经存在多年，并且仍在努力争取有一天能够见到曙光。出于这个原因，此类提案在数百个提案中脱颖而出，令人震惊。 为我们服务？ 提出的提案直接影响 WhatsApp 号码 的开发方式，CSS 是一种风格化 Web 的语言，长期以来我们一直使用工具来改进 CSS 的开发，例如 CSS 预处理器（Sass、Stylus、Post） CSS 等）。上述内容是为了促进大型项目的开发及其随着时间的推移的可维护性。 这些工具共有的主要功能之一是CSS嵌套，它通过在样式规则中添加样式规则极大地方便了样式的开发。这样我们就可以访问一个特殊的选择器，它允许我们使用外部样式规则元素引用，这有助于我们避免重复代码并生成大型样式文件。 下面是没有嵌套的 CSS 和使用这个特殊选择器的 CSS 的示例，如果我们在样式开发中包含 Sass 预处理器等工具，我们将习惯后者： 标准级联样式表示例 标准CSS 级联样式表嵌套示例 CSS嵌套 正如我们在前面的示例中指出的，我们的样式的编写和可维护性通过这条众所周知的规则得到了改善。







然而，将此规范纳入CSS标准对于未来的项目来说是一个巨大的贡献和改进。 CSS Nesting 模块和预处理器之间的差异 现在，到目前为止，我已经根据嵌套 CSS 背后的概念与预处理器进行了比较。尽管如此， 编辑草案对该规范的使用制定了明确的规则。在这里，我们会发现应用本机嵌套 CSS 与预处理器时的差异。他们明确表示 CSS 嵌套模块不会取代这些补充工具，因为它们相对于当前发布的草案仍然具有显着的优势。 下面我解释了使用嵌套模块时要考虑的规则： 嵌套样式规则 定义了两个嵌套规则，直接嵌套和使用 1. 直接嵌套：如果一个样式规则的选择器具有嵌套前缀，则该样式规则可以直接嵌套在另一个样式规则中。 有效的CSS 有关 CSS 嵌套的有效选择器的更多示例，请访问官方草案。 无效的 CSS 有关 CSS 嵌套无效选择器的更多示例，请访问官方草案。