Starting Your BEM Project

As explained in the official BEM documentation, the easiest way to start you own new BEM project is to use existing GIT repository. Simply use Git clone command:

$ git clone https://github.com/bem/project-stub.git

Next, go to a newly created directory and install all dependencies:

$ npm install

All required dependencies will be installed:

Build the project using ENB:

$ node_modules/.bin/enb make

Run a server mode for development:

$ node_modules/.bin/enb server

As a result, the following message appears:

Server started at 0.0.0.0:8080

Now, this means that the server is up and running. You can now check the results on this address:

http://localhost:8080/desktop.bundles/index/index.html

As you can see, there are a lot of elements already created which are defined inside bemjson file which is located here:

project-stub/desktop.bundles/index/index.bemjson.js

You can see and explore the current structure of the file that is generating all that HTML, which you see at your localhost index.html file. We are going to alter this file to get our “Person” BEM project which we explained in a previous chapter. You can remove (or comment) the whole code from index.bemjson.js file, and replace it with this one:

module.exports = {
    block: 'page',
    title: 'Person BEM',
    favicon : '/favicon.ico',
    head : [
        { elem : 'meta', attrs : { name : 'description', content : '' } },
        { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } },
        { elem : 'css', url : 'index.min.css' }
    ],
    scripts: [{ elem : 'js', url : 'index.min.js' }],
    content: [
        {
            block: 'person',
            content: [
                {
                    elem: 'male',
                    content: [
                        {
                            elem: 'leg',
                            mods: {side: 'left'},
                            content: 'Male person leg -- left'
                        },
                        {
                            elem: 'leg',
                            mods: {side: 'right'},
                            content: 'Male person leg -- right'
                        },
                        {
                            elem: 'hand',
                            mods: {side: 'left'},
                            content: 'Male person hand -- left'
                        },
                        {
                            elem: 'hand',
                            mods: {side: 'right'},
                            content: 'Male person hand -- right'
                        }
                    ]
                },
                {
                    elem: 'female',
                    content: [
                        {
                            elem: 'leg',
                            mods: {side: 'left'},
                            content: 'Female person leg -- left'
                        },
                        {
                            elem: 'leg',
                            mods: {side: 'right'},
                            content: 'Female person leg -- right'
                        },
                        {
                            elem: 'hand',
                            mods: {side: 'left'},
                            content: 'Female person hand -- left'
                        },
                        {
                            elem: 'hand',
                            mods: {side: 'right'},
                            content: 'Female person hand -- right'
                        }
                    ]
                },
            ]
        }
    ]
};

Now, the following HTML will be generated:

<div class="person">
    <div class="person__male">
        <div class="person__leg person__leg_side_left">
          Male person leg -- left
        </div>

        <div class="person__leg person__leg_side_right">
          Male person leg -- right
        </div>

        <div class="person__hand person__hand_side_left">
          Male person hand -- left
        </div>

        <div class="person__hand person__hand_side_right">
          Male person hand -- right
        </div>
    </div>

    <div class="person__female">
        <div class="person__leg person__leg_side_left">
          Female person leg -- left
        </div>

        <div class="person__leg person__leg_side_right">
          Female person leg -- right
        </div>

        <div class="person__hand person__hand_side_left">
          Female person hand -- left
        </div>

        <div class="person__hand person__hand_side_right">
          Female person hand -- right
        </div>
    </div>
</div>

As you can see from the code above, the default BEM coding scheme was used in this scenario since we are just using default settings which BEM provided to us. There are a lot more commands and options which you can explore and use, such as creating new pages, blocks, or modifying BEM HTML. I will not go too deep into this, and it can all be found in the official BEM documentation.

2017-01-29T18:06:22-04:00May 19th, 2016|Guest Blog, Technical Solutions, Tips and Tricks|

About the Author:

Andrew is a technical writer for Deep Core Data. He has been writing creatively for 10 years, and has a strong background in graphic design. He enjoys reading blogs about the quirks and foibles of technology, gadgetry, and writing tips.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.