CSS 样式、类或数据属性，而不是使 HTML 包含样式信息答案

【问题标题】：CSS styling, classes or data- attributes, and not make the HTML contain the styling infoCSS 样式、类或数据属性，而不是使 HTML 包含样式信息
【发布时间】：2019-03-25 03:37:24
【问题描述】：

我在学习 HTML 和 CSS 时写了一些笔记。我已经重写了数千行，并且花了很多时间进去关于以下问题的圈子：

我想制作一个项目，例如一段代码紧跟在它前面的段落附近，因为它们是相关的。我以前是这样做的，HTML：

<p>This introduces the following:</p>
<code class="block close"> <!-- Pay attention to this line, going to change it below -->
    var a = 1;
    var result = 2 * a ;
</code>

匹配的 CSS：

p, code.block { 
    margin: 1em 1em 0 1em;
}
.block { display: block; }
.close { margin-top: 0; }

我不喜欢上面的内容是：

一个使用许多类来为项目添加样式。样式几乎变成了 HTML 的一部分（不好），就像在这个问题中一样，你最终会得到“面向对象的 CSS”css styling using custom attributes to make it more readable. good or bad?:
```
<button color="fg-green bg-white" 
        border="red thick dashed" 
        hover-color="bg-grey fg-black" 
        hover-border="blue">
</button>
```
类名应该表示功能意义，而不是描述样式。
大量的类名使跟踪所有样式变得混乱。

后来我发现自定义属性时我认为我击中了圣杯，并将其更改为如下，HTML：

<code block close>

以上问题：

后来我了解到你只能使用以“data-”开头的属性（来自这篇文章：Is it OK to add your own attributes to HTML elements?）

然后我改成如下，HTML：

<code data-block data-close>

以上问题：

非常冗长。看完https://justmarkup.com/log/2017/07/my-approach-on-using-id-class-and-data-attributes-in-html-css-and-javascript/：作者主要在 JavaScript 中使用 data-I，但在不同状态下也使用 CSS。这对我来说很有意义，因为它是数据属性，而不是样式属性。
后来我读到： https://discourse.wicg.io/t/relaxing-restrictions-on-custom-attribute-names/1444 哪些状态 Angular 使用自定义属性，我们为什么不能？他们建议使用下划线或两个字符和一个破折号开始自定义属性。

然后我改成如下，HTML：

<code _block _close>

我以为我已经完成了，终于找到了一个解决方案，但是它没有通过 W3C HTML 验证检查（我想这并不奇怪）。

所以现在在我花了 2 个小时重写我的笔记之前（之后可能会再次改变）：

<code class="_block _close">

在有人因为“过于主观”而关闭此问题之前，请有人提供有关如何添加样式属性的见解，该方式不会使 HTML 与描述样式混淆，同时仍可维护。

例如，这里有一些其他的样式“属性”：

code._block {display: block padding: 0.5em}
._close     {margin-top: 0.25em}
._far       {margin-top: 2em}
._nb        {font-weight: bold color: yellow}
._strike    {text-decoration-line: line-through}
._compact   {font-size: 0.8em}

我的研究注意：我不是特别想使用 SASS，但我认为如果可以定义样式，然后将这些现有样式链接到其他样式，它将解决上述问题，我读到的东西不能用普通的 CSS 完成。

【问题讨论】：

如果你想将样式应用于段落后面的任何代码块，p + code。（理想情况下，此代码元素应位于 pre 或 figure > pre 中。）无需额外的批量。
你的意思是像 BEM getbem.com/introduction
@BoltClock，我认为这是一个很好的解决方案，谢谢。 html 是否类似于：
这是一个前导段落：
e = mc2;
。我认为它可以工作，除了我希望代码块以及其他（内联块）代码项都由相同的 标记设置样式，我可以将其更改为一个类（不太理想），所以也许类似：<figure><figcaption>This is a leading paragraph:</figcaption>e = mc2;，然后按照您的建议设置样式带图 > 代码。
@SuperDJ 这是一个很棒的命名约定，我将开始使用它，感谢您向我介绍它！
@run_the_race 当然没问题。它不仅对更简洁的 CSS 有很大帮助，对命名也有很大帮助

标签： css class attributes

【解决方案1】：

我还没有真正理解这一点。我的回答是为他们的角色使用这些东西，所以如果你需要附加一些数据使用数据属性，如果你需要样式元素使用类。同时使用两者是正确的，例如如果您需要在脚本中获取状态，使用数据属性，无论她的样式是否发生变化。

HTML 类属性

HTML 类属性用于为元素定义相等的样式具有相同的类名。 https://www.w3schools.com/html/html_classes.asp

HTML 数据-* 属性

data-* 属性用于存储页面私有的自定义数据或应用程序。 https://www.w3schools.com/tags/att_global_data.asp

【讨论】：