Working With BEM

By default, sQuery uses the Synergy naming convention. In BEM, what Synergy refers to as a Module is known as a "Block", and what's referred to as a Component in Synergy is referred to as an "Element" in BEM.

To use sQuery on projects that use BEM, call the sQuery.init() method and set the preset to BEM:

sQuery.init({ preset: 'BEM' });

This sets the following options which can still be overridden in the above sQuery.init call:

componentGlue: '__',
modifierGlue: '--',
multipleClasses: true,
elementProto: false,
nodeListProto: false

Setting the BEM preset will also rename the methods returned from calling sQuery as a function, meaning what was previously:

sQuery(selector).getComponents('foo');
sQuery(selector).getModules('bar');

...would now be:

sQuery(selector).getElements('foo');
sQuery(selector).getBlocks('bar');

When accessing the method names directly from the sQuery object, the method names will remain unchanged:

// WON'T WORK!
sQuery.getElements(...args);
// WILL WORK!
sQuery.getComponents(...args);

No Default Element/NodeList Prototype Modifications

Normally, with Synergy as the preset instead of BEM, sQuery methods are attached to the Element and NodeList prototype, allowing users to do things like:

document.querySelectorAll('.foo').getComponents('bar');

This is generally quite safe because WEB APIs do not use Component as a key word. When using BEM, there is a clash of names because Element exists in both BEM and WEB APIs. Whilst there wouldn't strictly be any name clashes given the name of existing WEB APIs and existing sQuery APIs, the prospect of future (and even current) clashes is too great to warrant setting this feature when using the BEM preset.

If you still want to use this feature, you can do it like so:

sQuery.init({ 
    preset: 'BEM',
    // THIS IS NOT RECOMMENDED! READ ABOVE!
    elementProto: true,
    nodeListProto: true
});