CODEWITHSUNDEEP
cssarchitecture
Petrogad
Petrogad

Reputation: 4423

css best practice questions

I have been debating using css with div's and laying out elements, and really am looking to see if the practice i've been using would be considered the best practice, or if there is something different that i'm over looking that would be better.

Lets say we were placing two images on the same line, on on the left one on the right then an text in the ad below it. I might do something like:

#container{
 width:800px;
 height:300px;
}
.fleft{
  float:left;
}
#left_img_container{
  float:left;
  width:150px;
}
#right_img_container{
  float:right;
  width:150px;
  text-align:right;
}
#textArea{
  margin-top:5px;
  width:100%;
}

<div id='container'>
   <div class='fleft'>
       <div id='left_img_container'>FOO IMAGE 1</div>
       <div id='right_img_container'>FOO IMAGE 2</div>
   </div>
   <div class='fleft' id='textArea'>this is my text</div>
</div>

Simple example but illistrates the float kind of layout style. Is this the better practice? or would using clear be better?

Thanks in advance

Upvotes: 0

Views: 935

Answers (3)

Maxim Dsouza
Maxim Dsouza

Reputation: 24

It all depends on the implementation... But I do agree with Alex... You need to follow a more appropriate naming standard.... which would serve you better for the future...

Upvotes: 0

alex
alex

Reputation: 490263

fleft as a class name is not good practice.

What if your client/boss says, "alright, we want that div on the right?"

You have 2 options... change the fleft class to be float: right, or make a new class and change it in the HTML. CSS classes should be titled by their meaning or description without using descriptive words which include position/colour/size etc.

The only exception I've found to the rule are images in an article. Since they generally float to the left and right, I do use class names image-left and image-right.

Examples

(from a bad name to a better name)

top => header

left-side-bar => menu

bottom-menu => footer

Of course, these are only examples. It's also good practice, because when HTML5 comes along, you'll actually define <header>, <footer>, etc

Upvotes: 8

pegasus4747
pegasus4747

Reputation: 291

You can probably clean up your HTML code a bit, and use less classes in your CSS, like so:

<div id="container">
   <img id="foo1" src="foo1" />
   <img id="foo2" src="foo2" />
   <p>This is my text</p>
</div>

#container {
   width:800px;
   height:300px;
}

#foo1 {
   float:left;
}

#foo2 {
   float:right;
}

#container p {
   margin-top:5px;
   clear:both;
}

Upvotes: 4

Related Questions