您可能已經聽說過CSS邏輯屬性或RTL改編，但仍在決定是否廣泛部署它們。為了幫助您提高對其可能性的認識，Nicolas Hoffmann分享了他和他的團隊在Proton如何從CSS邏輯道具到制作進行大規模轉移的經驗，以及您如何在自己的項目中從不同的角度考慮它們。
就用戶界面而言，本地化是最有趣的領域之一:文本長度可能因語言而異，文本的默認對齊方式可能不同，閱讀方向可以是鏡像的或垂直的，以及許多其他不同的情況。簡而言之，這是一個令人難以置信的多樣性來源，這使得我們的界面和前端工作方式更強大、更可靠、更具挑戰性。
對從右到左界面的需求
大多數語言，如法語或英語，都是從左向右閱讀的(LTR)。但是，在這些情況下，有些語言(如波斯語、阿拉伯語和希伯來語)具有不同的閱讀方向—從右向左(RTL)。
問題是怎么我們能讓我們的界面適應這種巨大的變化嗎？
CSS邏輯屬性之前
在CSS邏輯屬性之前，我們可以用不同的方法進行RTL改編:
- 只為RTL附加費/布局添加專用CSS文件；
- 僅追加同一CSS中需要修改的部分，例如[dir="rtl"]。浮動-左{浮動:右；}。
即使這些方法在起作用——我使用了第二種方法來創建支持人權網站的阿拉伯文版幾年前——兩者都相當次優:
- 您需要為第一個文件維護另一個文件；
- 第二個文件的CSS文件有點重，可能需要處理一些問題(特殊性、添加更多屬性等等)。
當然，我們可以用Sass創建巨大的機器來生成幾個構建，并使用UnCSS之類的工具來刪除不需要的內容，但是說實話:這很無聊，而且會導致“不自然”的代碼片段，就像前面的例子一樣。
為什么CSS邏輯屬性非常適合/有前途
這就是CSS邏輯屬性模塊進入游戲。這個CSS模塊的主要思想是擁有一個邏輯抽象這使我們能夠根據文本方向和書寫模式(如書寫模式,方向，以及文本方向，或者目錄HTML中的屬性)。這給了我們像水平從右到左或從左到右，垂直RTL，等等的可能性。
實踐中的實施
它是如何工作的
有幾個概念需要理解，雷切爾·安德魯斯已經解釋過了理解邏輯屬性和值":
- 我們不再考慮左邊的/正確但是開始/結束(同樣的道理也適用于頂端/底部):
- 我們不再說寬度或者高度但是相反在一條直線上的和街區—相當經典。(你可能聽說過違約在一條直線上的或者街區元素。
