Hi, there!
I’m quite a beginner and because I’m trying to make a small UI (Html,CSS only) I came across following question:
I started styling the buttons using my own html-attributes and checking their value in my css-code: Dependent on which value the attribute has, the button gets a different style and/or behaviour:
button{
/* the default-style of any button */
}
button[button-color="green"]{
/* additions (sth. like other color etc.) */
}
button[button-color="green"][button-hover="blur"]:hover{
/* blur-hover effect of the green button */
}
This code is working perfectly, but I’m wondering if that what I’m doing is bad practice. I know that I could do that all using classes: e.g. creating a class “.green-button-blur-hover” and create a button with the attribute class=“green-button-blur-hover”.
But that could end in a lot of classes and might be more confusing that what I’m just doing. So, what’s your opinion? Can I continue styling my UI using my own attributes or is this bad practice?
Use classes for styling as that’s what they were designed for and are much more usable and extensible than attribute selectors.
How an earth you think your convoluted chain of attribute selectors is simpler than simple space separated classes indicates that you may be using classes incorrectly. How would you code the following using attribute selectors.
class=‘sidebar secondary warning’
It is also slower for the browser to parse attribute selectors in that way and although it’s not an issue for the odd one it would make the browser work much harder if you did it for all.
Lastly you shouldn’t be making up your own attributes in that way as you should be using the data- format.
Did I say stop doing it
Using attribute selectors as styling hooks is fine when you are styling based on specific attribute but not when you are making your own up.