How to layout markup and Css

[scouse]

Hi,

I've been having a discussion with work collegues about the best way to do something and we've come to a disagreement... so I thought I would see what you think.

Basically one side is saying that when creating their CSS its good to have lots of classes that can be used multiple times. E.g:

flLeft{
   float: left;
}

flRight{
   float: right;
}

topMargin10{
   margin-top: 10px;
}

etc. Then it could be used like this:

<p class="flRight">Some text goes here</p>

OR

<p class="mainText flRight">Some text goes here</p>

The other side of people say that that is just adding unnecessary mark-up which would have to be changed if the site ever got re-designed and it would be much better to have it all in the element class itself. E.g.

p.mainText{
   color: #000;
   font-size: 1em;
   float: right
}

I hope that makes sense. So what do you think, which way do you think is the best way to do it?

Thanks

Phil

[Charles]

The best way is to use the mark up to describe the content and meaning of the page and then apply the CSS. You're goal is a page that can have any number of layouts applied to it by switching out the stylesheet.

[scouse]

So are you saying the second waqy of doing it would be the better of the two?

[kristingish]

definitely the second.
you want to be able to change more by doing less.
the first technique requires you to change your actual html in more places than is necessary.

[scouse]

kristingish,

That's my thoughts to be honest, but I just wanted to see if anyone believes the first way is the better way and if so what their reasoning is.

[svidgen]

It's pretty ridiculous to conclude one or the other in this case. The "better" styling depends on the particular document (or "family" of documents). It's like debating whether a flashlight or an ice-cold beer is better. It depends on what the hell you're trying to do! Do you want to light a room or have a damn drink?!

If you're document(s) is/are complex enough to warrant this debate, my guess is that you'll have some elements that are best identified as mainText, and others that are better identified as emphasized leftish highHanging mainText, and still others are fine just being leftish or bakedOutOfTheirMinds.

Know what I mean?