支持ltr和rtl時命名左和右特定類

我一直在從事需要從左到右以及從右到左支持的多語言站點。這是通過在base.css中放置常用樣式，然後根據訪問者的語言加載base-left.css或base-right.css來完成的。在項目過程中，我一再面臨一個命名問題：什麼叫類只在他們放置元素的方向上有所不同？支持ltr和rtl時命名左和右特定類

這裏是一個例子：我在網站上有很多按鈕都有常用樣式，所以我將該樣式放在.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文件。

來源

2012-07-09 Henrik Andersson

設置一個特定的類，指示正文的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-09 18:01:47

謝謝你的回答，這是一個很好的解決方案。但是，問題在於我限制了基於用戶語言的DOM更改，允許的唯一更改是包含哪個css文件（請參閱更新問題）。因此，在我知道用戶的語言之前，我需要將這些類分配給元素。 – 2012-07-11 15:02:55

然後您必須製作2個完整的獨立樣式表。一個用於ltr，另一個用於rtl，並根據語言加載正確的一個。 – 2012-07-11 15:16:16

支持ltr和rtl時命名左和右特定類

回答

相關問題