CSS - common classes

Question

In my web app I use several CSS classes to write less code. I use them quite often in the markup to add single property or two in some cases.

These are the following

.clear { float: none; clear: both; }
.fl_l{ float: left; }
.fl_r{ float: right; }
.ta_l{ text-align: left; }
.ta_r{ text-align: right; }
.no_td:hover { text-decoration: none; }

What similar classes do you use? Have you ever seen this technique in other projects?

Answer 1

Sorry to post an answer on such an old question, but I think this is a bad idea. Maybe for a specific set of problems, it fits the bill. My thinking is that CSS is where the style information should be. By doing what you suggest, you are essentially just using the style attribute in html and therefore mixing content w/ style information. This is a bad idea because if one day you decide to change the style completely, you will have to go in and also update the HTML by removing most of the classes.

For example, if you have HTML like this (say for an abstract that is used many times within the page):

<p class="abstract ta_l mb10">
    Lorem ipsum dolor set.
</p>

And one day you decide to change how that abstract looks: for example, you don't want it to be "text-aligned:left" anymore and no margin bottom (that's presumably what mb10 would be... i've seen this being used before), you would have to go in and change the HTML.

Now multiply this by 10 elements you have to change. What if it was 50? What if you were doing a complete redesign? shudder.

CSS provides a way to select multiple elements with one simple query and give them an appropriate style that is easily changed from a centralized location. By using these "helper" classes, you are making the maintenance of this project a nightmare for the next developer.

Instead, if you have HTML like this:

<p class="abstract">
    You should sign in or something!
</p>

and CSS like this:

.abstract {
   margin-bottom: 10px;
   text-align: left;
}

you could just change that one rule to this:

.abstract {
  text-align: right;
  margin-bottom: 0;
}

and be done w/ it! For all 50 elements!

just my 2 cents -- from someone who just got burned by this.

Answer 2

yeah, if you don't use common classes like you do then your CSS files get extremely large and every class becomes extremely specific

some other common classes...

.split { float: left; width: 50%; }
.center { text-align: center: margin: auto; display: block; }
.bold { font-weight: bold; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }