Is there a drawback in defining multiple small DRY classes, instead of bigger more repetitive classes? [duplicate]

Question

I read some articles and it seems that using multiple classes in CSS is encouraged. I am curious to find out if there is a maximum number of classes an element can have before this multiple class solution loses its benefits. (It may become a speed matter of some sort)

For example I have a project which uses 4 types of fonts, 4 types of font sizes, 4 type of font colours and so on. Is it better to divide these styles in very small classes and assign them to different classes or just try to handle the code on bigger chunks, in which case the style file will be obviously bigger and not DRY.

I believe that besides a little more work and the code becoming a little more difficult to follow there should not be any other major drawbacks. Am I right?

Answer 1

There are huge drawbacks to this approach.

Let's say that all over your website you have a consistent way of displaying a user. In every case, the user's full name is blue. You have given each box's fullname area a class of "bluetext".

Now say that the business comes along and decides that all names should be red. Are you going to make "bluetext" actually write in red? Are you sure it hasn't been used elsewhere, where blue is still required? Are you going to change the class in your HTML throughout the site? What if you miss one? Doesn't it feel wrong to edit HTML for a change in style anyway?

Your life is going to be much easier if you have a div of class "userpanel" class with a child span of class "fullname" (as has been said, describe the content, not the style).

Also, what if you want to write some Javascript to select all items of a given type and attach on event to onClick? This is going to read very badly if your only method of selection is "div.centered bluetext a.underlined".

CSS, as it is, is not well-designed to be DRY. If you want to stop repeating your code everywhere, look into abstraction layers on top of CSS, such as SASS or LessCSS, instead of butchering the idea behind a stylesheet.

Answer 2

It is encouraged but you should not go overboard, use them sparringly. Also, David Dorward's comment is right on the point I think. Use them to describe the element, not the formatting they contain.

The problem is that it can quickly become confusing as to why one of your element is displayed one way and not the other. I always used multiple classes very carefully, the most commonly used one I even remember:

.mandatory { color: darkred; font-weight: bold }

I think this one makes sense, because you are effectively describing a "mandatory" behavior for an element, which could be a text, an input field, etc. and as such you want to avoid having a .mandatoryText, a .mandatoryInput, etc.

What I mean is: if you want to use multiple classes, choose them carefully, choose the ones that make sense.

Also, this is an entirely different topic, but I'm not sure that having four different font styles for a website would be in the best practices in that field (I'm not a "pure" web designer per se, so I may be wrong, see http://www.internetmarketingsecrets.com/web-fonts-guide/, paragraph "Readability Do’s and Don’ts")

Finally, if you are afraid about repeating yourself, don't worry you have "replace all" in your favorite text editor in case you need to replace that color you are using 56 times :-)

Edit: I too wish you cold make CSS classes inherit from other CSS classes :-)

Answer 3

It may make sense to break the CSS into function specific sections; font, font size, color, etc. Then assign the values to the appropriate containers. You can specify multiple selectors for the same CSS definition. It would be possible to have 4 font definitions preceded by the appropriate selector list. This moves you towards DRY. Don't go overboard on function specific breakdowns, and combine them if it is appropriate.

Use function based names for classes rather than descriptive names. Sidebar and content are better names than small and normal.

It is also common to clear or reset some values that different browsers default differently. Consider carefully whether to override things like link behavior in text blocks.

Setting four as an upper limit then number of variations of any factor is a good starting point. Font size might the exception. Because you can have four colors or fonts shouldn't mean you must have four. If one or two or three is the appropriate variety use it. Two fonts is often enough.