向元素添加许多 css 类是否会对性能产生影响？

Question

在我们的项目中，我们有基础 css 文件，其中包含类用于大多数常见 css 属性（例如 .p10 -> padding:10px， vam -> vertical-align:middle)。

如果我在单个 DOM 中使用其中的许多类，是否会对性能产生任何影响？

Answer 1

您要添加 7 个字节的 HTML，这实际上对您的站点的影响为 0，而 CSS 处理速度再次如此之快，实际上对您的站点的影响为 0。

有很多 CSS 框架使用类似的模块化方法，您的代码可能如下所示：

<main>
  <div class="p10 vam d_ib blk internal bigshadow"></div>
  <div class="p10 vam d_ib blk internal bigshadow"></div>
  <div class="p10_20 vam d_ib blk accent-blue internal bigshadow"></div>
</main>

.p10 { padding: 10px; }
.p10_20 { padding: 10px 20px; }
.vam { vertical-align: middle; }
.d_ib { display: inline-block; }
.internal { background: #fff; }
.blk { color: #000; }
.bigshadow { box-shadow: 0 10px 15px -8px rgba(0,0,0,.5); }

在不使用框架（或开发内部框架）的情况下，您可能需要一些模块化程度较低且更面向元素的东西：

<main>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container accent"></div>
</main>

附带 CSS:

/* This or main > div */
main .container {
    padding: 10px;
    display: inline-block;
    color: #000;
    box-shadow: 0 10px 15px -8px rgba(0,0,0,.5);
}

.container.accent {
    padding: 10px 20px;
    border: 2px solid #0095ee;
}

为了重申手头问题的答案，堆叠类对元素的影响实际上是零。

Answer 2

它不会导致任何性能影响（它甚至可能比构建深度嵌套的选择器更快）。

此外，您询问的方法甚至有自己的名称 - atomic css 除了@Xhynk 所说的，它并不总是那么糟糕它允许轻松定制并广泛用于许多 CSS 库。

向元素添加许多 css 类是否会对性能产生影响？

Does adding many css classes to an element lead to any performance impact?

css

performance-testing

web-performance

向元素添加许多 css 类 是否会对性能产生影响？

Does adding many css classes to an element lead to any performance impact?

css

performance-testing

web-performance

向元素添加许多 css 类是否会对性能产生影响？