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

It's great until you re-design, and narrow is highlighted yellow center converts better left-justified, and the image you called floatleft now belongs on the right I'll admit to the sin of using floatleft and clear as CSS class names, but it is much easier to maintain your CSS if you choose names that relate to the semantic meaning of the content, like feedback and heroimage.

It's great until you re-design, and narrow is highlighted yellow, center converts better left-justified, and the image you called floatleft now belongs on the right. I'll admit to the sin of using floatleft and clear as CSS class names, but it is much easier to maintain your CSS if you choose names that relate to the semantic meaning of the content, like feedback and heroimage.

I know right, and yet nearly every website does it. – Andrew Jun 3 at 9:15 1 Looking at your clarification, I can see you're concerned with the tendency of CSS to become repetitive. I haven't used it myself yet, but URL1 may offer a way to square this circle.

– Terence Johnson Jun 6 at 0:23 The severity of this this problem is typically overstated. Sometimes you have to maintain the names of your classes as well as their properties, that's all. The bigger issue is subjective names like 'narrow': who is to say what's narrow?

But I really don't think names with specific meanings (like floatleft and clear) are bad at all (see my answer below). – David Rhoden Jun 6 at 3:07 3 That's what I'm saying about maintenance.It's nice to think you could have a design change that caused no change to the HTML, but have you ever seen that happen? The tradeoff is between taking time to future-proof your code by enforcing semantics, or leaving big, easy-to-read signs for future developers who may have to read your code.

To me, code that has to be floated left for no purpose other than design should be classed as "floatleft'. – David Rhoden Jun 6 at 21:27 3 @David I don't think 'floatleft' is really a class. You might as well do inline styling.

– Gary Buyn 1 may2 at 21:57.

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: 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.

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 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 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.

It depends, sometimes it makes sense just to add a class to let an element float. The problem with the semantic approach is that you will end up ball of mud of css classes. Sure, names like redLink or blackHeader have to be banned but sometimes you will need little helpers like "clear" or "floatLeft".

Read this article of Nicole Sullivan who explain this in deep.

I don't think adding a descriptive class name to your document is really a big issue. I find it's easier to work with explicit class names like "floatleft" as opposed to things that are purely semantic or reliant on the cascade. It's usually easier for later developers who don't have the document structure in their heads as well.

You don't want to use them for everything--you wouldn't want to add a class of floatleft to every li in a left-floated menu, but these kind of styles are very good when you need to do a specific thing to one or more elements, and you want to make other developers aware that you did it. It's like putting in or even : maybe not the prettiest but it sure is obvious what you are doing. My rule of thumb is: whatever makes you have to think less, do that.

EDIT: As I said in my comment above, this is most true for classes that refer to clearing and floats, i.e. , things that are purely presentational, non-semantic, and yet must be referred to in the HTML. I think in this case it is actually preferable to indicate that you are using a purely presentational class, like floatleft, rather than forcing the float to be attached to some semantic element.

Style classes should be semantic. This is a great article on semantic web page design (well, I found it really helpful anyway). EDIT: I just read another article that makes some good points for using things like display: inline-block, display: table etc.Instead of floats.

That should help avoid those pesky floatleft and clearfix classes. Making them semantic is always up to you though.

1 +1 for "semantic", although your first sentence does sound a little weird :P – BoltClock Jun 3 at 4:01.

Then my flat answer would be that in real world, semantic and presentation isn't everything. So my answer would be: it ...depends" rel="nofollow">depends....depends if bandwidth is important to you... On a site with many visitors per hour, then the classnames could even simply be something like "c11" (yes, I've seen it) instead of meaningful, but looong class ...depends" rel="nofollow">names....depends also if you perfectly know that when the look and feel will change, then the CODE will change also.(exemple: you redesign a site today in XHTML, but you perfectly know that when you'll re-do the CSS in 2 years, then you'll want the markup to be HTML5, so you will pretty much change the structure anyways...) ...depends also if you're already 3 days late on a delivery. When you're 3 days late, believe me, classnames like "nopadding" starts to appear, as you don't have anymore time to think straight about semantic (neither does your client).

Depends on so many things, I'd say... That's my "real life" point of view of your question.

1 I've seen quite a few sites that use pretty unreadable code for the sake of bandwidth. I'm pretty sure Google does this. – Andrew Jun 9 at 0:33.

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 lorem 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 lorem 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 : Whats the best way to name id & classes in CSS and HTML ronniesan.com/blog/entry.php?title=organ... cssglobe.com/post/3745/my-top-10-most-us....

