### Install Project Dependencies with npm

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/platform/tutorials/quick-start-static/quick-start-static.en.md

This command installs all the necessary Node.js dependencies required for the BEM project. It reads the 'package.json' file to download and set up the packages. It's important not to use root superuser rights for this operation.

```bash
npm install
```

--------------------------------

### HTML Block Example (BEM)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Demonstrates the correct way to define a BEM block using semantic class names. Blocks represent independent, reusable UI components.

```html
<!-- Correct. The `error` block is semantically meaningful -->
<div class="error"></div>

<!-- Incorrect. It describes the appearance -->
<div class="red-text"></div>
```

--------------------------------

### BEM Optionality Example

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Illustrates a BEM block that does not contain any elements, showcasing the optional nature of elements in BEM.

```html
<!-- `search-form` block -->
<div class="search-form">
    <!-- `input` block -->
    <input class="input">

    <!-- `button` block -->
    <button class="button">Search</button>
</div>
```

--------------------------------

### Install smartcd using curl

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/smartcd/smartcd.en.md

This command downloads and executes the smartcd installation script from its official website. It's the primary method for getting smartcd onto your system.

```bash
curl -L http://smartcd.org/install | bash
```

--------------------------------

### Initialize Project and Install Dependencies

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/start-with-bem-express/start-with-bem-express.en.md

Navigates to the project directory, removes existing Git history, initializes a new Git repository, and installs project dependencies using npm. It's recommended not to use root permissions for npm install.

```bash
cd sssr-project
rm -rf .git
git init
npm install
```

--------------------------------

### Start BEM Project Development Server

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/platform/tutorials/quick-start-static/quick-start-static.en.md

This command starts the development server for the BEM project using ENB (Enb). The server typically runs on port 8080 by default, allowing you to preview your static page. You can specify a different port using the '-p' flag.

```bash
npm start
```

```bash
npm start -- -p 8081
```

--------------------------------

### Block Implementation Files for 'hello' Block

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Lists the essential files required for implementing a custom BEM block named 'hello'. These include JavaScript for behavior, BEMHTML for templating, and CSS for styling.

```text
desktop.blocks/hello/
    hello.js
    hello.bemhtml.js
    hello.css
```

--------------------------------

### BEM Membership Example

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Demonstrates the correct and incorrect usage of elements within a BEM block. Elements must be nested within their parent block and cannot be used independently.

```html
<!-- Correct. Elements are located inside the `search-form` block -->
<!-- `search-form` block -->
<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block -->
    <button class="search-form__button">Search</button>
</form>

<!--
    Incorrect. Elements are located outside of the context of
    the `search-form` block
-->
<!-- `search-form` block -->
<form class="search-form">
</form>

<!-- `input` element in the `search-form` block -->
<input class="search-form__input">

<!-- `button` element in the `search-form` block-->
<button class="search-form__button">Search</button>
```

--------------------------------

### BEM File Structure Example

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Illustrates the recommended file structure for BEM projects. Each block has its own directory, with subdirectories for elements (prefixed with '__') and modifiers (prefixed with '_'). Technology files (e.g., .css, .js) are placed within these directories.

```files
search-form/

    __input/
        search-form__input.css
        search-form__input.js

    __button/
        search-form__button.css
        search-form__button.js

    _theme/
        search-form_theme_islands.css
        search-form_theme_lite.css

    search-form.css
    search-form.js
```

--------------------------------

### Start BEM Development Server

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Starts the development server for a BEM project using npm. The server typically runs on port 8080, but can be reassigned if the port is in use.

```bash
npm start
# or to specify a port:
npm start -- -p 8081
```

--------------------------------

### HTML Example of BEM Mix

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Demonstrates the 'Mix' technique in HTML, where a 'search-form' block is combined with an element from the 'header' block. This allows for shared styles and behavior without code duplication, enabling independent block usage.

```html
<div class="header">
    <div class="search-form header__search-form"></div>
</div>
```

--------------------------------

### Clone BEM Project with Git

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Clones the 'project-stub' template repository to initialize a new BEM project. This command sets up the basic project structure and dependencies required for BEM development.

```bash
git clone https://github.com/bem/project-stub.git --depth 1 start-project
cd start-project
npm install
npm start
```

--------------------------------

### HTML DOM Structure Change Example (BEM)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Illustrates how the DOM structure of a block can change without altering the BEM element names or their corresponding CSS rules. This highlights the flexibility and maintainability of the BEM approach.

```html
<div class="block">
    <div class="block__elem1">
        <div class="block__elem2"></div>
    </div>

    <div class="block__elem3"></div>
</div>
```

--------------------------------

### Project Directory Structure for a New Page

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Illustrates the file and directory structure required for adding a new page named 'hello' to a BEM project. It shows the placement of the BEMJSON file within the page's bundle directory.

```text
start-project/
    .bem
    .enb/
    common.blocks/
    desktop.blocks/
    desktop.bundles/
        index/               # index page bundle directory
        hello/               # hello page bundle directory
            hello.bemjson.js # hello page description
```

--------------------------------

### HTML Element Example (BEM)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Shows the correct structure for defining BEM elements within a block. Elements are parts of a block and cannot be used independently. The naming convention uses a double underscore separator.

```html
<!-- `search-form` block -->
<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block -->
    <button class="search-form__button">Search</button>
</form>
```

--------------------------------

### Verify smartcd functionality with 'which bem'

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/smartcd/smartcd.en.md

This example demonstrates how smartcd changes the behavior of the 'which' command. Initially, 'bem' points to a global installation. After entering a smartcd-configured project directory, 'which bem' resolves to the local 'node_modules/.bin' version, and this persists in subdirectories.

```bash
~/projects$ which bem
/usr/local/bin/bem

~/projects$ cd bem-www
smartcd: running /Users/arikon/.smartcd/scripts/Users/arikon/projects/bem-www/bash_enter

~/projects/bem-www$ which bem
/Users/arikon/projects/bem-www/node_modules/.bin/bem

~/projects/bem-www$ cd blocks-desktop/

~/projects/bem-www/blocks-desktop$ which bem
/Users/arikon/projects/bem-www/node_modules/.bin/bem

~/projects/bem-www/blocks-desktop$ cd ../..

~/projects$ which bem
/Users/arikon/n/bin/bem
```

--------------------------------

### Start BEM Development Server on Custom Port

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/platform/tutorials/start-with-project-stub/start-with-project-stub.en.md

Starts the ENB development server on a specified port, useful if the default port (e.g., 8080) is already in use. The `-p` option allows redefinition of the port number. This ensures the development server can run without conflicts.

```bash
npm start -- -p 8081
```

--------------------------------

### Start BEM Development Server

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/platform/tutorials/start-with-project-stub/start-with-project-stub.en.md

Starts the ENB development server, which serves the project and automatically rebuilds components on page reload. The server typically runs on port 8080. This command is used for live development and testing.

```bash
npm start
```

--------------------------------

### Integrating Input and Button Blocks into 'hello' Block

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Further enhances the 'hello' block by adding 'input' and 'button' blocks. This demonstrates how to compose a page layout with multiple interactive components using BEMJSON.

```javascript
content : [
    {
        block : 'hello',
        content : [
            {
                elem : 'greeting',
                content : 'Hello, %user%!'
            },
            {
                block : 'input',
                mods : { theme: 'islands', size : 'm' },
                name : 'name',
                placeholder : 'User name'
            },
            {
                block : 'button',
                mods : { theme : 'islands', size : 'm', type : 'submit' },
                text : 'Click'
            }
        ]
    }
]
```

--------------------------------

### Initialize Git Repository

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/platform/tutorials/start-with-project-stub/start-with-project-stub.en.md

Initializes a new Git repository in the current directory. This command is used after cloning a project stub and removing its original Git history, allowing you to start fresh with your own version control.

```bash
git init
```

--------------------------------

### Install Project Dependencies with npm

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/platform/tutorials/start-with-bem-express/start-with-bem-express.en.md

Installs all required Node.js modules for the project using npm. This includes libraries for web applications, authentication, and API clients for Twitter and Google. Ensure Node.js and npm are installed before running.

```bash
$ npm install express passport passport-youtube-v3 twitter googleapis@^20.0.1 moment --save
```

--------------------------------

### Define Hello Block with YModules and i-bem.js

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Declares the 'hello' block using the YModules system for dependency management and i-bem.js for block definition. This snippet shows how to import necessary modules and define the block's initialization and submission logic.

```javascript
// adding dependencies from i-bem-dom, input and button
    modules.define('hello', ['i-bem-dom', 'input', 'button'],
        // the function that names of used modules are passed to
        function(provide, bemDom, Input, Button) {

        // declaration of the hello block
        provide(bemDom.declBlock('hello', {
            onSetMod: {
                js: {
                    inited: function() {
                        this._input = this.findChildBlock(Input);
                    }
                }
            },
            _onSubmit: function(e) {
                e.preventDefault();
                this._elem('greeting').domElem.text('Hello, ' + this._input.getVal() + '!');
            }
        }, {
            lazyInit: true,
            onInit: function() {
                this._domEvents().on('submit', this.prototype._onSubmit);
            }
        }));
    });
```

