Я планирую использовать соглашение об именовании BEM в моем следующем проекте, но я немного беспокоюсь о производительности из-за длинных имен классов.
Взять, к примеру (источник здесь ):
<figure class="photo">
<img class="photo__img photo__img--framed" src="me.jpg">
<figcaption class="photo__caption photo__caption--large">Look at me!</figcaption>
</figure>
В сложном проекте с десятками файлов sass разница может быть не пренебрежимо мала.
Я работаю с Symfony 4, и мне интересно, есть ли элегантный способ заменить все классы css как в выходных данных css, так и в шаблонах веточек легкими именами, такими как a, b, c, ..., aa, ab и т. Д.
Вывод JavaScript также может быть рассмотрен, поскольку он может динамически добавлять классы css к определенным элементам.
Что касается части css, я думаю, что плагина Webpack, выполняющего глобальные замены в конечном выводе, может быть достаточно.
Что касается JavaScript, я думаю, что это почти невозможно сделать правильно, потому что имена классов могут генерироваться динамически (var className = "--is-" + this.state;) или, что еще хуже, возвращаться с сервера или любым другим причудливым способом, который вы можете себе представить.
Поэтому я подумал о добавлении префикса к классам, которые не должны заменяться. Как начать их с _.
Но html-часть (или, я бы сказал, часть twig) сложнее решить, поскольку ее нельзя игнорировать, как в части Javascript, и нет преобразования между кодом, написанным в разработке, и кодом, используемым в производстве .
Я полагаю, что twig компилирует все в php при построении кеша, так что, возможно, есть что-то, что можно сделать с помощью перехватчиков компиляции, или что-то еще в этой области.
Знаете ли вы какие-либо инструменты, которые делают подобные вещи?
Как крупные сайты справляются с этим?
Например, если я открываю инспектора в службе Google, я вижу такие вещи:
<button class="GBTG6V-f-a GBTG6V-f-l GBTG6V-f-p GBTG6V-f-g" [...]>
Мне не очень дружелюбно.
Спасибо за ваши идеи.