1 Using multiple presentational classes?! – BoltClock Jun 3 at 4:30 yup like . Fl for float:left; , .

Rl for float:right; . So, you can use them as multiply classes like – sandeep Jun 3 at 4:34 The problem is that by adding fl to your div you are controlling the presentation in the HTML. – Andrew Jun 3 at 7:53 @andrew; that's I said use class with meaning full name like .

Animate-panel not like center, fl, small, floatleft etc. Because they indicating only one features of that class or read my example for more – sandeep Jun 3 at 8:42.

I think, at the end of the day it is about what works for you. If your class name is descriptive of what it does, that does not really go against the rule of separating markup from styles. Another factor to consider is, are you the sole developer, or part of a team.

If you are part of a team, or you know your code will be worked on later by other devs, you should establish, and document the naming conventions used. I am currently contracting with Down Jones on some very large projects, and we have a rather lengthy document on naming conventions for our classes, including when to use camel-case, or dashes or underscores, as well as specific prefixes on the class name based on the project we work on. It sounds crazy, but when you have a dozen or so front-end devs working on stuff at the same time, it is a life saver!

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.

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: 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.

1 I think finding a structural relationship between commonly styled elements is the key. The question is if we should make exceptions for some things like clear. – Andrew Jun 7 at 2:56 That's the point I was trying to make.No, don't make exceptions.

It's bad enough we have to use float and clear for layout (Hopefully, this won't be the case in the future). You shouldn't make things worse by adding presentational markup. – melhosseiny Jun 8 at 16:53.

I think this is where old meets new in web technologies. From times past, it has been difficult to unobtrusively render an outstanding web experience. These class names mostly came in handy when websites were changing webmasters to aid them in understanding the code.It served its cause well but with the new technologies of this day and age, I think this is slowly dying out - infact, it should be dead.

The question we should ask is, "Do we need to create a new class for every new innovative design that could pass as a template? ". I do not think so.

The markup on a site should do what it is meant for - markup. The class names used in the markup should be descriptive of the content and not its looks. The stylesheets - on the other hand - should be able to select elements on a document based on the information in the markup, and style them.

I want to relate this to the Rails association naming convention. Consider this... class Post :personifyable has_many :taggables has_many :tags, :through => taggables belongs_to :destroyers end Obviously, this is not a real model; it is something I am using to drive a point. Consider the case of a deeply nested dependency.

These names will grow ridiculous - if they aren't already (i.e. In CSS, or something of the like) Now consider the case where you have different principles. Different developers and designers may - if not 'most definitely will' - have different reasons for using a specific naming convention.

How would this affect refactoring time. I will leave that to your imagination. Also, if your business partner notices a new trend with sites themes that attracts traffic - more technically, assume this business partner has performed some experimental A/B testing and come up with some specs - you don't want to change the contents of the whole stack (ie HTML and CSS and possibly JS pages) to implement this new style.

In conclusion, keep styling hints out of your markup. Unobtrusively interact with the document to style and manipulate it. Sass gives you a fine way of styling a site while having your CSS mock your markup.

JQuery is another awesome UJS library. HTML5 gives you methods too that make the markup more flexible and yields more information to CSS and JS.

The main problem with having classes named floatleft, clear or the like is the fact that changes in the design imply changes in the HTML markup. This should not happen, true separation between content and presentation is achieved only when you can re-use the same markup in multiple designs or even media (think sharing the same HTML between desktop and mobile versions of your site and only switching sylesheets). Now, for a practical example :).

To add on Fredrik's answer, LESSCSS allow you to hide styles declarations/mixins from developers. This way you can protect reusable components in your stylesheets without the danger of having them pop up in your HTML. Sample markup: Company Name Sample less code: // example of reusable functions .noText() { color: transparent; text-indent: -9999px; } .

Clear-after() { &:after { content: ". "; display: block; visibility: hidden; height: 0; clear: both; } } . Branding { .

Clear-after(); .noText(); background-image: ...; } Of course, for mobile you might just want to have the company name in bold, without any other styling: . Branding { color: pink; font-weight: bold; }.

The first paragraph describes the reason why those types of names arent a good idea. – Ernesto Jun 6 at 16:32 I like this answer because while it's ideal to completely separate content from presentation, it's not truly practical without preprocessors like LESS. – Box9 Jun 8 at 13:43.

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. Instead of . 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.

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... Some info about foo ... Info about unrelated topic bar ...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.

Not sure I follow what you're saying. If I put id on these elements instead of class, I still end up with overly verbose CSS unless I use a non-semantic class on each. I used class because foo might be a common topic in my site and could be used more than once.

