css 样式使用自定义属性使其更具可读性。是好是坏？

Question

我有一些带有背景颜色、边框等的 css 样式……像这样：

.bg-red {
    background-color:red;
}
.bg-blue {
    background-color:blue;
}
/*more background colors*/
.border-red {
    background-color:red;
}
.border-blue {
    background-color:blue;
}
/*more border colors*/

     /*Like this i also have foreground color, border thickness, border style, transition/hover styles (specially for button hover) */

像这样我可以为按钮设置样式。

例子

<button class="fg-green bg-white 
               border-color-red border-thickness-thick border-style-dashed 
               hover-bg-grey hover-fg-black 
               hover-border-blue">
</button>

为了使其更具可读性和更短，我想使用自定义属性和 css3 选择器将其更改为这个

<button color="fg-green bg-white" 
        border="red thick dashed" 
        hover-color="bg-grey fg-black" 
        hover-border="blue">
</button>

但这是一种好的做法吗？

我已经阅读了很多关于此的问题，但我真的无法决定我应该做什么。

---

1) Is it OK to add your own attributes to HTML elements? 还有很多其他问题

从这个问题中，我了解到自定义属性不符合 W3C。但是 html5 允许您使用 data- 前缀创建自定义属性。 在我看来，颜色和边框并不是真正的数据（或者它们是？），前缀主要用于 javascript。所以我不知道我是否应该这样做。

---

2) Is it a bad practice to use custom HTML attributes and style them with CSS?

在这里，我读到类更好，但我应该放弃可读性并改用类吗？

---

那么，什么更重要？通过使用属性使代码更可读，或使用类但使其可读性降低？ 还是有更好的解决方案？

欢迎随时提出建议！

编辑：我只是一个初学者，所以我不太了解什么是好的，什么是坏的做法......

再次编辑：谢谢大家提供的信息，所有有用的答案，所以我对每一个都投了赞成票。 还要感谢 Alochi 对 cme​​ts 的帮助。

Answer 1

这不是一个好习惯。

如何使用自定义属性？

首先，您应该使用数据属性而不是完全自定义的属性：

<button data-color="fg-green bg-white" 
        data-border="red thick dashed" 
        data-hover-color="bg-grey fg-black" 
        data-hover-border="blue">
</button>

这些在语法上是有效的，您可以根据需要使用任意数量。请记住，它们不应干扰外部库（也允许它们创建自己的数据属性）。

面向对象的 CSS 是解决方案吗？

您所做的称为面向对象的 CSS，并被 Bootstrap（以前的 Twitter Bootstrap）等框架推广。
您已经开始将您的 HTML 与您的 CSS 紧密关联起来。

内容不再独立于布局！

当然，维护 CSS 的工作量减少了，但是：

• 这项工作在您的 HTML 中被驱逐出境
• 您的 HTML 依赖于您的 CSS
• 您的 HTML 没有语义

如果你想使用 CSS，你应该考虑减少类的数量，并使用语义类，例如：

.button-valid {
    color: white;
    background-color: green;
    border: 1px solid green;
    border-radius: 5px;
    transition: all .2s;
}
.button-valid:hover {
    color: green;
    background-color: white;
}

使用<button class="button-valid"> 比<button class="bg-green fg-white radius-5 b-green bgh-white fgh-green"> 更有意义

从 CSS 到 Sass，从 OOCSS 到 OOSCSS？

到目前为止，更好的解决方案是开始使用 CSS 预处理器。 如果你想更进一步，我建议你阅读有关 Sass 和 OOSCSS 的文章。

Answer 2

首先：除了用于验证的 XHTML (dtds!) 之外，从来没有一个唯一的允许标签和属性列表。 HTML 本身旨在支持自定义数据结构。我知道，那里有很多人不同意“如果它不受限制，你可以使用它”。

最佳实践？好吧，将数据和样式分开是经验法则。类也是“向后兼容”的，HTML 中的自定义标签（顺便说一句：HTML5-CustomComponents）。但不是选择器中使用的属性（请自行搜索合适的 CSS 参考）。

添加自定义属性per se 还不错。但是在自定义属性 (HTML5) 前加上 data- 有一个普遍的协议，例如data-my-custom-attr="abc"。在 CSS3 中，这被用作 [data-my-custom-attr] {} 或 [data-my-custom-attr="abc"] {} 来访问。

例如，jQuery 使这些数据属性可以通过它们的$(elem).data() 命令本地访问，例如var val = $(elem).data('my-custom-attr');

Answer 3

这主要是基于意见，但...

可以给 HTML 元素添加自己的属性吗？

你能做到吗？是的。你应该这样做吗？可能不是。为什么？嗯，有很多原因，但从我的脑海中...

• 您的代码变得不那么面向未来。例如，如果未来的 HTML 规范决定引入一个与您的冲突的新属性。这可以通过以数据为前缀的属性或使用带有自定义模式的 XHTML 来克服，但是...
• 您的代码变得不那么可靠了。由于它不再遵守 W3C 规范，因此浏览器之间的结果可能不一致。在浏览器版本之间制作一个外观一致的网站已经够难的了……
• 即使使用数据前缀属性，它可能不会像您声称的那样提高可读性，特别是对于其他人甚至“未来的您”。您可能会忘记属性的含义，而且，除非您广泛记录您的系统以供将来参考，否则很难找到它的含义。

另外，仅出于可读性考虑，我个人认为这同样具有可读性

<button class="fg-green 
               bg-white 
               border-color-red 
               border-thickness-thick 
               border-style-dashed 
               hover-bg-grey 
               hover-fg-black 
               hover-border-blue">
</button>

使用自定义 HTML 属性并设置样式是一种不好的做法吗？ CSS？

• 嗯，这有点违背了 CSS 的目的，它的想法是分离样式和内容。您的系统与内联样式没有太大区别。 <div style="color: red;"></div>。为什么这种分离很重要？因为如果您想稍后更改样式，会变得更加困难。您需要遍历整个 html 文件来更改每个实例，而不是在 CSS 中更改它。