badge-size

DOM queries using BEM for lazy people.

bem-query is the lazy version of querySelector and querySelectorAll for people using BEM and tired of typing sometimes-quite-long-selectors.

Examples

// gets a block
bem.select('block').el()
// => querySelector('.block')

// ...or directly
bem.query('block')
// => querySelector('.block')

// gets a block with modifier
bem.query('block modifier')
// => querySelector('.block--modifier')

// gets an element with modifier from a block with modifier
bem.query('block modifier', 'element modifier')
// => querySelector('.block--modifier .block__element--modifier')

// gets a collection of elements
bem.queryAll('block')
// => querySelectorAll('.block')

// if you are more lazy...
bem('block modifier', 'element modifier')

// you can also chain several queries
bem.select('block').select('sub-block').el()

API

It's defined as an universal module so you can use it with commonjs, amd, or directly using bem global variable.

bem.select(block, [element])

Both block and element match the following pattern: name[ modifier]:

• name: name of the block or element.
• modifier (optional): name of the modifier.

Chainable Aliases: s

bem.scope(ancestor)

Basically same as selector but accepts a CSS selector instead.

Chainable Aliases: sc

bem.el()

Gets the final DOM element that is matched.

Aliases: e

bem.query(block, [element])

Shortcut for ben.select().el()

Aliases: bem, q

bem.queryAll(block, [element])

It does the same as bem.query but returns a collection of elements.

Aliases: qa

License

MIT © Nicolas Gryman