CSS selector name mangling?

Question

I have been looking into CSS coding methodologies like SMACSS and OOCSS. After doing some homework and inspecting the styles of larger sites (e.g. Google, Facebook) I have noticed very mangled selector names, such as ._50x4 with no stylistic or content semantics.

I am wondering if these larger sites are using some type of name mangling for their css selector naming?

Answer 1

Re the specific selector you specified: ._50x4 in the question.

This selector does look odd, but in fact it's not invalid or mangled.

It is invalid for a class (or ID) selector to begin with a number, so .55x4 would be invalid. But an underscore is a valid first character for a class.

Therefore, the selector ._55x4 is really just a way of having a class named 55x4, but with an underscore at the start of it to make it valid.

Why would you want a class named 55x4? 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.

Both Facebook and Google are extremely 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.

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.

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.

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.

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.

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.

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.