--------------------------------

### BEM Declaration Example (desktop.bundles/index/index.bemdecl.js)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/start-with-bem-express/start-with-bem-express.en.md

Defines the BEM entities to be included in the project build. This example shows a simple declaration for the 'root' block, which serves as the entry point for the build process.

```javascript
// `desktop.bundles/index/index.bemdecl.js`
exports.blocks = [
    { name: 'root' }
];  
```

--------------------------------

### HTML Example: Multiple Modifiers on a Block

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/faq/faq.en.md

Shows an HTML example of a block with multiple modifiers applied. This demonstrates how different states and variations of a block can be managed simultaneously.

```html
<div class="button button_size_m button_theme_islands button_type_submit">
    <div class="button__text">...</div>
</div>
```

--------------------------------

### HTML Navigation Menu Example (Traditional)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/solved-problems/solved-problems.en.md

An example of a simple HTML navigation menu using traditional, context-dependent class names. This can lead to style conflicts when similar class names are used elsewhere in the project.

```html
<ul class="nav">
    <li class="item active"><a class="link">One</a></li>
    <li class="item"><a class="link">Two</a></li>
    <li class="item"><a class="link">Three</a></li>
</ul>
```

--------------------------------

### BEM Key-Value Modifier Example

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Demonstrates the use of key-value modifiers in BEM, where modifiers have specific values to define appearance, state, or behavior.

```html
<!-- The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <!-- The `button` element has the `size` modifier with the value `m` -->
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

<!-- You can't use two identical modifiers with different values simultaneously -->
<form class="search-form
             search-form_theme_islands
             search-form_theme_lite">

    <input class="search-form__input">

    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
        Search
    </button>
</form>
```

--------------------------------

### Building and Serving Project with ENB

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/bem-full-stack/bem-full-stack.en.md

This command initiates the build process for the project using the ENB build tool and starts a local development server. The built project can then be accessed via a specified URL.

```bash
> enb server
```

--------------------------------

### Build and Run the Project

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/start-with-bem-express/start-with-bem-express.en.md

Builds the project using ENB and starts the development server. The server typically runs on port 3000, but this can be changed by setting the PORT environment variable or modifying the configuration file.

```bash
npm run dev
```

```bash
PORT=8000 npm run dev
```

--------------------------------

### BEM Boolean Modifier Example

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Shows how to apply boolean modifiers to BEM blocks and elements. Boolean modifiers indicate the presence or absence of a state or feature.

```html
<!-- The `search-form` block has the `focused` Boolean modifier -->
<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- The `button` element has the `disabled` Boolean modifier -->
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>
```

--------------------------------

### Configure smartcd with default settings

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/smartcd/smartcd.en.md

This sequence of interactive prompts allows you to set up smartcd with default configurations. It guides you through creating the configuration file and loading it.

```bash
Configure now? [Y/n] y
Use all default settings? [Y/n] y
Would you like to configure smartcd in /Users/%username%/.smartcd_config? (recommended) [Y/n] y
Would you like to load your config file now? [Y/n] y
```

--------------------------------

### Set up project for smartcd and npm-module

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/smartcd/smartcd.en.md

This command sequence first navigates to a project directory and then configures it to use the 'npm-module' smartcd template. This ensures that when you enter this directory or its subdirectories, the 'npm-module' configuration will be applied.

```bash
cd path/to/project
echo 'smartcd template run npm-module' | smartcd edit enter
```

--------------------------------

### BEM Modifier Usage Guideline Example

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Illustrates the correct usage of BEM modifiers, emphasizing that a modifier must be applied to its corresponding block or element and cannot stand alone.

```html
<!--
    Correct. The `search-form` block has the `theme` modifier with
    the value `islands`
-->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <button class="search-form__button">Search</button>
</form>

<!-- Incorrect. The modified class `search-form` is missing -->
<form class="search-form_theme_islands">
    <input class="search-form__input">

    <button class="search-form__button">Search</button>
</form>
```

--------------------------------

### Express 'Hello World' Web Application

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/start-with-bem-express/start-with-bem-express.en.md

A basic 'Hello World' example using the Express.js framework. This snippet illustrates setting up a simple web server that listens on port 3000 and responds to requests on the root path with 'Hello World!'.

```javascript
var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!')
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});
```

--------------------------------

### HTML Element Hierarchy Example (BEM)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Demonstrates how BEM elements can have a nested DOM structure but are represented as a flat list in CSS. This allows for DOM changes without affecting element-specific code.

```html
<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>
```

--------------------------------

### Build and Run Development Server

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/platform/tutorials/start-with-bem-express/start-with-bem-express.en.md

Builds the project package and launches the development server. This command uses ENB for building and Nodemon for live reloading.

```bash
npm run dev
```

--------------------------------

### Configure Server for 'Hello World'

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/start-with-bem-express/start-with-bem-express.en.md

Modifies the server-side code to handle GET requests for the main page. It initializes 'hello' and 'world' variables and passes them to the rendering function for display.

```javascript
/**
 * The function handles all GET requests from the application's main page
 * @function
 * @param {object} req - Request.
 * @param {object} res - Response.
 */
app.get('/', function(req, res) {
    var hello = 'Hello';                  // Initialize the `hello` variable
    var world = 'World';                  // Initialize the `world` variable
    render(req, res, {
        view: 'page-index',
        title: 'Main page',
        meta: {
            description: 'Page description',
            og: {
                url: 'https://site.com',
                siteName: 'Site name'
            }
        },
        hello: hello,                     // Pass the `hello` variable to `this.data.hello`
        world: world                      // Pass the `world` variable to `this.data.world`
    })
});
```

--------------------------------

### HTML Element Nesting Guidelines (BEM)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Provides examples of correct and incorrect element nesting within BEM. Elements are always part of a block and should follow the `block-name__element-name` pattern, not create nested class names like `block__elem1__elem2`.

```html
<!--
    Correct. The structure of the full element name follows the pattern:
    `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input">

        <button class="search-form__button">Search</button>
    </div>
</form>

<!--
    Incorrect. The structure of the full element name doesn't follow the pattern:
    `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <!-- Recommended: `search-form__input` or `search-form__content-input` -->
        <input class="search-form__content__input">

        <!-- Recommended: `search-form__button` or `search-form__content-button` -->
        <button class="search-form__content__button">Search</button>
    </div>
</form>
```

--------------------------------

### Initialize Express Server for Search Queries (Node.js)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/bem-full-stack/bem-full-stack.en.md

Sets up an Express server to listen on port 3000. It defines a '/search' route that parses query parameters, fetches data from enabled services (like Twitter), and returns the results as a JSON string. Dependencies include 'express', 'url', 'querystring', and 'vow'.

```javascript
modules.require(['twitter'], function(twitter) {

var fs = require('fs'),
    PATH = require('path'),
    express = require('express'),
    app = express(),
    url = require('url'),
    querystring = require('querystring'),
    Vow = require('vow');

app.get('/search', function(req, res) {

    var dataEntries = [],
        searchObj = url.parse(req.url, true).query,
        queryString = querystring.escape(searchObj.query),
        servicesEnabled = [];

    searchObj.twitter && servicesEnabled.push(twitter.get(queryString));

    Vow.all(servicesEnabled)
        .then(function(results) {
            res.end(JSON.stringify(results, null, 4));
        })
        .fail(function() {
            console.error(arguments);
        });
    });

    var server = app.listen(3000, function() {
        console.log('Listening on port %d', server.address().port);
    });

});
```

--------------------------------

### Mix Input Block with Hello Element Styles

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Demonstrates how to use the 'mix' property in BEMJSON to apply specific CSS rules to an 'input' block. This example mixes the 'hello__input' CSS class into an 'input' block, customizing its appearance within the 'hello' context.

```json
{
       block : 'input',
       mods : { theme : 'islands', size : 'm' },

       // mix in element to add CSS rules
       mix : { block : 'hello', elem : 'input' },

       name : 'name',
       placeholder : 'User name'
   }
```

--------------------------------

### Build and Run Node.js Project

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/bem-full-stack/bem-full-stack.en.md

Commands to build the project using 'enb make' and then run the Node.js application. This is typically used in BEM projects to compile assets and start the server-side code.

```bash
> enb make
> node ./desktop.bundles/index/index.node.js
```

--------------------------------

### Clone bem-express Repository

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/start-with-bem-express/start-with-bem-express.en.md

Clones the bem-express repository to start a new project. This is the initial step for setting up the 'Hello World' application.

```bash
git clone https://github.com/bem/bem-express.git sssr-project
```

