我们可以在另一个 css 类中包含常见的 css 类吗？

Posted 2023-02-23

【中文标题】我们可以在另一个 css 类中包含常见的 css 类吗？

【英文标题】：Can we include common css class in another css class?

【发布时间】：2010-12-07 06:19:18

【问题描述】：

我是 CSS 新手。我只是想知道，是否可以将一个公共类包含到另一个类中？

例如，

.center align: center;
.content  include .center here;

我遇到了 css 框架 - Blueprint。我们需要将位置信息放入html，例如

<div class="span-4"><div class="span-24 last">

因此，我们将定位属性放在 html 中，而不是 css。如果我们改变布局，我们需要改变html，而不是css。

这就是我问这个问题的原因。如果我可以将 .span-4 包含到我自己的 css 中，我就不必在我的 html 标记中指定它。

【问题讨论】：

答案有问题吗？

在背景颜色方面，我发现这将非常有帮助，但我们不得不以艰难的方式做事。 T.T

【参考方案1】：

奇怪的是，即使 CSS 谈到了继承，类也不能以这种方式“继承”。您真正能做的最好的事情是：

.center, .content  align: center; 
.content  /* ... */ 

另外我强烈建议你不要做这样的“裸”类选择器。尽可能在类之外使用 ID 或标签：

div.center, div.content  align: center; 
div.content  /* ... */ 

我这样说是因为如果您将选择器做得尽可能广泛，那么一旦您获得大型样式表，它最终会变得难以管理（根据我的经验）。您最终会遇到意外的选择器相互交互，从而创建一个新类（例如 .center2），因为更改原始选择器会影响各种您不想要的东西。

【讨论】：

我强烈反对避免使用裸类选择器。在我所有这些年的 CSS 中，我从未遇到过将两个概念上不同的类命名为相同的问题。如果你这样做了，那么 a) 你可以很容易地更改一个名称，并且 b) 指定元素名称并不能解决问题，只会降低它的可预测性，并且通过扩展，更难诊断和解决，因为 大多数有时，元素不会匹配，因此错误只会在某些时候出现。真正的问题是使用像“center”这样的类名。

我必须部分同意cletus 和Thom。首先，像“center”这样的类描述了它的外观，而不是它是什么，应该避免。像“内容”这样的语义类名称是一个更好的选择。现在，关于使用广泛（或“裸”）选择器，我必须同意 cletus ——这确实是灾难的根源。 Firebug 使识别错误变得更容易，但是如果您有十个 <div> ，每个都有不同的语义，那么每个都应该有自己的类。如果它们共享显示属性，则使用多重选择器（例如 div.content, div.author_name ）

【参考方案2】：

在标准 CSS 中，这是不可能的，虽然这很好。

对于类似的东西，你需要使用 SASS 或类似的东西，它们“编译”为 CSS。

【讨论】：

+1 这些系统只是让编写 CSS 变得更容易一些——它们最终都变成了普通的 CSS。

【参考方案3】：

这就是层叠样式表中的层叠发挥作用的地方。

将您的 html 元素或小部件/模块（嵌套的 html 元素组）视为一个对象。您知道您将拥有共享相同属性的对象，因此您需要创建一个它们可以利用的可重用类。

.baseModule align: center;

假设您的模块是一条消息（错误，闪存...）。因此，您“扩展”或“包含”您的 .baseModule 类，因为所有消息都将居中对齐（参见最终的 html 示例）。

.message border: 1px solid #555;

此外，您希望错误消息具有红色背景。此外，如果您希望它是不同的颜色或其他东西，您可以在此处从 .baseModule.message 覆盖边框属性。

.error background-color: red;

所以现在您有了一些可以轻松重用的 css 定义。

<!-- Regular message module -->
<p class="baseModule message">
    I am a regular message.
</p>

<!-- Error message module -->
<p class="baseModule message error">
    I am an error message. My background color is red.
</p>

要将此与您的问题联系起来，您基本上会利用多个类名来实现最大的可重用性。诚然 ie6 不支持链式选择器 (class1.class2.class3)，但它仍然是一个巧妙的技巧！