html - 现代的内联CSS？

Question

我有一个包含大量 CSS 的 HTML 网页。假设我每个 div 有一种样式，我需要将它添加到我的外部 css 文件还是只在该 html 页面内编写内部 css？

看看这个例子。

<div class="sub">
<a href="#"> Link <i class="fa fa-user-circle-o" aria-hidden="true"></i></a>
</div>

我需要为“链接”和图标添加两种不同的颜色。我可以简单地这样做。

<div class="sub">
<a href="#"> <span style="color:red"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" style="color:black"></i></a></div>

或者也可以添加类并将其写入外部 css。

<div class="sub">
<a href="#"> <span class="color-1"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" class="color-2"></i></a>
</div>

我知道这两种方法行之有效，但需要了解针对此类情况的最佳实践。内部还是外部？

Answer 1

简短回答:

尽量不要使用inline 样式，因为inline 样式在!important 关键字之后具有最高优先级。当我们有太多很多行，并且使用了inline风格，我们想要找到并覆盖它是非常困难的。