Question

在我的脑海里，我总是知道在任何项目中使用内联样式的类。但是，是否有任何文章/帖子/博客定义每个的利弊？我正在讨论这个问题，我似乎很难找到我很久以前读过的关于此的博文。

Answer 1

首先：

如果HTML是独立于整个网站设计构建或生成的（例如共享模板代码），则添加合理命名的类和ID，专门链接到外部样式表。使用足够的元素来允许任意CSS操作。例如，请参阅CSS Zen Garden。 这适用于所有CMS，程序，脚本和其他动态生成的网站内容。 HTML输出必须完全不包含任何类型的样式或布局。没有例外。

假设您正在处理静态内容，那么：

如果有任何方法可以重复使用该样式，请将其设为类并链接到样式表。
如果没有办法重复使用该样式（这是一次性的事情在其他地方没有意义），那么使用引用该元素的#id的<style>块。
如果CSS属性仅在周围HTML的上下文中有意义（例如clear:的一些用法），那么我将样式内联到元素中。

很多人称之为异端，就像很多人都谴责在现代编程语言中使用goto一样。

然而，我的观点是，您应该根据您的情况选择最能减少整体工作量的方法，而不是订阅风格教条。样式表添加了一个间接级别，使站点级别的更改变得容易，并有助于建立一致性。但是如果你在每个页面上有几十个只在一个地方使用过的类，那么你实际上是在增加你的工作量，而不是减少它。

换句话说，不要因为人们告诉你这是正确的方式而做一些愚蠢和混乱的事情。

Answer 2

原因很简单。 CSS的重点是将内容（HTML）与表示（CSS）分开。这完全取决于可访问性和code reuse。

Answer 3

如果有选择，我的第一个偏好是类/其他选择器。但是，有些情况下内联样式是唯一的方法。在其他情况下，只有一个CSS类本身需要太多的工作，其他类型的CSS选择器在那里更有意义。

假设你必须斑马条纹给定的列表或表格。您可以简单地使用选择器来完成工作，而不是将特定类应用于每个备用元素或行。这将使代码保持简单，但它不会使用CSS类。致illustrate the three ways：

仅使用课程

.alternate {
    background-color: #CCC;
}

<ul>
    <li>first</li>
    <li class="alternate">second</li>
    <li>third</li>
    <li class="alternate">fourth</li>
</ul>

使用class +结构选择器

.striped :nth-child(2n) {
    background-color: #CCC;
}

<ul class="striped">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

使用内联样式

<ul>
    <li>first</li>
    <li style="background-color: #CCC">second</li>
    <li>third</li>
    <li style="background-color: #CCC">fourth</li>
</ul>

第二种方式看起来最便携，并封装给我。要在任何给定的容器元素中添加或删除条带，只需添加或删除striped类。

然而，有些情况下，内联样式不仅有意义，而且是唯一的出路。当可能值的集合很大时，尝试为每个可能的状态提前创建类将是愚蠢的。例如，允许用户通过拖动动态地将某些项目放置在屏幕上的任何位置的UI。该项目必须绝对或相对地使用实际坐标定位，例如：

<div style="position: absolute; top: 20px; left: 49px;">..</div>

当然，我们可以为div可以采用的每个可能位置使用类，但不建议这样做。人们很容易明白为什么：

