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?

Bipack

Hey Denis. While this question is interesting, I don't think it's very 'answerable'. Is there a specific problem you're trying to solve? Maybe you could add some more detail to the question. As it stands now, this question is more a survey and doesn't appear to belong on SO. – Kepi

Answer 1

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; }

Normalcy

Answer 2

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.

Chapiter

Answer 3

Restore the flow after a floating element:

.clearfix:after 
{
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
}

Walden

:after and :before existed before CSS3, and they work well in modern browsers. For the older ones this code (.clear{float: none;clear:both;}) should be the solution. – Bipack

Answer 4

Everyone has their own preferences and it also depends on the nature of your application. That said, I do personally tend to reuse a base.css that I port from application to application as a starter style component. Within it I also implement Eric Meyers css reset statements which make development across browsers much easier.

If you are genuinely interested in finding out how professional css frameworks are formed then its probably worth your while downloading and reviewing the following:

960 grid css framework

Blueprint css framework

Alburnum

Answer 5

I like to stay away from what you describe as common class names, keeping as much style-related information away from the HTML as possible. As mentioned by hunter, this does mean selector lists can sometimes get long, but I don't find it a problem.

If I were to use a common class name for clearing floats (the only one of the examples given that I usually might), I'd more often than not use something like .group - the word group at least has some small amount of semanticity attached to it (a group of things that likely belong together). This was suggested by Dan Cederholm.

There are sometimes other considerations that may mean it's either okay or not okay to use class names like this. For example, if your layout changes depending on viewport size via media queries, you may not want something to be styled the same at all times meaning the class name looses its usefulness as you have to be specific with your selectors anyway. Another example would be if the HTML is content-managed by a non-techie client who may not keep your classes intact.

Stpierre