Question

我在学习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（BAD）的一部分，就像这个问题一样，您最终得到了“面向对象的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 哪个州使用了自定义属性，为什么不能呢？他们建议以下划线或两个字符和破折号开头的自定义属性。

因此，我将其更改为以下HTML：

<code _block _close>

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

所以现在我花了2个小时重新编写笔记，就像（可能以后会再次更改）一样：

<code class="_block _close">

在有人因为这个问题“太主观”而关闭该问题之前，可以请某人提供一些见解，以如何在不影响描述样式的HTML的同时又保持其可维护性的方式添加样式属性。 / p>

例如，以下是一些其他样式的“属性”：

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完成。

Answer 1

我还不太了解这一点。我的答案是使用事物作为其角色，因此，如果需要附加一些数据，请使用数据属性，如果需要样式化元素，请使用类。可以同时使用两者，例如，如果您需要在脚本中获取状态，使用数据属性，无论样式是否更改，都是正确的。

HTML类属性

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

HTML数据-*属性

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

CSS样式，类或数据属性，但不要使HTML包含样式信息

1 个答案:

HTML类属性

HTML数据-*属性