Working With BEM

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, and they both have modifiers. Thus, Polymorph can be used for projects that use BEM.

To use on DOM elements that follow the BEM naming convention, you must set the modifierGlue value to -- and set the componentGlue value to __. This can be done in several ways:

Passing Via Config

polymorph(element, styles, {
   modifierGlue: '--',
   componentGlue: '__',
});

Attaching to window.Synergy

If you don't want to pass the values every time you call polymorph, you can instead attach the modifierGlue and componentGlue value to window.Synergy before attempting to use Polymorph:

window.Synergy = window.Synergy || {};
Synergy.componentGlue = '__';
Synergy.modifierGlue  = '--';

Using sQuery

Learn more about sQuery

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