0

左から右と右から左のサポートが必要な多言語サイトに取り組んでいます。これは、base.css に共通のスタイルを配置し、訪問者の言語に基づいて base-left.css または base-right.css をロードすることによって行われます。プロジェクトの間、私はネーミングの問題に繰り返し直面しました: 要素を配置する方向だけが異なるクラスを何と呼ぶべきか?

例を次に示します。サイトには、共通のスタイルを持つボタンがたくさんあるので、そのスタイルを .button クラスに配置します。これには font-size、color などが含まれます。ほとんどのボタンはデフォルトでフロートされるべきではありませんが、いくつかは左にフロートされ、margin-right を持つべきです。そこで、それらを .button-left と呼び、そのようなボタンすべてに .button と .button-left の 2 つのクラスを割り当てます。右側に配置されたボタンについても繰り返します。このような：

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

そうすれば、すべての要素に異なるクラス名が必要になるわけではありません。メイン要素のクラス名は2つだけです。クラスをラッピングdivまたは階層の非常に高いものに与えることもできます。

于 2012-07-09T18:01:47.237 に答える