bem-core

bem-core copied to clipboard

Timur Useinudzha asked why do we need i-bem class if we can get all DOM nodes with JS by data-bem attr.

Just as a fast proof of concept I made such diff and blocks from bem-components worked fine:

diff --git a/common.blocks/i-bem/__dom/i-bem__dom.js b/common.blocks/i-bem/__dom
index 02a049f..46d48fb 100644
--- a/common.blocks/i-bem/__dom/i-bem__dom.js
+++ b/common.blocks/i-bem/__dom/i-bem__dom.js
@@ -953,7 +953,7 @@ var DOM = BEM.decl('i-bem__dom',/** @lends BEMDOM.prototype
         } else if(!ctx) ctx = DOM.scope;

         var uniqInitId = identify();
-        findDomElem(ctx, BEM_SELECTOR).each(function() {
+        findDomElem(ctx, '[' + BEM_PARAMS_ATTR + ']').each(function() {
             initBlocks($(this), uniqInitId);
         });

diff --git a/common.blocks/i-bem/i-bem.bemhtml b/common.blocks/i-bem/i-bem.bemht
index 19474e6..023bc06 100644
--- a/common.blocks/i-bem/i-bem.bemhtml
+++ b/common.blocks/i-bem/i-bem.bemhtml
@@ -420,7 +420,7 @@ def()(function() {
                 }

                 cls && (this._str += isBEM? ' ' + cls : cls);
-                this._str += addJSInitClass? ' i-bem"' : '"';
+                this._str += '"';
             }

             if(isBEM && jsParams) {

Are there any reasons to keep it?

@tadatuta What about ie6? ;-D

@zxqfox what is it? ;)

@tadatuta Can you do perfomance test on a big dom tree with i-bem class and appropriate data attribute?

@dfilatov found such test. according to it classes are still much faster then data-attrs.

@tadatuta Huh. LONG LIVE IE6!

but here's alternative tests saying there's almost no difference o_0

but here's alternative tests saying there's almost no difference o_0

@tadatuta this article speaks about CSS rules performance, not about query selection performance, doesn't it?

@narqo you are right. but very naive testing in Fx or blink with

var date = new Date();
console.log($('[data-bem]').length, date - new Date());

date = new Date();
console.log($('.i-bem').length, date - new Date());

results literary in 0 to 1ms for SERP, Images, Video and few other pages.

Will try to create bigger pages and find IE somewhere to test. Reopening.

@tadatuta plz, don't forget destruction part of i-bem__dom: https://github.com/bem/bem-core/blob/636443a5c69677dd573ab18e9390a2ae29a96164/common.blocks/i-bem/__dom/i-bem__dom.js#L980 as well as force block initialisation, for example after Block#findBlock*() call https://github.com/bem/bem-core/blob/636443a5c69677dd573ab18e9390a2ae29a96164/common.blocks/i-bem/__dom/i-bem__dom.js#L123

/cc @dfilatov

@tadatuta as discussed on meeting we need good tests for measure perf of both variants in all supported browsers (including IE8)