html - 哪个是处理 RTL CSS 的最佳方式

Question

现在我在一个双语网站上工作，对如何处理 RTL CSS 代码有点困惑。我有以下两件事；

<强>1。单个 CSS 文件 - 覆盖 LTR 默认代码。

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

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

<强>2。单个 CSS 文件 - 不覆盖

  .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;
   }

使用第一种方法，会有很多重写。同样使用第二种方法，css文件中会有很多代码。我知道两者都可以解决问题，但很想知道哪种方法最好。如果还有其他方法，请建议我。

Answer 1

如果您正在寻找更强大的解决方案，我建议您采用以下方法:

CSS 预处理器

学习并使用像 LESS 这样的 CSS 预处理器(如有必要，使用 Bi-App-Less 之类的插件)并有条件地添加正确的样式表。

后端控制变量

将 CSS 与一些后端变量混合使用，例如:

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

RTL 工具

使用 RTLer tool .