CSS debug nightmare

Not really, sort of. If premature optimization is the root of all evil, oversemplification is the  coder way to hell. Let me share an almost perfect example of the latter, found in a well known premium ( = paid) theme out there:

.ar{ text-align: right; }
.fr{ float: right; }

It may sound beautiful: “a CSS class I’d actually use when I write code in the editor!”.

Yes, maybe. Let’s say you’re going to build a multilanguage website: you’re probably add language_attributes() to the <html> tag and you’ll be fine – unless you’re going to add support for a language with Right-to-Left direction, like Arabic or Hebrew.

Your stylesheets will need proper RTL support,  and a language-dependent CSS class in the <html> or <body> tag will help a lot. You may find yourself coding a quick snippet like this one:

 function aa_1609_body_class($classes) {
   if( defined('LANGUAGE_CODE') ):
      $classes[] = LANGUAGE_CODE;
   return $classes;
 add_filter( 'body_class','aa_1609_body_class');

Now, what can be wrong? It’s a clean snippet with a proper filter on body_class and nothing more, except the wrong CSS class. What kind of LANGUAGE_CODE will have – for example – Arabic? AR.  French? FR.  And how this will render in the snippet above?

 <body class="ar">
 <body class="fr">

Two lessons here:

  • if you really need to name your CSS classes after a two-character shortcode, at least namespace it.
  • if you need to add semantic CSS classes to some tag, check your theme’s CSS files before (well, check ’em before anyway) and namespace your CSS classes as well:
      $classes[] = 'lang-'.LANGUAGE_CODE;

2 thoughts on “CSS debug nightmare

  1. I’d say quit trying to save time not typing more descriptive classes. The time you save doing that will be the time someone else (or you, once you’ve forgotten what you did) spends trying to figure out your naming conventions. Especially with a theme you’re distributing, which you *know* other people are going to tinker with. I talked to somebody the other day who’d worked for a company which had developed a whole system of CSS naming around class names like “.ml5” to stand for “margin-left: 5px;” and insisted everybody else use that system on every project their company did. Aaaaaaaaaggh!!!

  2. Wow, an infinite CSS framework. I wonder how they hide something on the left, it should be like “.ml999999999”. Mmmmm, awesome!

    Being a little more serious, the one thing astonished me is that those classes weren’t namespaced, while the markup was plenty of CSS classes to do so. Language code assonance was really bad luck on my side anyway, as I should have namespaced them as well on my own. The very same CSS selectors were used almost everywhere in the markup, though. That was crazy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s