StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Re the specific selector you specified: <code>._50x4</code> in the question.</p> <p>This selector does look odd, but in fact it's not invalid or mangled.</p> <p>It is invalid for a class (or ID) selector to begin with a number, so <code>.55x4</code> would be invalid. But an underscore is a valid first character for a class.</p> <p>Therefore, the selector <code>._55x4</code> is really just a way of having a class named <code>55x4</code>, but with an underscore at the start of it to make it valid.</p> <p>Why would you want a class named <code>55x4</code>? Well, you'd have to ask the developers of the site where you found it if you want the real answer, but you mentioned Facebook and Google, so we can speculate a bit.</p> <p>Both Facebook and Google are <em>extremely</em> high traffic sites. Therefore, as far as they're concerned, reducing the size of their HTML/CSS/JS code even by a single character makes a big difference to their bandwidth costs.</p> <p>You or I may have named the class with a more readable name, but when you're trying to save every single possible byte of bandwidth, sensible names go out of the window. So much the same as they've minified their Javascript code to the point of making it unreadable, they will also have optimised their HTML and CSS code to make it as small as possible. Crazy class names like this are the result.</p> <p>That's not to say this class name is completely crazy -- you've quoted it completely out of context, so there's every chance that the numbers 55 and 4 may apply to something on the page. I don't know, and without any context, no does anyone else.</p> <p>But I can say this much: This is one case where copying Facebook and Google is not necessarily the best idea. You don't have the same traffic levels as they do, and shaving a every last byte off your code shouldn't have the same kind of priority for you as it does for them. Sure you can optimise stuff, but there's no need to write class names that look like that.</p> <p>The other thing to say is that for SEO purposes, sensible class names are very helpful. Facebook and (especially) Google can get away with ignoring their SEO rankings, but the rest of us can't.</p> <p>So regardless of your methodology, class names should be semantic -- ie they should make sense, and help the reader understand what the elements are for.</p> <p>You're doing the right thing by looking at well known sites to see what they do, but my advice is to try looking at other sites that are closer to your own. Facebook and Google will always be a bit "different" when it comes to how they do things; they're not always the best examples.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload