For example if I wanted to select some elements with a certain class using jQuery, and for that reason only, is it always expected that those classes SHOULD be defined in the css?.
<div class="xyz">
something
</div>
<div class="xyz">
something else
</div>
//with example jQuery
$(".xyz").hide();
//is it wrong no element 'xyz' is defined in css?
This is perfectly acceptable. As client side processing is becoming more common place (via jQuery, ExtJS, Prototype, etc), it makes sense to create efficient code that can use the powerful selector support provided by these libraries.
I would say that is ok. The attribute is named class and not cssstyleclass or something like that. It makes perfect sense to define elements with something in common with a class attribute.
i don't think its a bad practice. If you need them you should use them. It makes tonally sense.
If you don't want to, maybe you have a parent element that surrounds the all elements or you could find something else they have in common and translate that in to a selector. $("div#somediv > div").hide() But its gonna cost you more time and thinking as if you just give them a class.
I don't think so.
You're not separating data from presentation if you use classes like "right" "pink" etc.
I use classes to define what stuff is inside an element.
<div class="product">
I can use it with CSS and JS but sometimes I just like to have classes so I can debug easily.
The class attribute specifies a classname for an element.
The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
it's not poor form to use class attributes with no corresponding css rule...
it's even better to use class as a "data holder" than any other attributes like rel, title, etc...
Using CSS classes and - depending on the case - IDs (unique!!) is perfectly fine and often the only solution to keep your HTML code valid while giving additional attributes used by scripts.
While using non-standard attributes often works fine, too, it will prevent your html code from validating and might cause issues in the future.
However, for some cases there might be attriutes which can be used, too - like rel on links which is often used for scripts which modify link behaviour.
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 also mentions that class is general-purpose:
The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:
- As a style sheet selector (when an author wishes to assign style information to a set of elements).
- For general purpose processing by user agents.
It's actually very cunning. You don't think about it at first, but you can do some pretty cleaver things with class hierarchies.
Facebook for instance uses the User-Agent HTTP header to set browser specific classes on the body tag. It's not used all the time but it can be used to write browser specific CSS and it's superior to many other altenatives becuase it's just cleaver usage of CSS and you end up grouping browser specific things together with the general CSS rules, promoting a locality in your CSS files. That's important when you need to maintain CSS files over a longer period.
a { color: blue; }
.ie7 a { color: black; }
Becuase how CSS "cascades" the above CSS rule for the anchor tag will be more specific when rendered with Internet Explorer 7. That will through the selector's specificity force the anchor tags to be black in IE7, without hackish and obscure CSS tricks.
As mentioned by others, it can also be used through JavaScript. I find it very useful to use CSS classes as a Boolean flag. e.g. I can use it to create a very simple watermark control.
<input type="text" value="watermark" class="watermark" />
$('input').focus(function(e) {
var target = $(this);
if (target.hasClass('watermark')) {
target.val('');
target.removeClass('watermark');
}
});
That jQuery snippet will work just fine, but what's more subtle here is that I now have two things. Logic and styling in one shot. Becuase the watermark, used here as a flag, can also be used to apply a specific visual style through CSS, depending on the state of this input. e.g. I might wan't a greyish colored italic font, when the water mark is active.
There are many more examples like this and I do encurage you to experiment more.