Static quick-start

Creating a static page with BEM

HTML

<link rel="stylesheet" href="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.css">
<script src="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.js+bemhtml.js"></script>
<body class="page page_theme_islands">
<script type="text/bemjson" class="bemjson i-bem" data-bem="{&quot;bemjson&quot;: {}}">
{
 "block": "hello",
 "content": [
    {
        "elem": "greeting",
        "content": "Hello, %user%!"
    },
    {
        "block" : "input",
        "mods" : { "theme" : "islands", "size" : "m" },
        "mix" : { "block" : "hello", "elem" : "input" },
        "name" : "name",
        "placeholder" : "User name"
    },
    {
        "block" : "button",
        "mods" : { "theme" : "islands", "size" : "m", "type" : "submit" },
        "text" : "Click"
    }
 ]
}
</script>
</body>

SCSS

.hello {
  color: green;
  padding: 10%;
  
  &__greeting {
    margin-bottom: 12px;
  }
  
  &__input {
    margin-right: 12px;
  }
}

JavaScript

/**
 * @module hello
 */
modules.define(
  'hello', // a block name
  ['i-bem__dom'], // dependence connection
  function(provide, BEMDOM) { // a function that received names of the used modules

    /**
     * @exports
     * @class hello
     * @bem
     */
    provide(BEMDOM.decl(this.name, /** @lends hello.prototype */ { // a block declaration
      onSetMod: { // a constructor that describes reaction on an event
        'js': {
          'inited': function() {
            this._input = this.findBlockInside('input');

            this.bindTo('submit', function(e) { // the event that causes reaction
              e.preventDefault(); // prevention of event triggering by default (form data sending to the server with page reload)
              this.elem('greeting').text('Hello, ' + this._input.getVal() + '!');
            });
          }
        }
      }
    }));
  }
);

/**
 * Template
 */
modules.define( 'BEMHTML', [], function ( provide, BEMHTML ) {
  BEMHTML.compile(function() {
    block('hello')(
      js()(true),
      tag()('form')
    );
  });
  provide( BEMHTML );
} );


/**
 * @module bemjson
 */
modules.define(
  'bemjson', ['i-bem__dom', 'BEMHTML'],
  function(provide, BEMDOM, BEMHTML) {

    /**
     * @exports
     * @class bemjson
     * @bem
     */
    provide(BEMDOM.decl(this.name, /** @lends bemjson.prototype */ {
      onSetMod: {
        js: {
          inited: function() {
            BEMDOM.replace(this.domElem, BEMHTML.apply(JSON.parse(this.domElem.text())));
          }
        }
      }
    }));
  }
);