float: left; or .float-left

[brown2005]

currently i have in my css code, for each div, float: left or float: right, etc... would it be better to take this out, and in the html just use a class of either

 

.float-left or .float-right

 

?

[haku]

I have done this:

 

.float_left
{
  float:left;
}

.float_right
{
  float:right;
}

 

And apply the class name to whichever elements need it. If that's what you were asking.

[brown2005]

yes thats exactly what i mean mate. i was just wondering if that was a good way of doing it, or would it be better including it in each item css.

 

[haku]

You should almost never use inline CSS (CSS in the tabs). It's not great practice most of the time. Doing it the way I showed is definitely a better way.

[brown2005]

so instead of say

 

#thisitem { float: left: padding: 10px: etc... }

 

have

 

#thisitem { padding: 10px; etc... }

.float-left { float: left; }

 

and have

 

<div id='thisitem' class='float-left'>this is some text</div>

[haku]

Ahh, I see what you are asking. I thought you were asking about the difference between:

 

<div style="float:left;">

 

and

 

<div class="float_left;">

 

As for your question, well it really depends on the site, and how you are doing it. But I almost always find myself using the first method you mentioned, rather than explicitly declaring a class for floats. Usually a particular class will need a float, or a specific element with an ID, so I find that way easier to deal with.

 

But neither way is right or wrong.

[brown2005]

ok. thanks for your help.

[jcombs_31]

There is no need to use the class unless it is something you find that is needed on a regular basis.  I always markup my main containers, there is no need to add a class declaration in the html.

[bronzemonkey]

In addition, it's encouraged and sensible not to use "presentational" class or id values. Imagine having:

 

<h2 class="float-left"></h2>
<div class="wide no-margin">
   <p class="highlight-yellow">Lorem ipsum dolor</p>
</div>

 

What happens if the paragraph needs to be restyled to be red? Or if the div no longer needs to be "wide" and needs to have margins. Or if we don't want the heading to be floated left?

 

You might be able to restyle them without affecting other elements in different parts of the site that use the same class names...but usually it is much more difficult to do so because of the concept of using presentational class names. This links the css with the html much more closely, making it harder to use css changes alone to affect the appearance of the document. Instead there is often a need to go into the html to change class names. You can't have the css declarations for "no-margins" to contain margins, or for "wide" to end up being narrower than the default appearance, etc.

 

But if you name based on semantics derived from the document (i.e. not with a though about how to visually present it) then you avoid both these problems. If my target has a class of "entry" or "section" then I can style it any way I want without ever having to go into the html or have confusing class names.