--------------------------------

### Date Formatting with moment.js in Node.js

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/start-with-bem-express/start-with-bem-express.en.md

This snippet shows how to use the 'moment' library for date manipulation in JavaScript. It demonstrates formatting the current date to show time elapsed since the start of the day. Install 'moment' using npm.

```javascript
var moment = require('moment');

moment().startOf('day').fromNow();             // 17 hours ago
```

--------------------------------

### CSS Flat Element Representation (BEM)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/method/quick-start/quick-start.en.md

Shows the CSS representation for BEM elements, which is a flat list regardless of their DOM nesting. This adheres to the BEM methodology's principle of element independence.

```css
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
```

--------------------------------

### Add Base Styles for Hello Block

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Applies base CSS styles to the 'hello' block and its 'greeting' element. This includes setting the text color, padding, and margin for the greeting message.

```css
.hello
    {
        color: green;
        padding: 10%;
    }

    .hello__greeting
    {
        margin-bottom: 12px;
    }
```

--------------------------------

### Adding a Greeting Element to the 'hello' Block

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Extends the 'hello' block in BEMJSON to include a 'greeting' element. This element displays a personalized welcome message, demonstrating how to add content to a block.

```javascript
content : [
    {
        block : 'hello',
        content : [
            {
                elem : 'greeting',
                content : 'Hello, %user%!'
            }
        ]
    }
]
```

--------------------------------

### BEM Project File Structure Example

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/bem-full-stack/bem-full-stack.en.md

Illustrates a typical file structure for a BEM project, showing how blocks, elements, and modifiers are organized within directories. It highlights the separation of concerns for CSS, JS, and documentation.

```tree
desktop.blocks/
    input/
        __box/         # element
        __clear/       # element
        __control/     # element
        _focused/      # modifier
        _type/         # modifier
        input.css      # block's css implementation
        input.js       # block's js implementation
        input.ru.md    # markdown documentation
…
```

--------------------------------

### Update Index.js for Application Startup (JavaScript)

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/start-with-bem-express/start-with-bem-express.en.md

This code snippet updates the 'index.js' file to handle the application startup process. It includes starting the server and listening for incoming requests on a specified port.

```javascript
const app = require('./app');
const config = require('./config.json');

app.listen(config.defaultPort, () => {
    console.log(`Server listening on port ${config.defaultPort}`);
});
```

--------------------------------

### Build and Run BEM Project

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/bem-full-stack/bem-full-stack.en.md

Commands to build the BEM project using 'enb make' and run the application. It also shows how to build in production mode with Borschik for asset freezing.

```bash
$ enb make && node ./desktop.bundles/index/index.node.js
```

```bash
> YENV=production enb make && node desktop.bundles/index/index.node.js
```

--------------------------------

### Basic BEMJSON for a Page Structure

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Defines the basic structure of a page using BEMJSON. It includes the page title, CSS and JS file references, theme modification, and the initial 'hello' block.

```javascript
({ block : 'page',
    title : 'hello',
    head : [
        { elem : 'css', url : 'hello.min.css' }
    ],
    scripts : [{ elem : 'js', url : 'hello.min.js' }],
    mods : { theme : 'islands' },
    content : [
        {
            block : 'hello'
        }
    ]
})
```

--------------------------------

### Create Hello Block Template with BEMHTML

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Defines a BEMHTML template for the 'hello' block. It specifies that the block should have JavaScript enabled and be rendered within a form tag, using the standard BEMHTML tag mode.

```bemhtml
block('hello')(
        js()(true),
        tag()('form')
    );
```

--------------------------------

### Define Hello Block Behavior with i-bem.js

Source: https://github.com/block-element-modifier/bem-method.git/blob/bem-info-data/articles/quick-start-static/quick-start-static.en.md

Defines the JavaScript behavior for the 'hello' block, including event handling for user input and updating a greeting message. It utilizes the i-bem.js framework for declarative component definition and event management.

```javascript
// constructor for defining the reaction to an event
    onSetMod: {
        js: {
            inited: function() {
                this._input = this.findChildBlock(Input);
            }
        }
    },
    _onSubmit: function(e) {
        // prevents triggering the default event:
        // sends the form to the server and refreshes the page
        e.preventDefault();
        this._elem('greeting').domElem.text('Hello, ' + this._input.getVal() + '!');
    },
    {
        lazyInit: true,
        onInit: function() {
            // DOM event to react to
            this._domEvents().on('submit', this.prototype._onSubmit);
        }
    }
```