Question

我正试图在我的CSS样式表中更加模块化，并且想知道是否有一些像include或apply这样的功能允许作者动态地应用一组样式。

由于我很难写出这个问题，或许一个例子会更有意义。

比方说，我有以下CSS：

.red {color:#e00b0b}
#footer a {font-size:0.8em}
h2 {font-size:1.4em; font-weight:bold;}

在我的页面中，假设我希望页脚链接和 h2 元素都使用特殊的红色（可能还有其他我希望使用的位置它也是）。理想情况下，我想做类似以下的事情：

.red {color:#e00b0b}
#footer a {font-size:0.8em; apply-class:".red";}
h2 {font-size:1.4em; font-weight:bold; apply-class:".red";}

对我而言，这在某种程度上感觉“模块化”，因为我可以对.red类进行修改而不必过多担心它的使用位置，而其他位置可以使用该类中的样式而不用特别担心他们是什么。

我知道我有以下选择，并且包括为什么，在我相当缺乏经验的意见中，它们并不完美：

将color属性添加到我想成为该颜色的每个元素。 不理想，因为如果我改变颜色，我必须更新每个规则以匹配新颜色。
将red类添加到我想要变为红色的每个元素。 不理想，因为这意味着我的HTML正在口述演示文稿。
创建一个附加规则，选择我想要变为红色的每个元素，并将color属性应用于该属性。 不理想，因为很难找到所有规定特定元素的规则，使维护更具挑战性

也许我只是一个屁股，以下选项是唯一的选择，我应该坚持下去。但是，我想知道是否存在“理想”（嗯，我的理想）方法，如果存在，那么正确的语法是什么？

如果它不存在，上面的选项3似乎是我最好的选择。但是，我想得到确认。

Answer 1

首先，你不能做apply-class:".red";

要执行此类操作，我建议您使用此方法

.red {color:#e00b0b;}
h2 {font-size:1.4em; font-weight:bold;}
.mymargin{margin:5px;}

<h2 class="red mymargin">This is h2</h2>

并在div中使用

<div id="div1" class="red mymargin"></div>

在这种情况下，如果您要更改.red class.it将随处更改

Answer 2

简短回答：在纯CSS中没有办法做到这一点。

更长的回答：Sass通过@extend directive解决了这个问题。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

这使您可以将CSS模块保持在开发阶段，但在使用之前确实需要预编译步骤。它的效果非常好。

Answer 3

您可以在javascript中使用DOM动态编辑HTML标记的id和/或class属性。

Answer 4

我同意DarthCaesar和jhonraymos。要使用JavaScript更新类，您只需要一个简单的：

function toggleColorClass(e){
    var redClass = document.getElementsByClassName('red');
    redClass.removeAttribute('class', 'red');
    /*Set the class to some other color class*/
    redClass.setAttribute('class', 'blue');
}

当然，为了完成这项工作，你需要在你的文档中包含上面的函数...如果这是你正在使用的所有JS，你可能会把它放在脑中甚至可以内联使用它。你可能也想写它，以便切换到两个方向，即打开和关闭红色。此外，jhonray的片段可能是您想要标记CSS的方式。

有没有办法在样式中应用CSS类？

4 个答案: