<-- Twitter Summary card images must be at least 120x120px -->

How the Hell Do I Create a New Block and Look at It?

It's not immediately obvious how to make the basic building blocks with BEM. Once you have created some blocks, you'll want to see them in the browser, and that is also not immediately obvious

To create a block, use the bem-tools command bem create -l whatever.level.this.goes.to -b my-block-name

I have yet to develop a good organizational ontology1 for naming levels, so your guess is as good as mine as to what the best practices are for naming levels.

Blocks seem easier to name, as they are generally some kind of structure. I've been using things like “button" or “title" or “search-bar" or “advanced-search" for names.

Once you've created blocks and have a bundle you want to look at2, what do you do?

You run the bem server! The bem documentation says running bem server works, but in my case, I need to specify the ip address. I also specify the port, because I run a lot of different things on my workstation. For example:

bem server -p 8080 --host=127.0.0.1

Once you've done that, browse to http://127.0.0.1:8080 and you should see the bem server index page giving you diagrams of your bundles and links to your bundles' index pages

Footnotes

1:I'm not at all certain I'm using 'ontology' correctly, but I'm cribbing from wikipedia and the w3c so at least I look smart.

2: What is a bundle? I don't really know, but I think it roughly maps to a 'web page' - look out for a future blog post.

Tags: javascript framework how-to tutorial review web development webapp design-pattern learn-along

Get great articles about development every month here ⬇️