时间戳

首页 > 解决方案 > 对 CSS 类命名约定感到困惑

css - 对 CSS 类命名约定感到困惑

问题描述

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

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

在此处输入图像描述

标签： cssnaming-conventions

解决方案

在以下情况下： CSS：（.container.top { color:red; }无空格） HTML：<div class="container top">First text layer</div>

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

这方面的一个例子是大多数网站上的“夜间模式”......开发.night人员通过 JS 将一个类应用于 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”

推荐阅读