有没有办法从冲突中包含 CSS 类名？答案

【问题标题】：Is there a way to contain CSS class names from conflicting?有没有办法从冲突中包含 CSS 类名？
【发布时间】：2014-04-01 22:26:32
【问题描述】：

当为按钮之类的东西使用类结构时，有没有办法指定哪些类应该组合在一起？

例如，如果我有以下情况：

<style>
.button {
  height: 32px;
  width:  16px;
}
.blue.bg {
  background: blue;
}
.white.bg {
  background: white;
}
.blue.text {
  color: blue;
}
.white.text {
  color: white;
}
</style>

<a class="blue bg white text button">Click me</a>

在此示例中，蓝色和白色不知道它们是附加到文本还是背景上。这意味着有时按钮会呈现为带有蓝色文本的蓝色按钮、带有白色文本的蓝色按钮、带有蓝色文本的白色按钮或带有白色文本的白色按钮。

我想知道是否有办法指定将哪些类分组在一起，例如：

class="'蓝色背景' '白色文字'" 要么 class="（蓝色背景）（白色文本）" 要么 class="蓝色背景" class="白色文字" 要么 class="蓝色背景，白色文本" 等等……

是的，我知道你可以让类名更具体（如 bg-blue、text-white），但我的整个 CSS 框架都集中在 classes.c 的语义命名上

【问题讨论】：

如果你想要蓝色背景，为什么不使用blue-bg类？单独拥有一个 bg 类有什么好处？
顺便说一句，你说“我的整个 CSS 框架都专注于类的语义命名”。这不是语义的意思。语义标记描述的是功能，而不是外观。例如，<p class="alert">Watch Out!</p> 是语义化的。

标签： html css fonts colors background

【解决方案1】：

您可以像在a 标签上所做的那样，在一个元素上将类组合在一起。但是，您不能再对该组进行分组。

另外，你的类名不是语义的；使用“蓝色”或“白色”等名称过于具体。如果有一天，你决定让所有“蓝色”按钮变成红色怎么办？您可以在 CSS 中更改“蓝色”类的颜色值，但最终会得到一个应用红色文本的名为“蓝色”的类。你明白我的意思了吗？

另外，为什么不为您想要的每个组合创建一个包含一组文本和背景样式的类，而不是尝试在元素上对它们进行子分组？

这里有一篇文章很好地解释了语义标记：
http://css-tricks.com/semantic-class-names/

【讨论】：

【解决方案2】：

正如我在上面的评论中所描述的，您所做的不是语义标记。语义标记专注于功能，而不是显示。所以有

<div class="modal">
    <h1 class="hd">My Modal</h1>
    <p class="body">Hello there! Welcome to this site</p>
</div>

将是语义的，因为每个元素和类都描述了内容的作用。在上面的例子中，我们描述了一个包含标题和一些主要（正文）文本的模式。现在您可以根据需要将 CSS 添加到这些类中：

.modal {
    position: absolute;
    top: 100px;
    left: 100px;
    background: #ccc;
}
.modal h1 {
    font-size: 15px;
    color: green;
}

现在，假设您要将所有模态框的背景更改为绿色，您只需在一处更改该描述即可。此外，由于您没有在类名中描述背景颜色，因此您永远不会遇到类名与实际 CSS 形成对比的情况（就像网站重新设计后可能发生的情况一样）。

更重要的是，如果您描述的是功能是什么，而不是外观，您可以使用相同的标记进行不同的设计。以响应式设计为例。假设您希望所有宽度超过 600 像素的设备上的模式为灰色背景，所有其他屏幕为蓝色背景，您可以轻松覆盖媒体查询中的背景。

您尝试执行的操作称为Atomic CSS。虽然这种方法有利有弊，但您永远不会像上面描述的那样走得那么远。这真的没有任何意义。如果没有颜色类，bg 类会做什么？如果没有描述什么是白色的类，white 类会做什么。如果您想始终将它们组合在一起，那么为什么不使用.bg-blue 和.text-white？无论如何，您已经在您的示例中这样做了，只是使用“点”而不是“破折号”。

所以回答你的问题：不，你不能将类名组合在一起。您需要为每个组合创建特定的唯一类名。

【讨论】：