What is the right way to use more than 1 CSS class on an element?

Question

I can imagine it can get complicated fast trying to debug style issues when there are multiple classes associated with elements. Currently I'm using multiple classes but in a way that one type of class is for jQuery manipulation and the other is for style. So I can have an element

<div id='myDiv' class'ActionControl SearchBox'></div>

where the .ActionControl is used by jQuery and the .SearchBox has a style associated in the CSS file. Is this right or wrong? What do people more experienced with this think?

What issues have other people come up against? How have they been resolved?

Answer 1

I can't see anything wrong with that. Probably, you could prefix the jQuery classes with e.g. jActionControl, so you have a better overview over who uses what classe if it gets really ugly with many classes.

Of course, you can assign as many classes as you want so there is nothing wrong with your approach in my eyes.

Answer 2

As long as your code is comprehensible, maintainable and clear to others, your system is good.
There is no standard I am aware of in how to give CSS classes, except one:
If you need to target a single element in the page using JS or CSS you should use an ID and not CLASS.

Answer 3

This is definitely a good practice...

What you have to keep in mind always is not to remove the class attribute, instead you will be removing the classes you exactly want to remove.

Also, another problem (not for me) is that multiple classes are not supported for OLDER browsers.

Keep in mind to code your CSS in a way it prevent code duplication so a float:left class can be used in many different elements, this is to keep code clear.

Answer 4

Another way to use multiple classes is to get a kind of inheritance.

.thing { ..blah.. }
.thing.subthing { ..tweaks.. }


<div class="thing"></div>
<div class="thing"></div>
<div class="thing subthing"></div>

Here all the things get "blah" applied to them, but only the subthing div gets the tweaks.

Yes, it can get complicated. As with any power tool, you need to apply it judiciously and with discipline.