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的有益评论。

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中的自定义标签（btw：HTML5-CustomComponents）也是如此。但不是选择器中使用的属性（请自行搜索适合的CSS参考）。

添加自定义属性per se并不错。但是对于使用data-为自定义属性（HTML5）添加前缀，我们达成了一致意见，例如： 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中更改它。

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

3 个答案:

如何使用自定义属性？

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

从CSS到Sass，从OOCSS到OOSCSS？