.pos_20_49 {
    top: 20px;
    left: 49px;
}
.pos_20_50 {
    top: 20px;
    left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px

<div class="pos_20_49">..</div>

Answer 4

使用常识。

每个人都知道，在理想的世界中，演示和内容应该分开。每个人都知道这在很多时候都不是很好。我们都知道你应该使用div而不是表格进行布局，但我们也知道，对于你无法完全控制内容的任何情况，它都无法正常工作。

下载一个500k样式表来设置一个元素，因为你已经采取了所有可能的样式并将其粘贴在样式表中会导致页面被删除，下载500个较小的样式表来设置页面样式因为你需要它们所有这些也会杀死你的页面页。

重用在概念上很棒，但事实是它只在某些情况下有用。这同样适用于概念存在的任何地方。如果您的项目按照您希望的方式执行，那么在每个合理的浏览器中都会这样做，并且以有效的方式执行，并且可靠地执行，然后您很高兴，重构css并不比代码更难。

Answer 5

我无法想到任何内联样式的专业人士。

CSS完全是关于Progressive Enhancement和not repeating yourself (DRY)。

使用样式表，更改外观变得像在HTML代码中更改一行一样简单。犯错误或客户不喜欢这种变化？恢复旧样式表。

其他优点：

您的网站可以自动调整到不同的媒体，例如打印输出和手持设备。
有条不紊地包含了CSS修复程序，因为那个gawd-awful 浏览器 - 不应该命名，变得非常容易。
您的用户可以使用Stylish等插件轻松自定义网站。
您可以更轻松地在网站之间重复使用或共享代码。

Answer 6

我只能想到内联样式适当和/或合理的两种情况。

如果以编程方式应用内联样式。例如，使用JavaScript显示和隐藏元素，或在呈现页面时应用特定于内容的样式（请参阅＃2）。
如果内联样式在id不合适或合理的情况下完成单个元素的类定义。例如，为图库中的单个图片设置元素的background-image：

HTML

<div id="gallery">
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
</div>

CSS

#gallery .image {
    background: none center center;
}

Answer 7

要完成此主题，在创建HTML + CSS电子邮件时，值得一提的是inline styles are the only way to go in GMail。

有关详细信息，请参阅：http://www.email-standards.org/clients/gmail/

Answer 8

假设您正在使用外部样式表，除了前面提到的那些之外，还有一个额外的好处是缓存。浏览器将下载并缓存样式表一次，然后在每次引用它时使用本地副本。这使您的标记更紧凑。转移和解析标记较少意味着为用户提供更快速的感受和更好的体验。

Answer 9

内联样式绝对是最佳选择。只需看看http://www.csszengarden.com/ - 类和外部样式表就无法实现......

或等待......

Answer 10

类是可以添加到HTML元素的可重用样式。 e.g -

<style> 
   .blue-text{color:Blue;}
</style>

您可以使用此蓝色文本类并将其重复用于任何HTML元素请注意，在CSS样式元素中，类应以句点开头。在HTML元素的类声明中，类不应以句点开头。而内联风格就像是 -

<p style="color:Blue;">---</p>

因此，两者之间的区别在于您可以重复使用类，而不能重复使用内联样式。

Answer 11

通过在CSS中添加自定义属性，现在有了另一个用例。可能需要使用内联样式来设置自定义属性。

例如下面，我正在使用CSS网格对齐HTML列表和Div块，并且希望HTML具有灵活性（这是BootStrap或任何其他框架提供的方式），因为该HTML是由应用程序动态生成的。

CSS：

:root{
--grid-col : 12;
--grid-col-gap:1em; 
--grid-row-gap:1em;
--grid-col-span:1;
--grid-row-span:1;
--grid-cell-bg:lightgray;
}

.grid{
    display: grid;
    grid-template-columns: repeat(var(--grid-col), 1fr);
    column-gap: var(--grid-col-gap);
    row-gap: var(--grid-row-gap);
}

.grid-item{
    grid-column-end: span var(--grid-col-span);
    grid-row-end: span var(--grid-row-span);
    background: var(--grid-cell-bg);
}

HTML：

    <ul class="grid" style="--grid-col:4">
        <li class="grid-item">Item 1</li>
        <li class="grid-item">Item 2</li>
        <li class="grid-item">Item 3</li>
        <li class="grid-item">Item 4</li>
        <li class="grid-item">Item 5</li>
        <li class="grid-item">Item 6</li>
        <li class="grid-item">Item 7</li>
        <li class="grid-item">Item 8</li>
    </ul>

在上述HTML中，将四列更改为3，我使用style属性更改了custom属性：

    <ul class="grid" style="--grid-col:3">
        <li class="grid-item">Item 1</li>
        <li class="grid-item">Item 2</li>
        <li class="grid-item">Item 3</li>
        <li class="grid-item">Item 4</li>
        <li class="grid-item">Item 5</li>
        <li class="grid-item">Item 6</li>
        <li class="grid-item">Item 7</li>
        <li class="grid-item">Item 8</li>
    </ul>

您可以在https://codepen.io/anon/pen/KJWoqw

上查看扩展的实时示例。

内联样式与类

11 个答案:

仅使用课程

使用class +结构选择器

使用内联样式