Search and open BEM blocks and elements in order of levels.




Bug Reports




This package consumes the following services:

Bem-levels package for Atom


Handy search BEM-entities from project levels for Atom.

Atom is a text editor for development.

BEM is a component-based approach for web development.

Bem-levels in action



Step 1: Install

› apm install bem-levels

Step 2: Configuring project levels

Unfortunately, now Atom has no built-in mechanism for per-project config settings. Because of this reason bem-levels use package local-config for store information about project levels.

Format of local config similar to the Atom global configuration settings.

Example of .atom.cson in project root:

      'touch': [

In example above specified that for any file (*), package bem-levels has group touch, which consists of levels list.

Step 3: Setting up key bindings

We already can use bem-levels by invoke command-palette with shift-cmd-p shortcut, then type "Bem Levels: Touch" and press enter. This sequence of actions each time can be tedious. Atom allows to customize key bindings.

Example of ~/.atom/keymap.cson:

  'shift-cmd-i': 'bem-levels:touch'


Schema of all options is stored in the property configSchema from package.json.


Sets target technologies of files for searching.

In fact it is regexp for match extensions (js, bemhtml.js, etc) of files.

Default: .*

Example of searching only *.js and *.bemhtml.js files:

    'targetTechs': '^js|bemhtml.js'

Development details


› git clone
› cd atom-bem-levels
› npm install
› apm link

Used packages

Package @bem/walk used for work with BEM file structure. Packages @bem/naming and @bem/entity-name used for work with BEM entities.

Atom package file-icons used for create file icons to list.

For run tests used mocha and chai with assert style.

Also used flowtype with comment syntax for type checking on precommit hook.