html - css规则名称的最佳方式是什么？

Question

许多 ajax 调用意味着您正在从不同的模板视图中获取内容。在这种情况下，一些 id 可能会重复。所以我想知道如何命名样式规则的最佳逻辑。我目前正在两个选项之间做出决定：

• 为每个 id 添加前缀。每个选择器看起来像#templateName-idName
• 将每个模板包装到一个带有模板名称 id 的 div。所以每个选择器都会以 #templateName #idName 开头

您对此有何看法。用一些前缀绝对分隔每个 id 是个好主意吗？

Answer 1

使用某种形式的伪命名空间（如 id 前缀）是防止冲突的好主意。从 CSS 的角度来看，您应该尝试创建更多可重用/一致的样式规则，因此通常避免将 id 用于站点结构元素和一次性修复之外的任何内容。显式类/id 标记和组合选择器的组合应该导致更清晰和更可维护的样式表。就 id 而言，这将使组合的 #container-child 约定更可取，因为最初的命名空间原因，同时也强调和利用了 id 的唯一性。

Answer 2

通常，当我做繁重的 AJAX 时，我有以下规则：

大多数情况下，我只会更新“内容”的一个位置。如果我有需要更新小部件等的子 Ajax 调用，这些不必是独特的想法。您可以利用其他 DOM 元素，例如 append 或 insert after 等...

Answer 3

如何同时使用 ID 和类？就像是：

HTML：

<div id="templateOne" class="content">
    <!-- content -->
</div>
<div id="templateTwo" class="content">
    <!-- content -->
</div>

CSS：

#templateOne.content { /* styles */ }
#templateTwo.content { /* styles */ }