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 blockbem// => querySelector('.block') // ...or directlybem// => querySelector('.block') // gets a block with modifierbem// => querySelector('.block--modifier') // gets an element with modifier from a block with modifierbem// => querySelector('.block--modifier .block__element--modifier') // gets a collection of elementsbem// => querySelectorAll('.block') // if you are more lazy... // you can also chain several queriesbem
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