在多语言网站中使用BEM管理特异性

Question

对于样式语言，使用[lang=en]（或:lang(en)）似乎是一种惯例。

但是，此约定尤其可能导致BEM修饰符出现问题。考虑以下CSS：

.block__element {
  font-size: 12px;
}

[lang=ar] .block__element {
  font-size: 14px;
}

.block__element--small {
  font-size: 10px;
}

在这种情况下，如果我们有block__element而非lang的{​​{1}}，则其字体大小为12px。如果它还具有修饰符ar，则其字体大小为10。

但是，如果页面的--small为lang，则字体大小将为14px ，而与修饰符无关。这是由于CSS的特殊性。

因此，为了解决这个问题，开发人员可以添加一条新规则，只需将阿拉伯语的ar还原为10px：

block__element--small

这远非理想。

是否有一种更聪明的方法来处理这种情况，以避免在每种情况下都覆盖样式？ （特别是对于RTL + LTR项目，可能非常普遍）

Answer 1

这里没有理想的解决方案：（所以您的解决方案还不错。

另一种方法是在所有修饰符的前面加上属性选择器，以均衡选择器的权重。例如：

.block__element {
  font-size: 12px;
}

[lang=ar] .block__element {
  font-size: 14px;
}

[lang] .block__element--small {
  font-size: 10px;
}