css - 具有 ltr 和 rtl 支持时命名左右特定类

Question

我一直在开发一个需要从左到右和从右到左支持的多语言网站。这是通过在 base.css 中放置通用样式，然后根据访问者的语言加载 base-left.css 或 base-right.css 来完成的。在元素过程中，我反复面临一个命名问题:如何称呼仅在放置元素的方向不同的类？

举个例子: 我在网站上有很多具有共同样式的按钮，因此我将这些样式放在 .button 类中。这包括字体大小、颜色等。大多数按钮默认情况下不应 float ，但有些按钮应该 float 到左侧并有一个 margin-right。所以我称它们为 .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 和边距，然后需要为所有其他按钮覆盖它们。到目前为止，一切都很好。然而，这是我的问题，像 button-left 这样的类在我的 base-left.css 文件中运行良好，其中 .button-left 是一个放置在元素左侧的按钮。但是在我的 base-right.css 文件中放置了一个名为 .button-left 的类，它将按钮定位在右侧，这确实令人困惑。所以我的问题是，是否有更好的方法来命名此类类？

更新:部分问题是我无法根据用户的语言更改将哪些类分配给哪些元素。因此，当我知道该语言时，我无法将类(class)从 .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 或层次结构中非常高的任何东西。