Question

引入CSS是为了将网站内容与其演示文稿分开。我是严格分离关注点的支持者。 CSS类选择器非常有用，可以对没有自己标记的HTML元素进行分组（例如，如果您的页面显示多张卡片，则为“联系信息卡”类）。这是一个很好的解决方案，只要类选择器也与具有纯文本浏览器的人相关（以替换缺少的内容标签）。但是一旦你开始向元素添加类选择器，除了所需的设计属性之外什么都没有，你可以在内容中更改表示（例如：class：“background-black”就像使用HTML样式标记一样）。

为了保持严格的分离，但仍然可以重用CSS代码，我提出了这个解决方案：从一个HTML元素添加一个类，从内容的角度来看它是有意义的。如果两个或多个没有共同点的元素需要使用相同的复杂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的良好解释。我想我可能会发布它，因为它与问题中的解释完全不同：

当应用于前端代码时，关注点的分离并不是关于HTML中的类 - 纯粹为了样式 - 钩子 - 模糊关注点之间的界限;事实上，我们正在使用不同的语言进行标记和样式化。

简而言之：在您的标记中添加课程并不违反关注点的分离。类仅仅充当API以将两个单独的关注点链接在一起。分离关注点的最简单方法是编写格式良好的HTML和格式良好的CSS，并通过合理，明智地使用类来链接到两个。

Answer 2

如果您不介意限制对Web Components浏览器的支持，我想您可以创建自己的自定义标记，然后为每个标记应用默认的css。

Answer 3

简短的回答是：你不能。

将HTML元素视为具有许多属性的对象。 class是其中一个属性，只能在HTML本身或JavaScript中更改，因为所有元素属性都由文档对象模型公开。另一方面，CSS无法访问HTML属性。

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

因此，如果你真的想要你所描述的内容，请使用JavaScript，按id搜索所需的元素，然后根据需要更改class。

如何使用CSS向类添加类

3 个答案: