Number of HTML classes for one element

Question

My project uses at least 100 helper classes like the below:

.pa5 {padding:5px} .pa10 {padding:10px} /* ... */
.pt5 {padding-top:5px} .pt10 {padding-top:10px} /* ... */
.pr5 {padding-right:5px} .pr10 {padding-right:10px} /* ... */
 /* ... */

It comes handy in some cases like <div class="pa10">...</div> but I think we overused it or, even worse, misused it.

For example, the below <a> tag contains 8 classes to define how it display (background, background hover, padding, border radius, diplay inline block, margin and float left). It looks like the way you use style="..." to inline style it:

<a href="#" class="bg1 bg2H pa10 rounded5 dpib mb10 fl mr10"></a>

In other case, even when we had the class profileInfo, we still use it with a lot of helper classes:

<div class="profileInfo bd2 clearfix pa5 tac ol1 por"></div>

I think this is a worse practice and could cause significant performance overhead on page rendering. Since I haven't worked a lot with CSS, I could not explain it clearly to make us change the way of using it. What do you think? Does your project have an explicit rule to limit the number of CSS classes for one element?

Answer 1

The use of that many classes is a sign of incorrect CSS usage, but not because of performance. I doubt eight or ten classes on an element will be a noticeable performance issue.

I've never heard of an explicit limit on the number of classes assigned to an element, but that may due to a common understanding that it is not correct to create a class for every visual attribute.

An important (and possibly the primary) purpose of CSS is to associate rendering characteristics with conceptual (semantic) markup. Classes should be named for the concepts they represent, not their appearance. Like this:

.tableofcontents {
    padding-left: 10px;
    padding-top: 5px;
}

If the goal is to avoid duplication (though I honestly don't think duplicating a few lines of declarations in various blocks is harmful), one can assign multiple conceptual classes to a block:

.menu,
.logo,
.heading,
.tableofcontents {
    padding-top: 5px;
}

.menu,
.tableofcontents {
    padding-left: 10px;
}