Управление спецификой с BEM на многоязычных сайтах - PullRequest
Новая
       12

Управление спецификой с BEM на многоязычных сайтах

0 голосов
/ 27 января 2019

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

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

0 голосов
/ 02 февраля 2019

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

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

.block__element {
  font-size: 12px;
}

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

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