Which is the best way to handle RTL CSS

Question

Right now I'm working on a bilingual website and kinda confuse about how to handle the RTL CSS codes. I have 2 things in my mind as follows;

1. Single CSS file - Overriding LTR default codes.

  .content {
     position: relative;
     padding: 5px 10px 5px 240px;
  }

  .rtl .content {
     padding-right: 240px;
     padding-left: 10px;
   }

2. Single CSS file - Without overiding

  .content {
     position: relative;
     padding-top: 5px;
     padding-bottom: 5px;
  }
  .ltr .content {
     padding-left: 240px;
     padding-right: 10px;
  }

  .rtl .content {
     padding-right: 240px;
     padding-left: 10px;
   }

Using the first method, there will a lot of overrides. Also using the second method there will be a lot of codes in the css file. I know both will do the trick but curious to know which is the best method. Kindly suggest me if there is another method too.

Answer 1

If you are looking for a more robust solution, I would suggest you these approaches:

CSS Preprocessor

Learn and use a CSS preprocessor like LESS (if necessary, use a plugin like Bi-App-Less) and conditionally add the correct stylesheet.

Back-end controlled variable

Use CSS mixed with some back-end variable like:

• direction: <%=rtl%>;
• padding-<%=right%>: 10px;
• padding-<%=left%>: 240px;.

RTL Tool

Use a RTLer tool.