对 CSS 类命名约定感到困惑答案

【问题标题】：Confused about CSS class naming convention对 CSS 类命名约定感到困惑
【发布时间】：2020-10-17 04:53:03
【问题描述】：

尝试学习 CSS，我正在编写代码并想命名三个 CSS 类。我搜索了 CSS 名称约定并偶然发现了this answer。所以我按照答案中的建议命名了我的类，但是我安装的一个 atom 包建议我不要这样做。我现在很困惑我是否做对了。对于<div class="container top">我有：

.container.top {
  background-color: #e4f9ff;
  width: 200px;
  height: 200px;
}

【问题讨论】：

同样有不同的用例何时只使用.container 或.top 或.container.top 或.container>.top 所以继续阅读你会得到信息。
请阅读CSSLint documentation。 “此规则旨在标记在 Internet Explorer 6 及更早版本中将失败的相邻类的使用。” — 是的，你做得对；只需禁用该规则。
@user4642212 感谢您提供链接。那我不应该在类之间使用空格来解决问题吗？
@Gigili 不，空格完全改变了意思。

标签： css naming-conventions

【解决方案1】：

.container.top {} 定位具有两个类（容器和顶部）的 div 如果您在它们之间放置一个空格.container .top {}，那么它会在子对象（容器）内以（顶部）类为目标。

在我看来一切都是正确的。除非它没有完成你希望它完成的事情。

.container.top {
  background-color: #e4f9ff;
  width: 200px;
  height: 200px;
}

&lt;div class="container top"&gt;

【讨论】：

【解决方案2】：

如果是： CSS：.container.top { color:red; }（没有空格） HTML：<div class="container top">First text layer</div>

“仅在这种情况下，其中 div 具有 .container 和 .top 作为类然后应用 css”

大多数网站上的“夜间模式”就是一个例子……开发人员通过 JS 将 .night 类应用于 body 标签。

在 CSS 方面，您将有一个常规的 body 标签相关颜色，例如 body{ background-white; } 和一个仅夜间模式的颜色 body.night{ background-color:black; }。只要将.night 类添加到body，背景颜色就会发生变化，因为它具有优先级，因为它更具“针对性”。

/--------/

如果是： CSS：.container, .top { color:red; } HTML：<div class="container top">First text layer</div>

"如果有 .container 类应用 css。如果有 .top 类应用 css"

【讨论】：