Is it good to use classes like .left {float:left} and .right {float:right}

Question

• Which method is more manageable specially in team development?
• Which will be more optimized in longer?
• What are pros and cons of both?

Stylesheet

#firstblock { background: #000; float: left; }
.genblock { background: #006699; float: left; }

HTML

<div id="firstblock"></div>
<div class="genblock"></div>
How you should do it

Or

Stylesheet

.left { float: left; }

#firstblock { background: #000; }
.genblock { background: #006699; }

HTML

<div id="firstblock" class="left"></div>
<div class="genblock left"></div>

Answer 1

You should not leak presentational information (CSS) to your data layer (HTML).

You should give your elements a class name that describes their purpose. Whether it floats or not is irrelevant in the HTML. You decide that in the CSS.

What if you had a class name such as blue and then your clients say we now want all those things red?

Example

HTML

<ul id="primary-menu">
....
</ul>

CSS

#primary-menu {
   float: left;
   color: #f00;
}