Question

我已经研究过这个主题，但我找不到我需要的确切答案。

例如我有很多需要边框的div。我可以编写一个单独的css类，如

.border{

    border: solid;
    border-color: #C6C6C6;
    border-radius: 5px;

}

并在每个需要边框的div标签中使用它。或者我可以包括

        border: solid;
        border-color: #C6C6C6;
        border-radius: 5px;

我正在为我的div写的每个css类的属性。

通过为边框编写单独的类并使用它可以减少我的css文件中的大量行。但我的问题是，如果我为我的div编写的每个css类包含边界属性，它是否会影响Web应用程序的性能。

提前致谢。

Answer 1

公平地说，这是一个非常有意义的问题......

我不知道你是否知道但是CSS代表级联样式表，它是为了级联而设计的。从表格到html标签。所以简短的答案是否定的，今天的互联网连接，可能不是。不过，这里有一些事情需要考虑......

1）缩小CSS - 使用CSS节省性能的最佳方法是缩小＆＃39;它。有许多在线生成器可以像这样https://cssminifier.com/这样做。这将删除文档中不必要占用kb的任何字符，例如空格和换行符。

2）用户体验 - 现在美国或英国等国家的用户现在大部分都可以使用高速宽带，但是你必须考虑到一些非常古老的连接，你会发现必须从每个连接中重新绘制该规则。标签可能需要时间。

3）可读性和调试 - 如果您需要稍后返回帽子代码并决定要更改边框颜色，那么您必须对每个标签执行此操作以应用该更改，而不是对一种样式进行一次简单更改片。此外，如果您尝试使用浏览器内部开发工具进行调试，您会发现只需在一个规则上查找一个值而不是在应用此选项卡的多个选项卡时，这也更复杂。

4）级联效应 - 最后，这首先完全违背了CSS模型的要点，因为它们的样式从规则，样式声明（在html标题中）到标记，这使得两个文档不仅易于阅读而且易于编辑太

所以简而言之，是的，有一个性能优势，但除非在较旧的连接上，否则不会明显，但在其他开发领域的好处比单独的加载速度更加奇怪。

Answer 2

答案是肯定的！最佳做法是使用通用类。

OOCSS，BEM和SMACSS是组织你的CSS的好方法。

Answer 3

通过编写太多CSS代码可能会使CSS文件大小变大。如果你可以通过创建一个类来避免重复的代码行，那就去做吧。避免重复代码是一种最佳做法，这样如果任何更改需要更改一行代码，它将反映每个地方。因此，如果可以避免重复代码。并且远程缩小了生产网站的CSS，以便CSS文件更小，因为页面加载时间可以得到改善。

Answer 4

您正在尝试to solve a problem you're not yet having。在需要之前不必担心优化。

更广泛的说，您拥有的CSS规则数量可以影响网站的加载时间。当您的浏览器遇到CSS时，它将停止呈现页面，解析CSS并构建CSSOM（CSS Object Model）。

因此，即使您缩小，压缩和合并CSS文件，过多的CSS仍可能会使您的网站变慢。

不过，听起来好像您不必担心这一点，因此请不要担心，直到出现问题为止（例如，如果千位样式为100或1000，则为问题）。