层次结构应该包含在css名称中吗？

Question

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

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

$ className2是否应该包含'foo-'作为前缀，而$ className3包含'foo-'和$ className2作为前缀？或者父类名称是否应包含在子类名称中？

Answer 1

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

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

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

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

.sidebar > .error

或

.sidebar .error

Answer 2

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

Answer 3

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

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

在这种情况下，“。foo”会包含类似“foo组件”的内容。并且每个仅在此包装器中使用的子类（意味着它本身没有意义）前面加上下划线。这可以使您的css保持干净，并使您可以轻松查看某个类是否应该应用于页面上任何位置的元素，或者它是否应该出现在特殊的上下文中。

Answer 4

在CSS类命名方面，没有最佳的实践。重要的考虑因素包括您有多少规则，组件的模块化程度以及网站的规模。

对于小型网站，我宁愿保持CSS类非常简单。

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

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

HTML：

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

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