css - 样式属性与设置 ID 和外部 Css

Question

我理解将所有表示元素保留在标记之外并将它们放入外部 .css 文件的概念。

我想了解一下您可以证明使用样式属性与设置 ID 和外部 Css 的情况类型。

到目前为止，我已经使用了很多样式属性，我通常使用它来指定特定于该元素的演示项目以及我拉入外部 css 文件的所有元素的任何内容，但我想重新评估我的位置和做出最好的选择。

Answer 1

使用外部 CSS 进行静态定义。使用元素 ID 查找和样式属性来处理在运行时更改的内容或您需要 Javascript 进行设置的地方，因为 CSS 无法满足您的需求。

后者的一个很好的例子是在广泛支持CSS 3 选择器之前 jQuery 中的斑马条纹：

$(document).ready = function() {
    $("table tr:nth-child(even)").addClass("striped");
});

今天，你可以在静态 CSS 中做到这一点，但曾几何时，在 Javascript 中做是最好的选择。

Answer 2

我使用外部样式表，原因如下：

1. 可维护性 - 当我所有的演示文稿都在一个文件中时，这会容易得多。
2. 保持代码干燥 - 是的，这又是一个。以前，我什至使用 style 属性将显示设置为“阻止”或“无”可互换。现在，我只使用一个名为“hide”的类，如果需要隐藏某些内容，则使用该类，如果需要显示某些内容，则将其删除。在这些成熟的 Ajax 应用程序的日子里，我让我的代码免于重复这些事情，而且它更加干净。
3. 当您在大型项目环境中工作时会有所帮助 - 在我上一个工作场所，我们有一套具有相同外观和感觉的应用程序。通过将所有内容放在外部样式表中，包括在特定事件发生后将调用的样式，它帮助团队将一致的 UI 设计应用于应用程序。

I tried to think of reasons of using style attributes, but honestly, I can say I only use it when I am lazy to open up the stylesheet to change something quickly(not too proud of this part, so I try to minimize it)

Answer 3

将所有样式移入样式表的一大优势是可维护性。对于试图维护您的代码的其他人来说，寻找内联样式可能是一个巨大的痛苦。

仅出于这个原因，为特定元素分配一个 ID 并在样式表中定义其样式是值得的。

其次，如果您发现自己编写了很多内联样式，您可能会使用 CSS 的继承属性或除 ID 之外的一些良好分解的类来分解出更多这些样式。

在性能方面，ID 选择与 CSS 一样快，因此使用大量类实际上比使用 ID 深入研究慢，即使只有几微秒。

我发现使用内联样式的唯一实际时间是非常短暂的属性，例如使用 javascript 的动画或隐藏和显示元素（尽管也可以使用类来完成）。