Насколько рабочим будет мультифильтр по атрибуту элемента?

Question

[ТемноКот]

Доброго времени суток, уважаемые!
Нашёл замечательный код фильтра для галереи masonry, который фильтрует итемы по классу элемента.
Скрипт, имхо, гениален в своей простоте и не требует дополнительных библиотек (кроме jQuery и masonry, понятно).
Всё хорошо, замечательно, но... фильтр привязывается к class="" элемента, то есть в случае совпадения с значения в таблице css вёрстка поползёт.
Поэтому я решил вынести фильтр из class="" элемента в атрибут data-filter="".
В итоге получился такой вот код:
HTML

<li data-filter="one">category-one</li> 
    <li data-filter="one">category-one</li>
    <li data-filter="two">category-two</li>
</ul>
<div id="masonry-grid">
      <div class="grid-item e h_1" data-filter="one"></div>
    <div class="grid-item b h_2" data-filter="two"></div>
    <div class="grid-item e h_2" data-filter="one"></div>
    <div class="grid-item b h_1" data-filter="two three"></div>
</div>

JS:

$("#grid-filter li").click(function() {
    var group = $(this).data('filter'); // получаем значение фильтра
    var selector =  '.grid-item[data-filter~="' + group + '"]';  // подставляем в атрибут data-filter элемента с классом .grid-item

 else if(group != "") {
	$(".grid-item").hide();
        $(selector).show();   // отдаём условием в masonry
	$('#masonry-grid').masonry('layout');
});

Код целиком в Codepen https://codepen.io/akira13w/pen/abVVPRw
Сам по себе код рабочий, при первом приближении, НО! так как я не настоящий сварщик, а всего лишь чайник второго класса, возникает вопрос: насколько всё это кроссбраузерно, надёжно, кошерно и православно?
Особенно смущает селектор ~= в строке var selector = '.grid-item[data-filter~="' + group + '"]'; будет ли он работать везде и не поломается ли? Если верить табличке https://kimblim.dk/css-tests/selectors/ вроде как не должен, но шут его знает. Вдруг не стоило своими кривыми ручонками в рабочий скрипт лезть? Раз работает по классу элемента, значит, надо так.

Огромная просьба знающих людей оценить профессиональным взглядом.
Заранее благодарю.

Answer 1

[Rst0]

поддержка `data-` ie 11+. остальные ок.
<li data-filter="">
уместно поменять на
<li data-target="">
тогда

$("#grid-filter li").click(function() {
    var group = $(this).data('target');
	var group_class = "." + group; // БЫЛО по классу  (переменную назовите group_attr чтоб не вспоминать через год)
    var selector =  '[data-filter~="' + group + '"]'; // по атрибуту - (меньше селектор = меньше проверок)

`data-` медленнее, чем `class` при большом количестве элементов списка

Comments

[SashaGray]

А кто-нибудь осуществлял замеры, чтобы понимать, что значит много?
10, 100, 1 000, 100 000?

[Rst0]

SashaGray,
замеры чего, к примеру?
.