CSS Coding Style - Floating and text alignment I'm not sure what is the best way to handle css when I have two uses of a class where the difference is one floats left and the other right.
An example:

img.screenshot{
width:100px;
height:110px;
padding:5px;
}


Do I do this:

img.screenshot.floatLeft{
float:left
}
img.screenshot.floatRight{
float:right;
}


Or this:

.floatLeft{float:left;}
.floatRight{float:right;}


Or:

&lt;img class="screenshot" style="float:left;"&gt;...
&lt;img class="screenshot" style="float:right;"&gt;...


Or something else?

The one that makes the most sense to me is the .float... class because it can be used my many elements, but it seems a bit pointless having a class that just wraps a single tag like that.
I have the same question regarding text alignment as well.

I don't have much experience with CSS &amp; HTML.
CSS, like HTML itself, is essentially an interpreted computer program. That means, among other things, that while img.screenshot.floatLeft is more specific (it targets fewer elements), it's also more costly to evaluate. You can think of this in plain English: is it faster to say "if this is floatLeft" or "is this an img and is this screenshot and is this floatLeft"?

Clearly, the former is shorter, and if you have many images in a document, you might get a fairly modest boost in loading time. You also want to minimize the total number of rules you use to achieve the desired effects.

Inlining styles is generally considered a bad idea, because it associates content with layout, which was the original problem CSS was trying to solve. Before CSS, designers had to use many semantically meaningless elements for the sake of presentation, and inline styles are basically no different.

Given the previous paragraph, this also means that you should avoid wrapping elements for the sake of presentation. It's almost never necessary to have more than a few levels of nesting in a modern browser with reasonable CSS support. If you must do so, consider including aria attributes to improve accessibility.

Pretty much the only time you should inline is by script, where the values are not known ahead of time and must be calculated. I find myself using this most frequently to position dynamic elements. Even then, most of the styles (position, display, color, etc) still go in a CSS file, and I only specify left, right, top, or bottom attributes dynamically.

So, in summary, avoid elements without semantic meaning, make selectors as simple as possible, and inline styles only when necessary.