内联样式不好吗?

Posted

技术标签:

【中文标题】内联样式不好吗?【英文标题】: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 声明的带宽成本。我很想知道内联样式是否还有其他因素会影响页面加载时间...

以上是关于内联样式不好吗?的主要内容,如果未能解决你的问题,请参考以下文章

如何修改element.style内联样式;

如何修改element.style内联样式;

使用媒体查询内联样式[重复]

是否可以创建内联伪样式? [复制]

具有内联样式的 CSS 伪类

SVG:为啥外部 css 会覆盖文本的内联样式?