3
\$\begingroup\$

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.

\$\endgroup\$
2
\$\begingroup\$

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;
}
\$\endgroup\$
  • \$\begingroup\$ Thanks for your answer. So don't inline and don't use literally descriptive class names - understood. The page I was referring to has about 10 divs, each div has an image, a title and a description. They alternatively float left and right for purely aesthetic reasons. Looks like that nth-of-type should be perfect for what I need. \$\endgroup\$ – Christian Fox May 3 '15 at 9:11
2
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ Yes, one should write the shortest selector necessary to match the element, but not for the reasons you're pointing to. Shorter selectors create smaller files and have less specificity. Obsessing over the speed difference between img.foo and .foo is premature optimization and highly unnecessary (we're talking the difference between 20ms and 50ms). \$\endgroup\$ – cimmanon May 2 '15 at 12:20
  • \$\begingroup\$ Speed is the usual argument for minimum specificity, not bandwidth, unless you're speaking purely from a mobile data plan perspective. Reduced file size is less important because of caching, though lesser specificity is not just faster; it also reduces power consumption and bandwidth usage. Regardless, those are all benefits, but users tend to be most focused on immediate perception of loading time than data they have to pay for later or a faster battery drain. \$\endgroup\$ – phyrfox May 2 '15 at 12:36
  • \$\begingroup\$ Again, the difference between img.foo and .foo is negligible when it comes to performance (see: benchmark results). Avoiding out of control specificity issues is the only thing you should be concerned about. \$\endgroup\$ – cimmanon May 2 '15 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.