在拥有ltr和rtl支持时命名左和右特定类

Question

我一直在开发一个多语言网站，需要从左到右以及从右到左的支持。这是通过在base.css中放置常见样式然后根据访问者的语言加载base-left.css或base-right.css来完成的。在项目期间，我一再面临一个命名问题：什么叫做类别不同的​​类只是它们放置元素的方向？

这是一个例子： 我在网站上有很多具有共同样式的按钮，因此我将该样式放在.button类中。这包含字体大小，颜色等。默认情况下，大多数按钮不应浮动，但有些按钮应浮动到左侧并具有边距右侧。所以我称之为.button-left并将所有这些按钮分配给.button和.button-left这两个类。并重复放置在右侧的按钮。像这样：

<div class="button button-left">Click me</div>

css：

.button {color:blue;font-family:Arial;border:1px solid gray;}
.button-left {float:left;margin-right:10px;}
.button-right {float:right;margin-left:10px;}

这样，我不需要在.button上放置float和margin，然后需要为所有其他按钮覆盖.button。到现在为止还挺好。但是，这是我的问题，诸如button-left之类的类在我的base-left.css文件中运行良好，其中.button-left是一个放置在元素左侧的按钮。但放在我的base-right.css文件中的是一个名为.button-left的类，它将按钮置于右侧，这实在令人困惑。所以我的问题是，是否有更好的方法来命名这样的类？

更新：问题的一部分是我无法根据用户的语言更改哪些类分配给哪些元素。因此，当我知道语言时，我无法将.button-left的类更改为.button-right。检测到用户语言时应该发生的一切是相应的css文件应该加载。

Answer 1

设置一个特定的类，指示正文的ltr或rtl。然后，您可以使用子类，而不会出现命名约定的问题。

CSS

.button {color:blue;font-family:Arial;border:1px solid gray;}
.ltr .button-left {...}
.ltr .button-right {...}
.rtl .button-left {...}
.rtl .button-right {...}

然后你不需要每个元素都有不同的类名。主要元素只有两个类名。您还可以将类提供给包装div或层次结构中非常高的任何内容。