内联样式不好吗？

Posted 2023-02-22

【中文标题】内联样式不好吗？

【英文标题】：Are inline styles bad?

【发布时间】：2021-12-31 05:11:52

【问题描述】：

React 的 Styling and CSS 文档试图回答 Are inline styles bad? 的问题，并简要建议“CSS 类通常比内联样式更具有性能”。但没有提供进一步的解释。

严格从性能的角度来看，并且礼貌地忽略发送重复 CSS 声明的明显成本，内联样式与 CSS 相比究竟有多糟糕？

【参考方案1】：

我认为内联样式总是不错，但大多数时候最好不要使用内联样式，原因如下：

它会覆盖您在 CSS 文件中为该元素使用的其他样式 不能在 CSS 文件中为该元素使用自定义响应样式 如果您在许多标签中使用了一个样式并且想要更改它，则必须更改所有标签，但如果您使用一个类，则只需更改类样式

【讨论】：

谢谢哈米德，你的观点是对的，但我真的在寻找一个特别关注性能差异的答案。

【参考方案2】：

我还补充说，对我来说这是最不方便的：性能。 内联样式使您的页面更大，从而增加带宽和加载时间，并影响 SEO。

【讨论】：

谢谢，Carles，但我希望只关注性能，除了我已经熟悉的重复 CSS 声明的带宽成本。我很想知道内联样式是否还有其他因素会影响页面加载时间...