行内样式是否被认为是一种不好的实践？

Question

行内样式是否被认为是一种不好的实践？

8

例如，我有这个超级简单的“标题”组件，它基本上只是一个被美化过的

标签。

import React from 'react';

class Heading extends React.Component {

    render () {

        const style = {
            'color' : 'red' 
        };

        return (
            <h1 className='heading' style={style}>
                {this.props.title}
            </h1>
        );
    }
}

export default Heading;

这将在DOM中呈现为以下内容：

<h1 class="heading" style="color: red;">Heading</h1>

很好，看起来不错。如果页面上有一堆这样的组件，它会像这样：

<h1 class="heading" style="color: red;">Heading</h1>
<h1 class="heading" style="color: red;">Heading</h1>
<h1 class="heading" style="color: red;">Heading</h1>
<h1 class="heading" style="color: red;">Heading</h1>

请注意样式属性一遍又一遍地重复出现的情况？所以，我的问题是，这是一件坏事吗？这有关系吗？从我所知道的来看，这并不是什么坏事，因为你并没有预先从服务器下载这个html页面。因此，所有这些重复的样式并不会导致更大的文件大小。

如果这是真的……那为什么不使用内联样式呢？

免责声明：我明白stackoverflow对于这类问题有些“封闭”。如果您对我在这里提出这个问题感到深深地冒犯了（我认为自己是谁！？），请友善地指引我去哪个网站和社区 :)

- user818700

1

这个不太合适，因为它非常主观。您可以通过类或内联样式来实现红色。我不在意您使用什么，因为这是您的应用程序。这是个人或团队的偏好。 - Dan Wilson

内联样式通常不好，因为您必须多次编写相同的代码。这样的代码很难维护，因为您需要更改每个元素，否则它们将具有相同的类，而不是在CSS中更改一个类。在您的情况下，您仍然可以在一个地方修改代码，它将更改所有元素，因此您的代码实际上并没有遇到相同的问题。尽管仍然存在CSS特异性的问题，因为内联样式具有最高的权重。 - Nick G

我认为这有点“重复”。另一方面，创建另一个CSS类并不会更短。只是将 color: red; 变成 redclass 或其他名称不会使页面大小发生太大变化，除非您向该类添加其他样式。但是想象一下，如果有人查看您的源代码？那将很尴尬！ - Gray Fox

@NickG 我完全理解你的想法，但如果你想要全局样式，你也可以创建一个Globals.js文件，并将其导出为你可以在任何组件中导入和重用的全局样式。例如字体重量，如果你想要更改应用程序中的字体重量并且必须修改每个组件的内联样式，那将是可怕的，但如果你有一个可导入的全局对象，所有组件都使用它，你仍然只需要修改一个文件。 - user818700

1

@DeanGibson，我同意你的观点。使用只需更改一行而不是多行的文件要好得多。在HTML中编写内联样式是不好的做法，因为它会增加文件的大小并使其更难维护。只要您没有以某种方式搞砸JavaScript，那么我认为您所做的事情没有问题。 - Nick G

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rfornal · Accepted Answer

内联样式不一定很糟糕（是的，有些纯粹主义者会不同意）。我确信有一些内联使 sense。如果您正在生成一次性的概念验证，请尽管去做。如果必须在昨天完成，并且下周还有重构时间，那么它可能有效。

您已经安排好了工作，并且在查看 HTML 时（在 React 代码中），您可以看到您试图进行的视觉更改。

我尝试考虑决定对错的长期影响。如果有人想几年后更改此颜色为红色，会发生什么。处于那个位置的开发人员会首先考虑 CSS，而不是代码。

我不会内联样式，而是依靠适当的分类，以便通过修改 CSS 文件来调整视觉样式，而不是深入并重新编译代码。还要记住，内联样式更难在 CSS 代码中覆盖（来自外部文件）。