Question

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

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

Answer 1

您正在添加7个字节的HTML，这实际上对您的网站产生了影响，并且CSS再次处理得如此之快，实际上对您的网站产生了影响。

那就是说，这不是真正适合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); }

最有可能的是，您希望<div>内的所有<main>内容都具有相似的样式，因此这样的内容会更合适：

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

重申对手头问题的回答，堆叠类对元素的影响有效零。

然而，为了将来你的缘故（或者项目的同事/未来开发者），和以保持一致性 - 我强烈反思建立“共同属性作为类/选择器”而是采用更“面向对象”的方法并使用适当命名的类。

顺便说一句，目前我仍在清理我使用dib，db，p0类型类的错误。从错误中吸取教训，在你领先的时候解决它！

Answer 2

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

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

向元素添加许多css类会导致性能影响吗？

2 个答案: