Should css class names like 'floatleft' that directly describe the attached style be avoided?

Question

Lots of websites use class names like floatleft, clearfloat, alignright, small, center etc that describe the

Answer 1

I've done both and I have to say nowdays I lean towards using non presentational classnames. I found this nifty framework called OOCSS https://github.com/stubbornella/oocss/wiki which helped me alot when I was creating a new layout for my web application and suited my requirements so well.

It is mostly because the definition of basic classes for spacing, headers and text works so well when you have to deal with alot of content. Because you use the same classes everywhere it helps make the layout better and maintainable.

Offcourse this means a element in your html can look like this: <div class="unit size1of3 lastUnit"> But isnt that what HTML is about? Making sure your information is presented properly.

I disagree on the whole redesign point, be honest, when you have to redesign your website most CSS goes out the door anyways. And, by dividing the CSS into proper classes for spacing/heading/text it becomes less likely to have conflicting css rules that mess stuff up like ul li div{}

Offcourse the classes do not describe the contents, but as CSS does not allow class inheritance and you have to support old technology like IE6...does it really matter? And do classnames like animal and duck really make for better html? Id like to think HTML is for the browser and when the browser renders it, thats for humans.

Answer 2

Andrew; it's good to give sensible name to an class & id which easy to understand for you & your fellow member's which are working on that project. For me classes small , center , floatleft etc define nothing to me because when you give class center that's indicate that the element on the center but there are other properties also in that class like color, background etc

For example

<div class="wrap">
 <div class="center">lorem</div>
</div>

css:
.center{margin:0 auto;}

in this example class center don't clear to me. but we can use them as a helper class.

For example

<div class="wrap">
 <div class="panel center narrow">lorem</div>
</div>

css:
.center{margin:0 auto;}

from above example now it clear to me what the role of class center in that panel div

FOR MORE CHECK THESE LINKS :

What's the best way to name IDs and classes in CSS and HTML?

http://www.ronniesan.com/blog/entry.php?title=organizing-your-dom-elements-with-the-proper-ids

http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names

Answer 3

Presentational class names

The HTML spec is clear on this issue:

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

Does clearleft describe the nature of the content? Not really. Eric Meyer made a joke about this a while ago.

Try to find a structural relation between the seemingly unrelated elements

Let's say you have paragraphs about ducks, paragraphs about monkeys and paragraphs about frogs. You want them have a blue background.

<p class="duck"></p>
<p class="monkey"></p>
<p class="frog"></p>

You could add this CSS rule:

p.duck, p.monkey, p.frog {
    background-color: blue;
}

But aren't they all animals? Just add another animal token:

<p class="animal duck"></p>
<p class="animal monkey"></p>
<p class="animal frog"></p>

And change the CSS rule to:

p.animal {
    background-color: blue;
}

It is hard and it might not always be possible but the important thing is not to give up quickly.

What if you can't?

If you have a lot of elements with absolutely no structural relation between them, that indicates a structural problem with your document. Try to decrease these elements. That said, grouping n CSS selectors on one rule is still better than adding n presentational class tokens in your HTML document.

Answer 4

For what it's worth, if I remember correctly the class keyword in HTML isn't currently used for anything other than CSS stylesheets. Thus, the example that you provided...

<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>

...wouldn't really be a way of identifying data. I would suggest either the name or id attribute if you really want to identify data within your HTML tags. (They both have slightly different uses - name is generally used for server-side queries while id can be styled and is generally more versatile. IDs must be unique, but names don't have to be.) You can check further documentation using the W3C HTML specification.

In short - don't worry about tying content to presentation through your tag classes; until they're specifically used for anything else, they will not have any real effect on your raw content. As such, I'd say name your classes whatever you want, as long as it makes sense. Personally, I would err on the side of logical naming versus style-type naming (e.g. class name "editorcomment" instead of class "graybgfloatleft" or something like that), but in the end, your class names aren't going to tie your data to your presentation like an ID or a name would.

Good luck.

Answer 5

I am a developer before a programmer, so for me I use something like a "floatleft" css class as a sort of UtilityMethod.
Meaning, my css class is "floatleft"...and that's all that class does. so if I say <div class="floatleft"></div> in my mind that is saying "make this div float to the left".
So if that Div also needs a blue background and is my main header it's going to have a different class for that and I end up with <div class="mainheader floatleft"></div>

Doing it this way also avoids issues with refactoring. If I am changing my design later, I will know that "floatleft" ALWAYS floats things left and nothing more.

Answer 6

From what I've seen, developers have the tendency to overload their HTML pages with way too many unnecessary classes and extra markup. These classes not only make the page size bigger (and thus the load time longer), they also crowd up the page and make it difficult to manage and modify at a later time.

Having things like center and float-left might be helpful when you're dealing with display text that was input by a user (such as a post on a forum), but for general markup purposes you're better off just adding text-align: center and float: left to the appropriate classes. This especially helps if you are trying to change the appearance of your site without changing the HTML much. The less you have hardcoded into your template, the easier it is to only have to change around the CSS when modifying your template. That bit alone is worth it to me.

As a general rule of thumb, you really should only give elements classes when it describes what the content is, not where or how it is being displayed. i.e. <span class="movie-information"> instead of <span class="bold">.

The only time I feel that it makes sense to give an element a class when it isn't necessary is if you are concerned with Search Engine Optimization. You should definitely read up on Microformats if you are interested in seeing how adding the right classes can actually help search engines. That being said, adding classes that describe how the page is visually displayed does nothing for the search engines.

The only time I would ever "group" classes is if they are either displaying the same thing, or if they are siblings. It gets really messy in your CSS when you have elements from all over your page defined together. You're much better off grouping your classes in your stylesheet in ways that you will be able to find them later, rather than saving a few lines by combining them.