Question

我使用2种方式，但由于重用代码，我更喜欢第一种方式。有些人更喜欢其中一种。但我想知道大型程式化页面中的负载是否比其他方式更好。

1）

<style>
  .red{ color:red}
  .right25{ margin-right: 25px}
  .bold{ font-weight:bold}
</style>

<p class="red right25 bold">this is a red text, bold and right margin 25px</p>

2）

<style>
  .class1{ color:red; margin-right: 25px; font-weight:bold}
</style>

<p class="class1">this is a red text, bold and right margin 25px</p>

Answer 1

这取决于您可以实际重用的代码量，但性能差异不会那么大。

这些方法之间的最大区别在于类的含义。通常，您应该有代表您要显示的内容的类，而不是您用于显示它的确切样式。进行更改时，代表意图而非实施的名称会更好。

例如，如果您有班级right25，并希望将边距更改为20像素，那么您要么拥有一个不能代表其实际功能的类名，要么您必须在您使用它的任何地方将其更改为right20。

Answer 2

你绝对在谈论第一种可能比第二种方法慢的方法吗？

回答：样式css的速度没有区别。

举例说明：

div{
  color: blue;
  padding: 10px;
}
div{
  color: red;
  font-size: 16px;
  padding-left: 5px;
}

当css应用于规则时，浏览器将应用以下css：

div{
  color: red;/*later one*/
  font-size: 16px;
  padding: 10px 10px 10px 5px;/*padding-left 5px is taken from later rule*/
}

当div从样式表中设置样式时，浏览器会同时对其进行解析。

为什么没有区别？

在任何其他编程语言（如JavaScript）中，如果一行出错，则另一行不会运行，因此从该行代码中解释器将不会读取整个代码。

但是在css语言中，即使你编写了html没有这样的类或id的规则也没有问题，即使你的样式表中有一些错误，读取下一行代码也没有问题，无论浏览器是否会加载整个样式表文件并且读取代码并同时给出输出（当样式表完全加载时），并且两个代码的速度似乎没有任何差别。

_{顺便说一下，由于样式表逐行下载逐行代码，因此在32kbps以下网络连接速度较慢的情况下可能会更慢（即使你无法用眼睛捕捉）。} < / p>

Answer 3

两个是你的答案。浏览器从右到左读取每个类。读一节课比读两节课要快。

http://csswizardry.com/2011/09/writing-efficient-css-selectors/

http://css-tricks.com/efficiently-rendering-css/

使用外部的stlye表。浏览器可以缓存它。

http://www.w3schools.com/css/css_howto.asp

什么是更快：更多的课程或独特的课程

3 个答案: