Tag Archives: WordPress

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;
   endif;
   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;
Advertisements