Forum

Methodology

Toolbox

Platform

Community

i-bem.js: User's guide

i-bem.js: JavaScript framework for BEM

i-bem.js is a specialized JavaScript framework for web development using the BEM methodology.

i-bem.js makes it possible to:

  • Develop a web interface in terms of blocks, elements, and modifiers.
  • Describe a block logic in declarative style, as a set of states.
  • Easily integrate JavaScript code with BEMHTML or BH templates and CSS in BEM style.
  • Flexibly redefine the behavior of library blocks.

i-bem.js is not meant to replace the general-purpose framework, like jQuery.

What this document covers:

  • Overview of the framework: its relationship to the BEM subject domain, and a summary of the framework modular structure, a template project, and assembly tools written using i-bem.js.
  • Binding JS blocks to HTML — Markup for JS blocks in a page HTML code and the possible relationships of HTML elements to JS blocks.
  • Block declaration — Syntax for describing JS blocks.
  • Passing parameters — Passing parameters to a block instance and accessing block parameters from an instance.
  • Working with the DOM tree — The API for working with DOM nodes of blocks: elements, dynamic changes to the DOM tree (using AJAX), and searching DOM nodes.
  • Block states — Modifiers and triggers for state changes (setting modifiers).
  • Events — The i-bem.js event model: DOM and BEM events and event delegation.
  • Initialization — Initializing and deleting block instances; deferred and automatic initialization.
  • Interaction of blocks — Calls from a block to other blocks and classes of blocks.
  • Context — Private and static properties of a block. BEMDOM static properties.
  • What next? — Links to documentation and supplemental materials.
If you notice a mistake or want something to supplement the article, you can always write to us at GitHub, or correct an article using prose.io.