Управление специфичностью с помощью БЭМ на многоязычных веб-сайтах

Для языков стилей кажется обычной практикой использовать [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, он будет иметь размер шрифта 12 пикселей. Если у него также есть модификатор --small, у него будет размер шрифта 10.

Однако, если lang страницы равно ar, размер шрифта будет 14 пикселей независимо от модификатора. Это связано со спецификой 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)


css internationalization css-selectors bem
person cwj    schedule 27.01.2019    source источник
comment
По крайней мере, с препроцессором CSS было бы проще поддерживать   -  person SuperDJ    schedule 27.01.2019
comment
@SuperDJ Вы правы, и я обычно использую препроцессор CSS. Из-за этого пришлось прибегнуть к созданию миксина all-languages в одном проекте :(   -  person cwj    schedule 27.01.2019
comment
У меня нет нужного вам решения, но с помощью этого альтернативного синтаксиса БЭМ проблема обходится, потому что модификаторы обладают более высокой специфичностью.   -  person Paleo    schedule 28.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Здесь нет идеального решения :( Так что ваше решение не так уж и плохо.

Другим может быть префикс всех модификаторов с селектором атрибута, чтобы уравнять веса селектора. Например:

.block__element {
  font-size: 12px;
}

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

[lang] .block__element--small {
  font-size: 10px;
}
person tzi    schedule 01.02.2019
comment
Это был маршрут, по которому мы пошли для проекта. Это сработало, за исключением того, что мы иногда сталкиваемся с проблемами специфичности, когда забываем добавить это. :( - person cwj; 02.02.2019