0

外部 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 规则名称。

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

4

2 回答 2

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 规则，并且要更改它们的呈现方式，您只需更改规则即可。在大多数项目中，这是一个显着的优势。

于 2012-05-11T12:45:14.217 回答
0

你的这两种方法还不是很好。您可以像这样编写第二种方法：

#container{
   float:left;
}

#container span{
   display:block;
   font-weight:bold;
}

但是你为每个属性创建一个单独的类的方法并不好。

您必须阅读一些关于检查这些的好文章

https://developers.google.com/speed/docs/best-practices/rendering

https://developer.mozilla.org/en/Writing_Efficient_CSS

更新

为什么你的方法不好假设我有三个不同的元素，大多数属性相同但不同。

例如：

.one{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:15px;
 color:#000;
 line-height:1.5;
}
.two{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:18px;
 color:#000;
 line-height:1.5;
}
.three{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:13px;
 color:#000;
 line-height:1.5;
}

您可以以更好的方式编写它，从而减小 CSS 文件的大小。像这样写：

.one, .two, .three{
     float:left;
     font-family:"tahoma";
     font-weight:bold;
     font-size:15px;
     color:#000;
     line-height:1.5;
    }
    .two{
     font-size:18px;
    }
    .three{
     font-size:13px;
    }

所以，如果我通过你的方法，我必须分别定义每个属性，这也很耗时而且很重。

于 2012-05-11T12:11:32.853 回答