– Andrew Jun 6 at 11:29 What I'm saying is that the class keyword shouldn't be used to define a common topic at all within your content, as the keyword is only used to point to stylesheet data. The class keyword does not define content. Ideally, HTML would specify another attribute, like type, section, or info or something, to actually define your content, but it doesn't.

I would do what you would do - use IDs and classes together - because it makes sense, and leverages the strengths of CSS. I'd also err on the side of logical naming. Still, classes don't natively define data, so I wouldn't worry.

– lunchmeat317 Jun 6 at 15:14 "... the class keyword in HTML isn't currently used for anything other than CSS stylesheets. " - document. GetElementsByClassName(), jQuery selectors, among other use in JavaScript, plus microformats.

– Alohci Jun 9 at 20:40 @Alohci I generally don't count attribute selectors as a real usage case, as it can logically be done with any attribute within a tag - meaning it isn't unique to the class keyword. I'll take a look at those microformats, though. – lunchmeat317 Jun 11 at 16:38.

Class names and ids that describe the function is better than using names that describe the styling of the element. I usually end up not doing it religiously though, because it is in my opinion more convenient to i.e. Clear floating elements by using the famous clearfix hack rather than adding clear:both all over the stylesheets.

But I think that LESS and SASS creates interesting opportunities to get the best out of both worlds, because you can have mixins and functions that describes some style and still have semantic correct names by just including whatever 'style' you want. Instead of having this HTML and CSS ... . Roundedcorners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } you could use SASS to create this mixin: =rounded-corners -moz-border-radius: 5px -webkit-border-radius: 5px border-radius: 5px and include it into your .

Navigation class like this: . Navigation +rounded-corners-5px which would reduce your HTML to this: ... and therefore still get the advantage of having semantic correct names while having a convenient way to share styles between different elements.

I do the same in LESS, it keeps the code pretty nice. – Alex Ciminian Jun 6 at 7:37 Thanks for the link and examples. This certainly helps keep the CSS smaller.

– Andrew Jun 6 at 11:38.

I think it depends on how you are using the styles. Content should be named accordingly, as the style may change but the content will likely remain the same. For instance, if you have a div that contains stock info, you should name the div something like div class="stockInfo", so that no matter what the presentation, you can change the styles and the name will not contradict those styles (as opposed to naming the div div class="yellow" and then changing the background-color to red).

However you will have "helper styles" and these should be named for what they do. For instance, you will likely want to use a to clear some floats. In this case, it is perfectly reasonable to name it and to give it a style of br {clear:both;}.

Again, most Web sites float their images right or left. To assist with this, you can set and and then have the styles to match, img. Right {float:right;} etc.So it depends on the usage.

If the question is only one of naming, then for one specific class... class="floatleft" or class="myClass" or class="gibberish" ....changes absolutely nothing. They are only different class names. The programming functions the same.

Either your content & presentation is separated, or it isn't... totally regardless of how you created the names.

The problem is when classes like floatleft get used again and again for semantically separate elements. I've added some info to the question. – Andrew Jun 3 at 8:57 @Andrew: I understand.

Whatever method you choose, things can get sloppy or confusing. But I'm looking at the issue of "neatness" as something separate from your original question. I'm saying "naming" is arbitrary and makes no difference to the issue of separating content from presentation.

From the machine's point of view, chosen names are meaningless. Naming only matters to humans reading and/or editing the code. Naming doesn't matter if the content & presentation is truly separate.

– Sparky672 Jun 3 at 15:04 "Naming only matters to humans reading and/or editing the code. " But, practically, that matters A LOT. – Ates Goral Jun 9 at 17:00 @Ates Goral: Yes, it matters A LOT... only to programmers.

But us programmers are not the purpose for the programming; we program for the end user. It does not matter at all to the machine or end-user as long as it functions properly, efficiently, and bug-free. – Sparky672 Jun 9 at 17:14.

I personally name them things close to what they will be doing. Say I have a class that is on an image gallery and its a primary most used class it will be something like "gallery" or if I'm setting borders around things that are meant to be more decorative I'll name it "decoborder". I try to keep them semi short and somewhat related what task they provide.

I don't like to do things like "small, large, H1underlined" or anything that can mimick another tag or function because that can just get confusing. Beyond that I think you should really name it in whatever way makes the most sense to you.

You are saying something like this: . Red { color:red; } so in order to use this class: hello ALTERNATIVE SOLUTION ul li { color:red; } Usage: By this you can actually remove the presentation information from the content.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.