如何为应用中的特定语言（英法）单独添加差异化CSS样式？

你当前通过自定义.english/.french类区分多语言样式的方案确实不够语义化，推荐利用HTML标准的lang属性实现，这是更规范且易维护的做法：

方案1：直接使用lang属性选择器 #

先在HTML根标签上设置语言属性：

<!-- 英语页面 -->
<html lang="en">
<!-- 法语页面 -->
<html lang="fr">

然后在CSS中通过属性选择器针对不同语言编写样式：

/* 英语专属样式 */
html[lang="en"] .navbarIcon {
  margin-left: 60%;
}
html[lang="en"] .localiza {
  margin-left: 10%;
}

/* 法语专属样式 */
html[lang="fr"] .navbarIcon {
  /* 替换为法语下的实际样式值 */
  margin-left: 55%;
}
html[lang="fr"] .localiza {
  /* 替换为法语下的实际样式值 */
  margin-left: 8%;
}

方案2：结合CSS变量提升可维护性 #

如果需要修改的样式较多，用CSS变量可以进一步简化维护：

/* 定义不同语言的变量 */
html[lang="en"] {
  --navbar-icon-margin: 60%;
  --localiza-margin: 10%;
}

html[lang="fr"] {
  --navbar-icon-margin: 55%;
  --localiza-margin: 8%;
}

/* 通用样式引用变量 */
.navbarIcon {
  margin-left: var(--navbar-icon-margin);
}
.localiza {
  margin-left: var(--localiza-margin);
}

优势说明 #

• 语义化：lang是HTML标准属性，专门用于标识文档语言，比自定义类更符合Web规范。
• 易维护：切换语言只需修改html标签的lang属性，无需额外管理自定义类。
• 扩展性：新增其他语言时，只需添加对应lang的变量或样式规则即可。

另外注意你提供的示例代码中，英语和法语的样式完全一致，这应该是笔误，实际使用时需根据两种语言的布局需求设置不同的样式值。

内容的提问来源于stack exchange，提问作者Keshan Kulasekara