内联CSS在组件世界中工作得更好

如果您在几年前就学习了Web开发，那么您可能会发现(被告知)这样将CSS内联到您的HTML是错误的：

//在框<；div style="；width：100px；Height：100px；edge：1px纯黑；"；>；中显示'；一些内容'；>；一些内容<；/div>；

CSS具有类，允许您将样式规则组合在一起并为其命名。您应该使用这些工具：

//在框<；style>；.box中显示'；某些内容'；。box{width：100px；Height：100px；edge：1px Solid Black；}<；/style>；<；div class="；box"；>；某些内容<；/div>；

您已经使样式可重用。您可以在任何地方使用方框，然后如果您想在任何地方更改任何方框的外观，只需在一个地方更改即可。

您已经为该样式指定了一个有意义的名称，在阅读标记时很明显，div是一个框。您可以非常轻松地在标记中搜索框。

您将样式从标记中抽象出来，这意味着您的内容和它的外观没有彼此的隐式依赖关系，只有一个通过class属性的引用。您甚至可以将样式放在不同的文件中。通过替换这个类，您可以很容易地使div变成圆形，而不是长方体，但是它仍然会显示相同的内容。

这些理由听起来都很好，因为它们使我们想要的东西成为可能。但它们在实践中真的会奏效吗？在一个现代的网络应用程序中，我不会真的这么认为。

要了解原因，让我们特别深入研究这第三点。当然，我们可能想改变呈现相同内容的方式。但是这里的内容到底是什么意思呢？是指加价吗？我不认为这是真的。

为什么？因为在现代Web应用程序中，我们不仅在框和圆等简单的单一元素容器中呈现内容，还在抽屉、模态、浮动面板和其他复杂的多元素组件中呈现内容。

这意味着该类通常不能用来定义组件的外观，因为更改它不仅仅意味着更改单个容器的类。实际上，这通常意味着完全更改标记，并将相同的内容(相同的副本、图像等)适当地放入这个新结构中。

当然，所有的Web框架对此都有一个很好的抽象：组件。在组件中，您可以随心所欲地定义标记，并提供一个接口，在该接口中，您可以将内容作为属性传递，然后根据需要将其注入到自定义标记结构中。您也可以随心所欲地称组件为任何名称-通常是像DRACTER或MODAL这样的名称，并将其用作标签，就像div或span一样。

通过这种方式，您可以只使用模板中的组件，就像使用单个元素div或span一样。只需键入组件标签并插入内容即可。这已经消除了将类作为指定内容外观的一种方式的需要。

//正方形<；div class='；Square&39；>；中的某些内容此处<；/div>；//更改为圆形<；div class='；Circle&39；>；此处<；/div>；

在现代Web应用程序中，组件是正确的解决方案、正确的抽象是不言而喻的。但是，即使在组件世界中，CSS类和外部样式表仍然存在。

为什么？因为在旧世界，由旧的抽象主导，有一条规则，你不应该混合样式和标记。制定该规则的理由是合理的，因为正如我们已经讨论过的，类是组件，标记是内容。

然而，在组件世界中，这不再是正确的，因此这条规则是多余的。但这条规则仍然存在，没有受到太多质疑，因为这就是规则倾向于做的事情。

组件为我们提供了使用组件标记实际内联或并置样式的机会，同时仍然照顾到上面列出的三点。这其实是一件很棒的事情！当您需要更改Modal的外观时，您会去哪里？当然是到Modal文件。如果您的标记和样式就在那里，要么内联到标记中，要么与标记放在一起，您更改它们就完成了。

更重要的是，您知道没有任何内容引用这些样式，因此其他任何内容都不会受到影响。在外部样式表中引用类的模型中，这两种情况都不再成立。您必须链接到另一个文件。您不知道Box类在其他地方被秘密引用为其他地方的快捷方法，所以当您更改Box时，您也会更改看起来有点像Box但略有不同的东西，即您希望保持相同的外观。这件事杂乱无章，而且工作太多了。

尽管如此，这个类仍然有一个突出的伟大功能。因为类是由简单的字符串名称引用的，所以可以很容易地动态创建、选择和组合内联样式，而不是使用基于字符串的HTML模板语言。用这样的模板语言创建实际的CSS既混乱又困难。

这可能就是为什么Reaction的到来让它最终变得更加明显，标记中没有CSS的规则在组件世界中没有什么意义。原因是，Reaction的模板语言JSX拥有JS的全部功能。因此，使用简单的JS对象构建内联样式是微不足道的-甚至是优雅的-这样做实际上比使用字符串构建来引用类更干净。

当然，它还有更多的内容，但这超出了这篇博客文章的范围，这篇文章的目的只是讨论内联CSS在组件世界中更有意义的要点。但为了快速列举基于类的CSS与内联相比仍具有的几个优点。

通过不在服务器呈现的标记中到处重复样式可能会更好地压缩(假设您有100个相同的元素呈现相同的内联样式100次，而不是在1个类中呈现相同的内联样式100次)。

尽管如此，在库中提供了更强大的抽象，比如Reaction中的样式化组件，它们实际上使用幕后的类，但是通过其他方式在组件代码中提供内联样式的语法。虽然这是一个相同的概念，语法并不重要，但是基本的内联本质是-即样式嵌入到组件本身中，而不是嵌入到组件外部并被引用，从而使事情变得更干净、更清晰和更容易维护。