Why would I ever use a class over an attribute in HTML and CSS?

Question

I'm creating a web app and need to decide on a consistent way to style my elements. I noticed that a lot of help online uses classes but I have generally used attributes (like the query selector [my-attr]) to style multiple elements, since I don't have to work with classList and can remove and set attributes very easily.

Using no external libraries, why would people use classes to style their elements over attributes? It seems like attributes can do everything classes can do but better, since you can also assign values to the attributes as well. I also haven't seen any discussion on performance differences anywhere, making me believe that attributes should be more appreciated than they are in tutorials on styling pages.

Any thoughts on instances where classes could do a better job than attributes at something would be greatly appreciated, even if the arguments are subjective and come down to some sort of preference!

Thanks!

Again, this is for vanilla javascript, HTML, and CSS. I understand that libraries like jQuery may make it easier to use classes, but I don't plan on using any libraries.

Answer 1

It's more consistent, is the end-all be all, truthfully. If you'd rather use attributes, go for it. However it makes it just that much more difficult for anyone who has to help you out later. CSS classes are designed for grouped selection and application of common styles. CSS just happens to also be able to select attributes as well, because it does make sense in some edge cases.

Generally, attributes should be reserved for anything non-style related that adds a value for a different use, be it screen-readers or variable containers for JavaScript, such as data-id="34" may let you make an asynchronous request with the ID parameter.

Consider this example, it's got some simple "class" based buttons:

 .button { display: inline-block; border: 1px solid; padding: 4px 10px; text-decoration: none; margin-bottom: 4px; } .primary { background: currentColor; } .primary span { color: #fff; } .blue { color: #0095ee; } .red { color: #ee3300 } 

 <a href="#" class="button red">Red Button</a> <a href="#" class="button red primary"><span>Red Button</span></a> <br /> <a href="#" class="button blue">Blue Button</a> <a href="#" class="button blue primary"><span>Blue Button</span></a> 

To replicate something like this with attributes, we'll be doing something like this with some obnoxious and rather arbitrary attribute names. Doing this I actually messed up because I used the wrong attribute name and value pair in one case.

 [type="button"] { display: inline-block; border: 1px solid; padding: 4px 10px; text-decoration: none; margin-bottom: 4px; } [status="primary"] { background: currentColor; } [status="primary"] span { color: #fff; } [color="blue"] { color: #0095ee; } [color="red"] { color: #ee3300 } 

 <a href="#" type="button" color="red">Red Button</a> <a href="#" type="button" color="red" status="primary"><span>Red Button</span></a> <br /> <a href="#" type="button" color="blue">Blue Button</a> <a href="#" type="button" color="blue" status="primary"><span>Blue Button</span></a> 

Does it not make more semantic sense to keep all your stylistic and group target attributes inside the class attribute? I mean, that's what it was designed for. I suppose you could drop the parameter value and just use parameter names, but you're really defeating the purpose of attributes, considering class is a Global Attribute in and of itself.

Here's a JavaScript example as well:

 let classes = document.getElementsByClassName('button'); for( i = 0, n = classes.length; i < n; ++i ){ classes[i].style.background = 'red'; } let attrs = document.querySelectorAll('[button]'); for( i = 0, n = attrs.length; i < n; ++i ){ attrs[i].style.background = 'blue'; } 

 a { padding: 10px; margin-bottom: 4px; display: inline-block; text-decoration: none; color: #fff; } 

 <a href="#" button>Attr 1</a> <a href="#" button>Attr 2</a> <a href="#" button>Attr 3</a> <br /> <a href="#" class="button">Class 1</a> <a href="#" class="button">Class 2</a> <a href="#" class="button">Class 3</a> 

Putting aside the fact that JS has immense integration with class (and id) based functions for selectors, you have to use querySelector and querySelectorAll for the attribute buttons.

While not inherently a bad thing, (honestly I prefer querySelector over getElement(s)By… in general), but when you look at it, querySelectorAll('[button]') just does not read well, almost like I'm targeting a <button> element. Semantically it makes it harder to read than:

getElementsByClassName('button') - Clearly getting all elements that have a button class, or even

querySelectorAll('.button') - Since the . is universally understood as the "class" selector, and everyone working with HTML, CSS, and JS learns that on literally day 1 of any web development program/tutorial. So you're throwing a bit of a wrench into the project by removing such a fundamental piece of it.

I'm sure you've heard the phrase "Just because you can, doesn't mean you should." - I think that applies perfectly here. I mean, we actually used to use things like <font color="red">Red</font> and we moved away from it because it made more sense to group styles in a single Global Attribute. There's nothing stopping you, but I think it's asking for more trouble than it's worth to drop classes for arbitrary parameter names, not to mention if you have an issue and post your code for help, the first response will always be "Why are you doing that, what preprocessor are you using?"

Answer 2

我认为这只是功能上的问题，如果您想给样式使用应该使用的类，但是如果您要修改u可以使用查询选择器，因为它不会在html上添加内联样式，并且可以缩小脚本。