Question

当像类按钮这样的类结构使用时，有没有办法指定哪些类应该组合在一起？

例如，如果我有以下内容：

<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 =“'blue bg''white text'” 要么 class =“（blue bg）（white text）” 要么 class =“blue bg”class =“white text” 要么 class =“blue bg，white text” 等...

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

Answer 1

您可以像对a标记一样对元素进行分组。但是，您不能再使用该组并再次对其进行分组。

另外，你的类名不是语义;使用诸如“蓝色”或“白色”之类的名称太具体了。如果有一天，你决定你想要所有那些“蓝色”按钮现在变成红色怎么办？您可以在CSS中更改“蓝色”类的颜色值，但最后会得到一个名为“blue”的类，它应用红色文本。你看到我得到了什么？

另外，为什么不为你想要的每个组合创建一个包含文本和背景样式分组的类，而不是尝试将它们分组到元素上呢？

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

Answer 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呢？无论如何，你已经在你的例子中做了这件事，只是用“点”代替“破折号”。

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

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

2 个答案: