Post by account_disabled on Jan 3, 2024 1:21:32 GMT -8
跳转到研讨会 ↬ 功能面板 JS 中的 CSS - 概念 我关于将 CSS 放入 JavaScript 的想法可以追溯到 2013 年，当时我创建了一个库，最初是作为 CSS 预处理器，但后来我将其转换为客户端工具。这个想法很简单：将对象文字转换为有效的 CSS，然后将其应用到页面。样式与 JavaScript 一起“旅行”。它们捆绑在一起，您无需管理外部样式表。当我尝试这种方法时，我发现了两个问题： 闪烁的无样式文本 (FOUT) 是第一个问题。如果我们依靠 JavaScript 来提供 CSS，那么用户在获得样式页面之前将看到无样式内容一秒（或更长时间）。这会导致布局变化并导致糟糕的用户体验。 第二个问题是没有样式表。JavaScript 应用样式的例子有很多，但大多。
数都是内联样式。换句话说，它们修改styleDOM 元素的属性。这很好，但我们无法遍历所有需要样式化的元素并更改其属性。此外，并非所有内容都可以放置在style属性中，例如媒体查询和伪类。 我的目标是解决这两个问题，我开始制定解决方案。下图展示了我想 Whatsapp 号码列表 象中如何在 JavaScript 中使用 CSS： js 中的 CSS （查看大图） 在您的代码和应用于页面的实际样式之间会有一个库。它的职责是创建一个虚拟样式表，并将一个<style>标签与其关联起来。然后，它将提供一个用于管理 CSS 规则的 API。与 JavaScript 样式表的每次交互都将镜像到注入的<style>标签。通过这种方法，您可以使动态样式与控制它的 JavaScript 紧密耦合。您不必定义新的 CSS 类，因为您可以在。
运行时动态生成 CSS 规则。 我更喜欢生成并注入 CSS，因为内联样式无法缩放。它在技术上很简单，但它根本无法扩展。如果JavaScript中有CSS，我们应该能够像真正的样式表一样控制它。我们应该能够定义样式，然后在内部添加、删除或更新它们。这些更改应该应用到页面，就像静态文件中的样式表一样。 FOUT 问题是一个权衡问题。问题不是“我们应该将 CSS 放在 JavaScript 中”，而是“CSS 的哪一部分可以用 JavaScript 编写？” 当然，排版、网格、颜色都应该放在静态文件中，以便浏览器可以尽快使用它。然而，大量的东西并不是立即需要的——例如，与状态相关的类，比如is-clicked和is-activated。在单页应用程序的世界中 生成的所有内容。
数都是内联样式。换句话说，它们修改styleDOM 元素的属性。这很好，但我们无法遍历所有需要样式化的元素并更改其属性。此外，并非所有内容都可以放置在style属性中，例如媒体查询和伪类。 我的目标是解决这两个问题，我开始制定解决方案。下图展示了我想 Whatsapp 号码列表 象中如何在 JavaScript 中使用 CSS： js 中的 CSS （查看大图） 在您的代码和应用于页面的实际样式之间会有一个库。它的职责是创建一个虚拟样式表，并将一个<style>标签与其关联起来。然后，它将提供一个用于管理 CSS 规则的 API。与 JavaScript 样式表的每次交互都将镜像到注入的<style>标签。通过这种方法，您可以使动态样式与控制它的 JavaScript 紧密耦合。您不必定义新的 CSS 类，因为您可以在。
运行时动态生成 CSS 规则。 我更喜欢生成并注入 CSS，因为内联样式无法缩放。它在技术上很简单，但它根本无法扩展。如果JavaScript中有CSS，我们应该能够像真正的样式表一样控制它。我们应该能够定义样式，然后在内部添加、删除或更新它们。这些更改应该应用到页面，就像静态文件中的样式表一样。 FOUT 问题是一个权衡问题。问题不是“我们应该将 CSS 放在 JavaScript 中”，而是“CSS 的哪一部分可以用 JavaScript 编写？” 当然，排版、网格、颜色都应该放在静态文件中，以便浏览器可以尽快使用它。然而，大量的东西并不是立即需要的——例如，与状态相关的类，比如is-clicked和is-activated。在单页应用程序的世界中 生成的所有内容。