代码之家 › 专栏 › 技术社区 › cwj

基于边界元的多语种网站专一性管理

bem internationalization css-selectors css

1

cwj · 技术社区 · 7 年前

对于样式语言,使用 [lang=en] (或) :lang(en) )中。

然而,这一惯例尤其会引起边界元修饰符的问题。考虑一下这个css:

.block__element {
  font-size: 12px;
}

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

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

在这种情况下,如果我们 block__element 具有 lang 那不是 ar ,字体大小为12px。如果它也有修饰符 --small ,它的字体大小为10。

但是,如果页面 朗 是 应收账 ,字体大小为14px 不考虑修饰语 是的。这是由于css的特殊性。

为了解决这个问题,开发者可以添加一个新规则 block__element--small 阿拉伯语至10px:

.block__element {
  font-size: 12px;
}

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

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

// ^ Basically the same as this but more specific
[lang=ar] .block__element--small {
  font-size: 10px;
}

这远非理想。

有没有更聪明的方法来管理这种情况,以避免对每一种情况都覆盖样式?(尤其是对于rtl+ltr项目,这是非常常见的)

1 回复 | 直到 7 年前

1

0

tzi 7 年前

这里没有理想的解决方案:(所以你的解决方案没那么糟糕。)

另一种方法是在所有修改器前面加上属性选择器,以使选择器权重相等。例如:

.block__element {
  font-size: 12px;
}

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

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