JSPM

bem-query

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q25108F
  • License MIT

DOM queries using BEM for lazy people.

Package Exports

  • bem-query

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bem-query) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

badge-size npm travis

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.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')

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

API

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

bem.query(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.

Aliases: bem, bem.q

bem.queryAll(block, [element])

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

bem.scope(ancestor)

Defines a scope for the next query:

  • ancestor: CSS selector or DOM node.

It can be chained directly:

bem.scope('header').query('nav')

Aliases: bem.s

License

MIT © Nicolas Gryman