39

在我的脑海中，我一直都知道在任何项目中使用类而不是内联样式。但是两者之间有什么有效的区别吗？

4

10 回答 10

35

首先：

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

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

  • 如果有任何方法可以重用样式，请将其设为类并链接到样式表。

  • 如果没有办法重用样式（这是一次性的东西，在其他任何地方都没有意义），那么使用<style>引用元素#id 的块。

  • 如果 CSS 属性仅在周围 HTML 的上下文中有意义（例如 的某些用法clear:），那么我将样式内联到元素中。

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

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

换句话说，不要仅仅因为人们告诉你这样做是正确的，就去做一些愚蠢和令人困惑的事情。

于 2010-06-30T01:10:48.293 回答
29

有一个简单的原因。CSS 的重点是将内容 (HTML) 与表示 (CSS) 分开。一切都与可访问性和代码重用有关。

于 2010-06-29T16:34:56.057 回答
8

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

假设您必须对给定的列表或表格进行斑马条纹。您可以简单地使用选择器来完成这项工作，而不是将特定类应用于每个备用元素或行。这将使代码保持简单，但不会使用 CSS 类。来说明三种方式：

仅使用类

.alternate {
    background-color: #CCC;
}

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

使用类 + 结构选择器

.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>
于 2010-06-30T02:30:28.573 回答
5

使用常识。

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

下载一个 500k 的样式表来设置一个元素的样式，因为您已经采用了所有可能的样式并将其粘贴在样式表中，这将导致您的页面失效，下载 500 个较小的样式表来为您的页面设置样式，因为您需要它们都将导致您的页面失效。

重用在概念上很棒，但现实是它只在某些情况下有用。这几乎同样适用于存在该概念的任何地方。如果你的项目做你想做的事，在每一个合理的浏览器中做，以一种有效的方式做，而且做的很可靠，那么你就可以开始了，重构 css 并不比重构代码更难。

于 2010-06-30T01:25:16.363 回答
3

我想不出内联样式的任何优点。

CSS 是关于渐进增强的，而不是重复自己 (DRY)。

使用样式表，更改外观就像更改 HTML 代码中的一行一样简单。犯了一个错误或客户不喜欢改变？恢复到旧样式表。

其他优点：

  1. 您的站点可以自动适应不同的媒体，例如打印输出和手持设备。

  2. 有条件地包含 CSS 修复，对于那个 gawd-awful browser-that-shall-not-be-named，变得轻而易举。

  3. 您的用户可以使用 Stylish 等插件轻松自定义网站。

  4. 您可以更轻松地在站点之间重用或共享代码。

于 2010-06-29T18:32:33.303 回答
2

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

  1. 如果以编程方式应用内联样式。例如，使用 JavaScript 显示和隐藏元素，或在呈现页面时应用内容特定的样式（参见 #2）。

  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;
}
于 2010-06-30T03:34:31.617 回答
1

假设您使用的是外部样式表，除了前面提到的那些之外，还有一个好处是缓存。浏览器将下载并缓存您的样式表一次，然后在每次引用时使用本地副本。这使您的标记更加紧凑。传输和解析的标记越少，意味着用户的响应速度越快，体验越好。

于 2010-06-30T00:44:23.823 回答
1

内联样式绝对是要走的路。只要看看http://www.csszengarden.com/ -类和外部样式表永远不可能......

或者等等……

于 2010-06-30T01:29:41.793 回答
1

随着向 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 我使用样式属性更改自定义属性：

    <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查看扩展的实时示例

于 2019-02-01T10:23:11.943 回答
0

类是可以添加到 HTML 元素中的可重用样式。例如-

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

您可以对任何 HTML 元素使用和重用这个蓝色文本类 请注意，在您的 CSS 样式元素中，类应该以句点开头。在您的 HTML 元素的类声明中，类不应以句点开头。而内联样式就像例如-

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

所以两者之间的区别是你可以重用类，而你不能重用内联样式。

于 2016-01-19T21:42:45.043 回答