css - 向一个元素添加许多 CSS 类会导致任何性能影响吗？

Question

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

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

Answer 1

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

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

Answer 2

您正在添加 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;
}

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