css - 每个 html 元素的 css 规则 VS 每个元素的几个简单的 css 规则？

Question

外部css赋值有2种方法，我用的是第一种；大多数网站使用第二种方法。我想知道我是否做错了!

第一种方法:

为几乎每个 css 规则创建一个类并在任何地方使用它们。

<div class="f_left d_iblock">
   <span class="w_100 f_left">blah blah</span>
</div>


.f_left{
    float:left;
}
.f_right{
    float:right;
}
.d_block{
    display:block;
}
.w_100{
    width:100%;
}

....
....

第二种方法:

为每个元素创建 css 规则。

<div id="container">
   <span>blah blah</span>
</div>


#container{
   float:left;
   display:inline-block;
}

#container span{
   width:100%;
   float:left;
   font-weight:bold;
}

一般我都是用第一种方法。我选择这种方法是因为它为我提供了以下内容。

• 小的 css 文件因此提供更少的加载时间。
• 可重复使用的 css 规则。
• 清晰的代码因此 CSS 管理比第二种方法更容易。
• 我不需要创建 id 或 class 属性，只需分配 css 规则。所以我不需要为每个元素想一个名字 :)
• 我认为浏览器可以快速解释 css 规则，从而提高性能。

我看到大多数网站一般不使用这种方法，我开始认为我需要努力提高性能，但我正在填充 html 文件而不是 css，为每个元素写入 3 到 4 个 css 规则名称.

注意:我懂一点英语。我希望你能理解我。如果你能写简单的句子我会很高兴:)

Answer 1

不采用第一种方式的主要原因是它没有将表示与内容分开:您的 HTML 元素看起来像 <span class="f_left d_block w_100"> , 将演示文稿嵌入到 HTML 本身中。 CSS 的全部意义在于从 HTML 中删除表示，这样您就可以编写 <span class="product-list-description">在 HTML 中，然后在 CSS 中定义样式。

第一种方法可能允许更少的 CSS 规则，这些规则可以在许多不同的元素上重复使用，但它会强制您在想要更改表示时更改 HTML。例如，如果您有许多应用了相同 CSS 规则的元素，如果您想更改它们的外观，则必须更改每个元素的 HTML。这是很多工作并且容易出错。使用第二种方法，您将拥有适用于所有这些元素的 CSS 规则，并且要更改它们的呈现方式，您只需更改规则即可。在大多数元素中，这是一个显着的优势。