CSS Coding Style - Floating and text alignment

Question

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:

<img class="screenshot" style="float:left;">...
<img class="screenshot" style="float:right;">...

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 & HTML.

Answer 1

Using class names like "floatLeft" are no better than using inline styles. By doing this, you're tying the markup to the way it looks rather than what it is. You're creating a maintenance nightmare for yourself by doing this. What happens when all of the images with the floatLeft class needs to float right or have a red border rather than floating at all?

Why is it floated left? Is it a diagram? Is it a reaction image? Is it a portrait of the person the surrounding text is talking about? Name your classes after the element's purpose, not what it looks like.

Using advanced selectors (descendant, direct descendant, etc.) have become the boogeymen of the CSS world for no good reason. It is extremely likely that taking advantage of them would be more appropriate than slapping a class on every single image in the document

.mayoral_candidate img {
    float: left;
}

.mayoral_candidate img:nth-of-type(even) {
    float: right;
}

Answer 2

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.