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

Question

• Which method is more manageable specifically for team development?
• which will be more optimized in more?
• What are the 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 stream presentation information (CSS) to your data layer (HTML).

You must give your elements a class name that describes their purpose. Regardless of whether it floats or not, it does not matter in HTML. You solve it in CSS.

What if you have a class name like blue , and then your customers say that now we want all these things to be red?

Example

HTML

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

CSS

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

Answer 2

I think the first approach is better. The problem with using classes like left is that one fine day left suddenly needs to float to the right. Now you must also change all classes.

I would change the first set of styles a bit:

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

Answer 3

Ideally, leave any suggestion about formatting from HTML (better at first). firstblock can rename sidebar and genblock rename content , for example.

Answer 4

It all depends on how your team builds and supports HTML and CSS.

Using literal names to define styles (.left = float: left) means that it’s easier for developers not to touch CSS to create HTML. It is more humanly readable. The disadvantage is that you can have many additional classes that you would otherwise not need to use more semantic class names depending on the type of content.

I would say that smaller teams should stick to semantic class names for more compact markup and a better separation of content and style. Larger teams can benefit from a more literal and verbose use of classes to make long-term maintenance and HTML production a little easier to manage.