Question

I’m currently working on refactoring a large amount of CSS, and a common trend I’m seeing is that several classes have been created for a very specific item on a page. Rather than trying to describe what they do, the classes are named things like “PressReleaseText”, or “SpecLabel”, etc. Most of these just define one item, like a font-size or a color.

I’m wondering if it would be better to just create several utility classes, like .fontSize140 {font-size: 140%;}, .bgColorWhite{ background-color: white;}, and utilize those in place of all the duplication occurring across the current set of classes.

Are there any drawbacks to doing this? The point where it becomes blurry is if a current class has 3 attributes set, like color, background color, and font size, and I already have generic classes for all three of those, would my class definition in the html just look something like class="white bgColorBlue fontSize140". That just seems excessive.

Answer 1

This is absolutely a horrible practice. It’s 10x worse than the current class names that you’re trying to replace. Consider the following class names:

• fontSize140
• bgColorWhite
• marginTop150

These are obviously very descriptive class names. The problem is that they describe the styles behind the class, not the content that it styles. While this can be easier to read in HTML, it will be a complete nightmare in the future when and if you decide to make even the tiniest redesign.

For example, let’s say we just applied these three classes to a block of text. It has a font size of 140%, a white background, and a top margin of 150px. That’s all fine–until we decide that it needs to be 90% font, a blue background, and no top margin. Now, not only do you have to change the CSS declarations, you have to either:

• (1) edit every instance of the class in the HTML to be fontSize90bgColorBlueNoTopMargin or whatever; or
• (2) leave the class name alone and leave an extremely confusing class name in the HTML.

Either way it will be a massive pain for you in the future, whereas the current class names (e.g., specLabel, pressReleaseText) appropriately describe the content that they style; their styles can be easily changed without affecting the content inside of them, and thereby never affecting the name of the class.