html - 如何使用 CSS 向元素添加类

Question

CSS 的引入是为了将网站的内容与其呈现方式分开。我支持严格的关注点分离。 CSS 类选择器对于对没有自己标签的 HTML 元素进行分组非常有用(例如，类:如果您的页面显示很多卡片，则为“联系信息卡片”)。这是一个很好的解决方案，只要类选择器也与使用纯文本浏览器的人相关(以替换丢失的内容标签)。但是一旦你开始向元素添加类选择器，除了所需的共同设计属性之外别无他物，你就会从内容中更改表示(例如类:“背景黑色”就像使用 HTML 样式标签)。

为了保持严格的分离但仍然能够重用 CSS 代码，我想到了这个解决方案:将一个类添加到 HTML 元素，从内容的 Angular 来看它是有意义的。如果两个或更多没有共同点的元素需要使用相同的复杂 CSS 属性，则每个元素都会获得一个 id 选择器。在 CSS 文件中，我想将 complex-css-properties-class 分配给每个 id 的元素。如何从 CSS 代码中将类添加到 id-selected 元素？您知道将内容和表示严格分开的其他方法吗？

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 Guidelines今天，我认为他解释了关于 HTML 和 CSS 的一个很好的解释。我想我可能会发布它，因为它与问题中的解释完全不同:

The separation of concerns when applied to front-end code is not about classes-in-HTML-purely-for-styling-hooks-blurring-the-lines-between-concerns; it is about the very fact that we are using different languages for markup and styling at all.

In short: having classes in your markup does not violate the separation of concerns. Classes merely act as an API to link two separate concerns together. The simplest way to separate concerns is to write well formed HTML and well formed CSS, and link to two together with sensible, judicious use of classes.