css-in-js 探讨

摘要：库通过在中插入标签在运行时创建样式。结论是一体化的样式解决方案，用于弥合和之间的差距。零运行时解决方案通过恢复工具来缓解一些缺点，这些工具将讨论提升到更有趣的水平。

Web开发是需要掌握多种技术。我们习惯于与多种语言密切合作。而且，随着开发Web应用程序变得越来越普遍和差别细微化，我们经常寻找创造性的方法来弥合这些语言之间的差距，从而使我们的开发环境和工作流程更容易，更高效。

最常见的示例通常是使用模板语言时。例如，可以使用一种语言来生成更详细的语言（通常是HTML）的代码。这是前端框架的关键作用之一 -操作HTML。这个领域最出名的就是JSX，因为它不是真正的模板语言;它是JavaScript的语法扩展，它使得使用HTML非常简洁。

Web应用程序经历了许多状态组合，多带带管理状态通常很有挑战性。这就是为什么CSS有时会被淘汰的原因 - 即使通过不同的状态和媒体查询管理样式同样重要且同样具有挑战性。在这个由两部分组成的系列中，我想将CSS放在聚光灯下，并探索弥合它与JavaScript之间的差距。在本系列中，我将假设您正在使用像webpack这样的模块解析器。因此，我将在我的示例中使用React，但相同或类似的原则适用于其他JavaScript框架，包括Vue。

CSS领域正朝着多个方向发展，因为要解决许多挑战并且没有“正确”的路径。我一直在花费大量精力尝试各种方法，主要是在个人项目上，所以这个系列的目的只是告知，而不是给你解决方案。

在深入研究代码之前，有必要解释Web应用程序样式化方面最显着的挑战。 我将在本系列中讨论的是范围，条件和动态样式以及可重用性。

作用域定是众所周知的CSS挑战，它的目的是编写不会影响到组件外部的样式，从而避免意外的副作用。 我们希望在不影响编码体验的情况下实现功能。

虽然前端应用程序中的状态开始变得越来越先进，但CSS仍然是静态的。 我们只能有条件地应用样式集 - 如果按钮是主要的，我们可能会应用“primary”类并在多带带的CSS文件中定义它的样式以应用它在屏幕上的样式。 有几个预定义的按钮变化是可管理的，但如果我们想要有各种按钮，如为Twitter，Facebook，Pinterest定制的特定按钮，可能还会有其他很多种？ 我们真正想要做的只是传递颜色并使用CSS定义状态，如悬停，焦点，禁用等。这称为动态样式，因为我们不再在预定义样式之间切换 - 我们不知道接下来会发生什么。 可能会想到内联样式来解决此问题，但它们不支持伪类，属性选择器，媒体查询等。

重用规则集，媒体查询等是我最近很少看到的一个主题，因为它已经被Sass和Less等预处理器解决了。 但是我仍然想在这个系列中再次提起它。

我将列出一些处理这些挑战的技术以及它们在本系列的两个部分中的局限性。 没有任何技术优于其他技术，它们甚至不相互排斥; 您可以选择一个或组合它们，具体取决于您的决定是否能改善您的项目质量。

我们将使用名为Photo的示例组件演示不同的样式技术。 我们将呈现可能具有圆角的响应式图像，同时将替代文本显示为标题。 它会像这样使用：

在构建实际组件之前，我们将抽象出srcSet属性以保持示例代码简洁。 那么，让我们创建一个带有两个实用程序的utils.js文件，用于使用Cloudinary生成不同宽度的图像：

import { Cloudinary } from "cloudinary-core"

const cl = Cloudinary.new({ cloud_name: "demo", secure: true })

export const getSrc = ({ publicId, width }) =>
  cl.url(publicId, { crop: "scale", width })

export const getSrcSet = ({ publicId, widths }) => widths
  .map(width => `${getSrc({ publicId, width })} ${width}w`)
  .join(", ")

我们设置Cloudinary实例以使用Cloudinary的演示云名称，以及根据指定选项为图像publicId生成URL的url方法。 我们只对修改此组件的宽度感兴趣。

我们将分别将这些实用程序用于src和srcset属性：

getSrc({ publicId: "balloons", width: 200 })
// => "https://res.cloudinary.com/demo/image/upload/c_scale,w_200/balloons"

getSrcSet({ publicId: "balloons", widths: [200, 400] })
// => "https://res.cloudinary.com/demo/image/upload/c_scale,w_200/balloons 200w,
      https://res.cloudinary.com/demo/image/upload/c_scale,w_400/balloons 400w"

如果你不熟悉srcset和sizes属性，我建议先阅读一下有关响应式图像的内容。 这样，您可以更轻松地按照示例进行操作。

CSS-in-JS是一种样式方法，它将CSS模型抽象到组件级别，而不是文档级别。 这个想法是CSS可以限定为特定组件 - 并且只限于该组件 - 以使这些特定样式不与其他组件共享或泄露到其他组件，并且仅在需要时才调用。 CSS-in-JS库通过在中插入