Question

外部css分配有两种方法。我使用第一种方法;大多数网站使用第二种方法。我想知道我做错了！

Fisrt方法：

为几乎每个＆amp;创建一个类。每个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规则，从而提高性能。

我看到大部分网站一般不采用这种方法最多，我开始想，我需要努力提高的表现，但我写作3膨化HTML文件，而不是CSS的4个CSS规则名称每个元素

注意：我对英语不太了解。我希望你能理解我。如果你能写出简单的句子，我会很高兴的。）

Answer 1

不以第一种方式执行此操作的主要原因是它不会将表示与内容分开：您的HTML元素看起来像<span class="f_left d_block w_100">，并且演示文稿嵌入到HTML本身中。 CSS的重点是从HTML中删除表示，这样您就可以在HTML中编写<span class="product-list-description">，然后在CSS中定义样式。

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

Answer 2

你的两种方法都不太好。你可以写第二种方法：

#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;
    }

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

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

2 个答案: