Is Having Multiple Classes In An Element A Good (or Best) Practice?

Is having multiple classes in a single element a good practice? Like so:

Or is it better to do this:

Solution 1:

Depends on the project, what you're trying to accomplish, and what pre-existing helpers you're using.

If you're using something like Twitter Bootstrap, use what you're given to accomplish what you need in the least amount of code.

If you're building something with custom classes, stick with one pattern and follow through. You want to be conscious of why you're adding a class, otherwise you can run into specificity problems later down the line and resort to adding more on top just to pinpoint a particular element.

If adding a class will save 10 lines of repeated code, as you repeat the same styles with like items, absolutely go for it. However, I like to try to keep the classes as streamlined as possible.

A very boiled down example:

THIS

<div class="one">
   <p><h1>Hi there!</h1></p>
</div>

.one {
    /* css here */
}

.one > p {
    /* more css here */
}

.one > p > h1 {
    /* even more css here */
}

COULD WORK INSTEAD OF ALL THIS

<div class="one">
   <pclass="one-p"><h1class="one-header">Hi there!</h1></p>
</div>

.one {
    /* css here */
}

.one .one-p {
    /* more css here */
}

.one .one-p .one-header {
    /* even more css here */
}

Share