如何使用CSS将类添加到元素

Question

CSS被引入以将网站的内容与其呈现方式分离。我主张严格分离关注点。CSS类选择器非常有用，可以将没有自己标签的HTML元素分组（例如，如果您的页面显示许多卡片，则使用类：“联系信息卡”）。只要类选择器对于纯文本浏览器的用户也是相关的（以替换缺失的内容标记），这就是一个很好的解决方案。但是，一旦您开始向除所需设计属性之外没有任何共同点的元素添加类选择器，您就会从内容中改变呈现方式（例如，类：“background-black”就像使用HTML样式标记）。

为了保持严格的分离，同时仍能够重用CSS代码，我提出了以下解决方案：在有意义的内容点上为HTML元素添加类。如果两个或更多没有共同点的元素需要使用相同的复杂CSS属性，则每个元素都会获得一个id选择器。在CSS文件中，我想将复杂的CSS属性类分配给每个id的元素。如何从CSS代码中向id选择的元素添加类？您知道其他方法来保持内容和呈现方式的严格分离吗？

- alexander

---

虽然你的概念是正确的，更适合根据内容应用类和ID，但是你无法从CSS文件中修改HTML。 - undefined

你的问题很长，所以我可能没有抓住你的要点，但是CSS并不是一种“编程”语言，因此无法通过编程方式添加/删除样式。你必须使用JavaScript来实现这个功能。 - undefined

在AngularJS时代，祝你好运。 :) - undefined

你应该了解一下Sass。 - undefined

但是有没有一种方法可以将一个类的CSS代码“包含”/继承/复制到另一个类定义或ID定义中呢？这样我就可以从一个地方更改属性。 - undefined

Answer 1

对于不太复杂的结构，以聪明的方式编写CSS可能已经足够：

/* Cards */
.employee, 
.service {
  font-size: 1.2em; 
  padding: 20px;
  margin: 20px;
  box-shadow: 0 0 .25rem #ccc;
}

.employee {
  color: blue;
  ...
}
.service {
  color: red;
  ...
}

<div>
  <div class="employee">Kim</div>
  <div class="employee">Jim</div>
</div>
<div>
  <div class="service">Ironing</div>  
  <div class="service">Washing up</div>
</div>

对于上面的例子可能还好，但对于更大的项目，您可能需要像Sass这样的CSS预处理器来保持可维护性：

@mixin card() {
  font-size: 1.2em; 
  padding: 20px; 
  margin: 20px;
  box-shadow: 0 0 .25rem #ccc;
}

.employee {
  @include card();
  color: blue;
  ...
}

.service {
  @include card();
  color: red;
  ...
}

编辑于2015年11月27日 关于关注点分离，我今天重新阅读了Harry Roberts的CSS指南，我认为他对HTML和CSS的解释很好。我想发表一下，因为它与问题中的解释非常不同：

当应用于前端代码时，关注点分离并不是关于在HTML中仅用于样式挂钩的类，而是关于我们根本使用不同的语言进行标记和样式。

简而言之：在您的标记中使用类不会违反关注点分离。类只是充当将两个独立关注点链接在一起的API。分离关注点的最简单方法是编写格式良好的HTML和CSS，并使用明智、审慎的方式使用类将两者链接在一起。

- Josef Engelfrost

Answer 2

如果你不介意将支持限制在Web组件浏览器上，我想你可以创建自己的自定义标签，然后为每个标签应用默认的CSS样式。

- David P

Answer 3

简短的回答是：你不能。

想象一下HTML元素就像一个带有许多属性的对象。其中之一就是class，它只能在HTML本身或者使用JavaScript中进行更改，因为所有元素属性都可以通过文档对象模型来访问。而CSS无法访问HTML属性。

事实上，已经可以读取HTML的data-*属性，并在CSS中使用content: attr(data-something)。也许将来我们可以在任何其他CSS属性上使用attr()。但即使如此，仍然无法仅使用CSS来更改HTML属性。

所以，如果你真的想要像你描述的那样做，就使用JavaScript，通过id搜索所需的元素，然后按照你的意愿更改class。

- Erick Petrucelli