层次结构是否应该包含在 CSS 名称中？ [关闭]答案

【问题标题】：Should hierarchy be included within css names? [closed]层次结构是否应该包含在 CSS 名称中？ [关闭]
【发布时间】：2011-09-23 18:50:29
【问题描述】：

在 CSS 名称中包含层次结构的“最佳实践”是什么？ EG:，假设我们有以下html：

<div class="foo">
<div class="$className2">
<div class="$className3">123
</div>
</div>
</div>

$className2 是否应该包含 'foo-' 作为前缀，而 $className3 是否应该同时包含 'foo-' 和 $className2 作为前缀？还是父类名不应该包含在子类名中？

【问题讨论】：

【解决方案1】：

不需要包含父类的名称。 CSS 选择器将处理您需要的任何父格式。

一个类，应该描述你正在使用的内容类型。例如

<div class="sidebar">
<div class="error">
</div>
</div>

您很可能希望有特定于错误类的格式，这与侧边栏类无关。如果您希望对侧边栏特定的错误类进行格式化，css 选择器可以为您处理

.sidebar > .error

或

.sidebar .error

【讨论】：

【解决方案2】：

很简单，您是在重用这些类名，还是在除同种结构之外的任何地方重用这些类名？如果不是，则没有必要由父母限制它。但是，如果您是，那么最好通过包含其父节点选择器来明确指示哪个子元素是哪个。

【讨论】：

【解决方案3】：

我大部分时间做的一件事是在子类前面加上下划线 - 我会为您的示例中的 html 使用以下 css：

.foo { ... }
.foo ._$className2 { .. }
.foo ._$className3 { .. }

在这种情况下，“.foo”将包装类似“foo 组件”的东西。并且每个仅在此包装器中使用的子类（这意味着它本身没有意义）都带有下划线。这使您的 CSS 保持干净，并让您可以轻松查看一个类是否打算应用于页面上任何地方的元素，或者它是否应该出现在特殊的上下文中。

【讨论】：

【解决方案4】：

在 CSS 类命名方面没有严格的最佳实践。您拥有多少规则、组件的模块化程度以及网站规模等相关因素都是重要的考虑因素。

对于小型网站，我更喜欢保持 CSS 类非常简单。

在您的 CSS 中，您可以使用嵌套选择器来定位以您呈现的方式结构化的元素：

.foo > .bar > .baz { ... }

HTML：

<div class="foo">
  <div class="bar">
    <div class="baz">
      ...
    </div>
  </div>
</div>

对于较大的网站，或者如果您正在寻找规范的命名模式，一种流行的方法是block-element modifier (BEM)。

【讨论】：