使用自定义属性的CSS样式使其更具可读性。是好是坏？ [英] css styling using custom attributes to make it more readable. good or bad?
问题描述
我有一些带有背景颜色，边框等的CSS样式......就像这样：
I have some css styles with background colors, borders, etc... like this:
.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) */
像这样我可以设置例如按钮的样式。
Like this i can style for example buttons.
示例
<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选择器将其更改为此
To make this more readable and shorter, i want to change it to this using custom attributes and css3 selectors
<button color="fg-green bg-white"
border="red thick dashed"
hover-color="bg-grey fg-black"
hover-border="blue">
</button>
这是一个好习惯吗？
我已经阅读了很多关于此的问题，我无法真正决定我该做什么。
I've read a lot of questions about this, and i can't really decide what i should do.
1） 可以将自己的属性添加到HTML元素吗？
和很多其他问题
1) Is it OK to add your own attributes to HTML elements? and a lot of other questions
从这个问题来看，我了解到自定义属性不符合W3C。但是html5允许您使用 data - 前缀创建自定义属性。在我看来，
，颜色和边框不是真正的数据（或者是它们？），前缀主要用于javascript。所以我不知道我是否应该这样做。
From this question, i learned that custom attributes are not W3C compliant. but that html5 allows you to create custom attributes using the data- prefix.
in my opinion, colors and borders are not really data (or are they?), and the prefix is mostly used for javascript. so i don't know if i should do this.
2）
是使用自定义HTML属性并使用CSS设置样式是不好的做法吗？
在这里，我读到类更好，但是我应该放弃可读性和改为使用类？
Here, i read that classes are better, but should i give up readability and use classes instead?
那么，更重要的是什么？通过使用属性或使用类使代码更强可读但使其可读性降低？
或者有更好的解决方案吗？
So, what is more important? Making the code more readable by using attributes, or using classes but making it less readable? Or is there a better solution?
建议随时欢迎！
编辑：我只是一个初学者，所以我不太了解什么是好的，什么是不好的做法...
edit: i'm just a beginner, so i don't know much about what's good and what's bad practice...
再次编辑：感谢所有人提供此信息，所有答案都有用，所以我赞成每一个。
也感谢Alochi的有用评论。
EDIT AGAIN: Thank you all for this info, all the answers where usefull so i upvoted every single one. Also thank you Alochi for your helpful comments.
推荐答案
这不是一个好习惯。
如何使用自定义属性？
首先，您应该使用数据属性而不是完整属性-custom属性：
How to use custom attributes?
First, you should use data attributes instead of full-custom attributes:
<button data-color="fg-green bg-white"
data-border="red thick dashed"
data-hover-color="bg-grey fg-black"
data-hover-border="blue">
</button>
这些语法有效，您可以根据需要使用多个。请记住，它们不应该干扰外部库（也允许创建自己的数据属性）。
These are syntaxically valid, and you can use as many as you want. Keep in mind they shouldn't interfere with external libraries (which are also allowed to create their own data attributes).
你正在做的事情被称为面向对象的CSS，并且被像Bootstrap（以前的Twitter Bootstrap）这样的框架推广。
你已经开始强烈地链接你的HTML到您的CSS。
What you're doing is called Object Oriented CSS, and was popularized by frameworks like Bootstrap (formerly Twitter Bootstrap).
You've started to strongly link your HTML to your CSS.
内容不再独立于布局！
当然，你已经维护CSS的工作量较少，但：
Sure, you've got less work to maintain your CSS, but:
- 此作品将在您的HTML上逐出
- 您的HTML依赖于您的CSS
- 您的HTML不是语义
如果你想使用CSS，你应该考虑减少你的课程数量，并使用语义类，例如：
If you want to use CSS, you should think to reduce your amount of classes, and use semantic classes instead, like this for example:
.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和OOSCSS的文章。
So far, the better solution is to start to use CSS preprocessors. I you want to go further, I would suggest you to read articles about Sass and OOSCSS.
这篇关于使用自定义属性的CSS样式使其更具可读性。是好是坏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
