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

Question

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

我希望了解您使用样式属性与设置ID和外部Css的合理使用情况。

到目前为止，我已经使用了很多样式属性，我通常使用它来指定特定于该元素的表示项以及任何针对所有元素的内容我将其引入外部css文件但是我想重新评估我的立场，并做出最好的选择。

Answer 1

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

后者的一个很好的例子是在广泛支持CSS 3 selectors之前jQuery中的斑马条带化：

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

今天，您可以在静态CSS中执行此操作，但曾几何时，使用Javascript进行操作是最佳选择。

Answer 2

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

1. 可维护性 - 当我的所有演示文稿都在一个文件中时，它会更容易。
2. 保持代码DRY - 是的，再来一次。之前，我曾经甚至使用style属性将显示设置为“block”或“none”可互换。现在，我只使用一个名为“hide”的类，如果需要隐藏某些内容则使用该类，如果需要显示某些内容则将其删除。在完整的Ajax应用程序的这些日子里，我保持我的代码不再重复这些事情，而且它更干净。
3. 帮助您在大型项目环境中工作 - 在我上一个工作场所，我们拥有一套共享相同外观的应用程序。通过将所有内容放在外部样式表中，包括将在特定事件发生后调用的样式，它帮助团队将一致的UI设计应用于应用程序。

我试着想出使用样式属性的原因，但老实说，我可以说我只是在懒得打开样式表来快速改变某些东西时使用它（对这部分不太自豪，所以我尽量减少它）

Answer 3

将所有样式移动到样式表中的一大优势是可维护性。对于试图维护代码的其他人来说，查找内联样式可能会非常痛苦。

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

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

在性能方面，ID选择与CSS一样快，因此使用大量类实际上比使用ID向下钻取更慢，即使只是微秒。

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