现代的内联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

实际上，将CSS放在外部是一种很好的做法，但这取决于具体情况。为此，最好使用内联CSS。

Answer 2

简短回答：

尽量不要使用inline样式，因为inline样式在!important关键字后具有最高优先级。当我们有太多行并使用inline时风格，如果我们想找到它并覆盖它就很难。