0

我一直在开发一个需要从左到右以及从右到左支持的多语言网站。这是通过在 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 上放置浮动和边距，然后需要覆盖所有其他按钮。到现在为止还挺好。但是，这是我的问题，诸如 button-left 之类的类在我的 base-left.css 文件中运行良好，其中 .button-left 是放置在元素左侧的按钮。但是放在我的 base-right.css 文件中的是一个名为 .button-left 的类，它将按钮定位在右侧，这确实令人困惑。所以我的问题是，有没有更好的方法来命名这些类？

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

4

1 回答 1

0

设置一个特定的类，指示主体的 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 或层次结构中非常高的任何东西。

于 2012-07-09T18:01:47.237 回答