3

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

由于我很难说出这个问题，也许举个例子会更有意义。

例如，假设我有以下 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类进行修改而不必太担心它的使用位置，而其他位置可以使用该类中的样式而不必担心，具体来说，它们是什么.

我了解我有以下选择，并说明了为什么，在我相当缺乏经验的情况下，它们不够完美：

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

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

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

4

4 回答 4

3

首先你不能做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课堂上进行更改。它将在任何地方更改

于 2012-09-29T03:47:47.943 回答
2

简短的回答：在纯 CSS 中无法做到这一点。

更长的答案：Sass 通过@extend 指令解决了这个问题。

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

这使您可以在开发中保持 CSS 模块化，尽管在使用它之前确实需要一个预编译步骤。虽然它工作得很好。

于 2012-09-29T04:16:29.287 回答
1

我同意 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 的方式。

于 2012-09-29T04:12:36.350 回答
1

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

于 2012-09-29T03:49:12.367 回答