Replacing CSS classes with more generic ones

Question

I am currently working on refactoring a lot of CSS, and the general trend that I see is that several classes are created for a particular element on the page. Instead of trying to describe what they do, classes are called things like "PressReleaseText" or "SpecLabel", etc. Most of them simply define a single element, such as font size or color.

I am wondering if it would be better to just create several utility classes, for example .fontSize140 {font-size: 140%;} , .bgColorWhite{ background-color: white;} , and use them instead of all the duplication occurring in the current set of classes.

Are there any flaws in this? The point at which it becomes blurry is if the current class has three attributes, for example color, background color and font size, and I already have common classes for all three of them, whether the class definition in html will look like class="white bgColorBlue fontSize140" . It just seems excessive.

Answer 1

This is an absolutely terrible practice. This is 10 times worse than the current class names you are 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 creates. Although it may be easier to read in HTML, it will be a complete nightmare in the future when and if you decide to make even the smallest 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 edge of 150 pixels. This is all fine - until we decide that it should be a 90% font, a blue background and no top edge. Now you need to not only change the CSS declarations, you must either:

• (1) edit each instance of the class in HTML as fontSize90bgColorBlueNoTopMargin or whatever; or
• (2) leave the class name alone and leave the very complex class name in HTML.

In any case, this will be a huge pain for you in the future, while current class names (for example, specLabel , pressReleaseText ) properly describe the content they create; their styles can be easily changed without affecting the contents within them and thereby never affecting the class name.

Answer 2

Part of the CSS point is to separate the content from the presentation in order to make it easy to change the presentation without changing the content. If you have class="white bgColorBlue fontSize140" everywhere, you defeated this target; you could just go with style="color: white; background-color: blue; font-size: 140%" . Your classes should say that you do not mean what you want it to look like.

If you find yourself repeating certain settings for many classes, such as the following

 .PreReleaseText { font-size: 140% } .SpecLabel { font-size: 140%; background-color: white } .SomeOtherThing { font-size: 140% } 

Instead, you can combine several of them into one rule.

 .PreReleaseText, .SpecLabel, .SomeOtherThing { font-size: 140% } .SpecLabel { background-color: white } 

If you really have several classes that are synonymous with each other, you might think about why this is so. Why are all these styles the same? Is there some kind of class name you can come up with that covers all of these uses? Or just by chance that they look the same? If it's just by accident, then they should have separate rules, so you can easily update the styles of each class yourself. If there is any unifying theme, perhaps you should combine them into one class.

Do not forget to think about what will happen on different media or in the redesign. Imagine that the company is being bought back and you want to change the color scheme in accordance with the new corporate colors, without making a complete reorganization. If you have a .bgColorWhite class, but only some things marked with this class should change to a new color in the redesign, you will have to go through all your templates and markup again to separate the classes, but if you have designated them with more meaningful classes, you can just adjust the colors in the respective classes.

These are some general guidelines; You should always use what is best for you. If you had a more specific example, I could suggest a better way to refactor your classes for your specific need.

Answer 3

It is impossible to do the right and wrong way to do this, as far as I know. It depends on how often you reuse things and which makes it easier to understand CSS. I often saw common things like .fontSize140, cause problems later when you need to make changes. In most cases, I prefer to group classes, but keep individual names.

So i could

 .Thing1, .Thing2, .Thing3 { font-size:14px; } .Thing1 { font-weight:bold; } .Thing2 { font-size:italic; } 

Instead

 .font14 { font-size:14px; } 

And then .Thing1 and .Thing2 clusters are still needed.

This I can always change CSS later without worrying about what a generic .fontSize140 is, for example.

Answer 4

I would stay away from a too generic type .fontSomeSize . However, I usually try to use classes that define things as logical "types" or "objects", such as .ruled-list or .summary .

Answer 5

Why don't you try something like this:

Use a css preprocessor like sass.

 /* define app/website colors */ $main-color: #223c61; $secondary-color: #2954a2; $accent-color: #4cceac; /* some example css classes */ .text-main { color: $main-color; } .bg-secondary { background-color: $secondary-color; } .bg-accent { background-color: $accent-color; } /* define app/website spacings */ $spacing-xs: 10px; $spacing-sm: 15px; $spacing-md: 25px; $spacing-lg: 35px; /* some example css classes */ .padding-up-xs { padding-top: $spacing-xs; } .padding-down-lg { padding-bottom: $spacing-lg; } .margin-left-md { margin-left: $spacing-md; } 

The above code has common css classes, but it is not bound to a specific value. For some very specific styles, you can always create your own css file for the account for this.

I see a lot of people using custom fields and paddings in all of their CSS. See code below.

 .blog-post-sidebar-right { margin-top: 14px; } .news-post-bottom-text { margin-bottom: 23px; } 

As a rule, I always use 4/5 of the predefined fields and paddings. And not some arbitrary number that you make on the fly.

So why not define generic css classes for their use. I took the same idea and applied it to all my css. Now I can have the same code base in every project.

Since you are now using the css preprocessor, it is easy to maintain, flexible and easy to extend.

I am not saying that this is the best option, but it does the job for me.