Часто можно слышать, что в БЭМ длинные имена классов и это ОЧЕНЬ плохо. Решил проверить, что будет, если все имена классов сделать одно-/двухбуквенными.
Сделал минимизированную версию упрощённой мобильной выдачи поиска Яндекса, над которой работаю сейчас.
Итоговый код можно посмотреть на Я.Диске:
- search.orig.html — исходный HTML
- search.mini.html — все классы заменены на одно/двухбуквенные классы
- search.hack.html — все классы заменены на атрибуты: было
<div class="l x">, стало<div l x>; в css соответственно.lи.xзаменены на[l]и[x]
Без гзипа всё красиво:
30125 search.orig.html
26105 search.mini.html
24731 search.hack.html
gzip (стандартные настройки), бессердечная сука, разницу сильно нивелирует:
8530 search.orig.html.gzip.gz
8258 search.mini.html.gzip.gz
8244 search.hack.html.gzip.gz
Разница между оригиналом и валидным минимизированным вариантом — 3.2%. Между оригиналом и невалидным «хакерским» вариантом — 3.3%.
zopfli (стандартные настройки) нивелирует ещё сильнее:
8136 search.orig.html.zopfli.gz
7909 search.mini.html.zopfli.gz
7921 search.hack.html.zopfli.gz
Разница между оригиналом и валидным минимизированным вариантом — 2.7%. Между оригиналом и невалидным «хакерским» вариантом — 2.65%. Валидный вариант жмётся лучше «хакерского».
Итог: учитывая, что по сети информация передаётся пакетами (стандартный размер пакета TCP — 1500 байт), все эти файлы укладываются в 6 пакетов и в такой минимизации нет никакого смысла. Разве что хочется максимально запутать код.
УРА! Красота же
Кроме этого же еще есть беда, что на осмысленные статические имена классов легко завязываются всякие adblock'и. С генерируемыми именами классов ты им сильно усложняешь работу.
@alt-j чтобы обмануть adblock, можно автогенерить классы только в районе рекламы, а не на всей странице
@tadatuta тогда можно будет завязываться на родительские блоки рекламы
Длинные имена это плохо не потому, что они больше байт требуют, а потому, что их часто невозможно читать без горизонтальной прокрутки тем, кто пишет html ручками.
@sefus ну так-то да. байт-код тоже читать сложновато ;)
@sefus Согласен, проблема БЕМ названий классов, не в том что они занимают много байт. Проблемно просто читать готовый html на выходе. Просто дико монструозные названия получаются, причем довольно часто :)
Ну хз как вы пишите у меня отлично все читается. Уж точно более читаемое чем в бутстрапе http://factory.mn например.
Первый же рандомный тык на странице :) http://take.ms/u5Q1t Вот вам пачка колов, хотя тут может и не БЕМ совсем виноват. И ниже, пять слов к которым добавить модификатор и получится ад. ИМХО это много и плохо читабельно на этапе отладки страницы.
@fdkitamory Как раз на этапе отладки отлично все читается. Если вы уже усвоили структуру и принципы которые заложены в методологии БЭМ
@uradvd85 я говорю вот про такие ситуации http://take.ms/P5qjF я вам о теплом, вы мне о синем. То что прочитать можно и понять быстро структуру это я согласен, БЕМ тут очень хорош, но блин классы в 2-3-5 строк визуально читаются довольно плохо. Т.е. как написать мудрую мысль, но красным текстом на черном фоне, вроде бы и все понятно и просветился, но глаза болят читать.
@fdkitamory ну это же сетка она такая у всех, тут не заслуга БЭМ. Все остальное очень лаконично.
@fdkitamory звучит как: Все хорошо, но мне что-то где-то жмёт. Давайте поговорим об этом.
А стоило бы говорить о влажном.
@fdkitamory Есть протез https://github.com/escaton/bem-chrome-devtools
И еще куча идей для других протезов. Протезирование вообще очень развито.
Так минимизация классов минимизирует еще и CSS. Плюс подобные техники позволяют дальнейшую минимизацию - например, выделить display:block в отдельный однобуквенный класс, значительно сократив размер CSS. Или просто сортируя CSS-рулы по аттрибутам для лучшего сжатия. Есть куда двигаться.
@scf37 вроде как наличие gzip сводит на «нет» избыточность длины класса без вреда для читаемости. А для сортировки CSS-свойств вполне подойдёт postcss-sort.
@Realetive Ну вот, к примеру, для https://glasscannon.ru. HTML взят исходный, CSS склеен из всех CSS-зависимостей страницы. gzip исходного HTML, CSS: 13607, 34993 gzip исходного HTML, CSS с вырезанными неиспользуемыми на этой странице рулами и после cleancss: 13607, 6403
gzip конкатенации исходного HTML и CSS с вырезанными неиспользуемыми на этой странице рулами и после cleancss: 19268 gzip конкатенации переименованного HTML и переименованного CSS: 17711
Итого 8.8% разницы.
@scf37 8.08 %. И тут ещё с настройками gzip можно поиграться, как я понимаю.