title: Naming left and right specific classes when having ltr and rtl support
body: <p>I've been working on a multilingual site that needs left-to-right as well as right-to-left support. This is done by placing common styling in base.css and then load either base-left.css or base-right.css based on the language of the visitor. During the project, I was repeatedly faced with a naming problem: what to call classes that differ only in what direction they place elements?</p>
  
  <p>Here is an example:
  I have a lot of buttons on the site that have common styling, so I place that styling in a .button class. This contains font-size, color etc. Most buttons should not be floated by default, but some should be floated to the left and have a margin-right. So I call them .button-left and assign all such buttons the two classes of .button and .button-left. And repeat for buttons placed to the right. Like this:</p>
  
  <pre><code>&lt;div class="button button-left"&gt;Click me&lt;/div&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>.button {color:blue;font-family:Arial;border:1px solid gray;}
  .button-left {float:left;margin-right:10px;}
  .button-right {float:right;margin-left:10px;}
  </code></pre>
  
  <p>This way, I don't need to place float and margin on .button which then needs to be overwritten for all other buttons. So far so good. However, and this is my problem, classes such as button-left works well in my base-left.css file, where a .button-left is a button that is placed to the left in an element. But placed in my base-right.css file is a class called .button-left that positions the button to the right, which is really confusing. So my question is, is there a better way of naming classes like these?</p>
  
  <p><strong>Update:</strong> a part of the problem is that I can not change which classes are assigned to what elements based on the language of the user. So I can not change a class from .button-left to .button-right when I know the language. All that should happen when user language is detected is that the corresponding css-file should load.</p>