# beml

> HTML preprocessor for BEM

Latest version **1.3.0** (published 2017-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install beml
pnpm add beml
yarn add beml
bun add beml
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2017-03-05 |
| First published | 2014-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 64 |
| Author | Maxim Poletaev |
| Maintainers | zenwalker |

## Links

- npm: https://www.npmjs.com/package/beml
- Repository: https://github.com/zenwalker/node-beml
- Homepage: https://github.com/zenwalker/node-beml#readme
- Issues: https://github.com/zenwalker/node-beml/issues
- npm.io page: https://npm.io/package/beml

## Dependencies (2)

- [extend](https://npm.io/package/extend.md) ^2.0.0
- [cheerio](https://npm.io/package/cheerio.md) ^0.22.0

## Recent versions

- 1.3.0 (latest) — 2017-03-05
- 1.2.3 — 2015-09-15
- 1.2.2 — 2015-03-09
- 1.2.1 — 2015-03-09
- 1.2.0 — 2015-03-09
- 1.1.0 — 2015-02-10
- 1.0.2 — 2015-02-09
- 1.0.1 — 2015-02-09
- 1.0.0 — 2015-01-20
- 0.1.1 — 2014-02-22
- 0.1.0 — 2014-01-24
- 0.0.3 — 2014-01-22
- 0.0.2 — 2014-01-21
- 0.0.1 — 2014-01-21

## README

# BEML [![Build Status][build]][build-link]

[build]: https://travis-ci.org/zenwalker/node-beml.png?branch=master
[build-link]: https://travis-ci.org/zenwalker/node-beml

This is simple HTML preprocessor (or postprocessor) which extend HTML syntax for
comfortable working with bem html.

Also available plugins for [Gulp](https://github.com/zenwalker/gulp-beml),
[Grunt](https://github.com/zenwalker/grunt-beml), [Broccoli](https://github.com/Inzephirum/broccoli-beml) and [Postxml](https://github.com/postxml/postxml-beml).

## Why?

Raw HTML in BEM style is difficult to read. Also, I (and not only I) love HTML
and don't want to use BEMHTML, BEMJSON and others specific technologies.

## Targets

* Maximum simplicity - HTML syntax, without translate from another language.
* Possibility port to other languages (e.g. PHP or Python).
* Joint work with template engines.
* Ease of use.

## Sample

```html
<div block="b-animals">
  <div elem="cat" mod="size:big, color:red"></div>
</div>
```

translated to

```html
<div class="b-animals">
  <div class="b-animals__cat b-animals__cat_size_big b-animals__cat_color_red"></div>
</div>
```

## How to use

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

var config = {
  elemPrefix: '__',
  modPrefix: '_',
  modDlmtr: '_'
};

var html = beml('<div block="b-block" mod="size:big"></div>', config);
console.log(html);
```

## Syntax reference

### Blocks

```html
<div block="animals">
  <div block="unicorn"></div>
</div>
```

```html
<div class="animals">
  <div class="unicorn"></div>
</div>
```

### Elements

```html
<div block="animals">
  <div elem="item">
    <div elem="item-name"></div>
  </div>
</div>
```

```html
<div class="animals">
  <div class="animals__item">
    <div class="animals__item-name"></div>
  </div>
</div>
```

### Modifiers

```html
<div block="animals">
  <div block="unicorn" mod="size:large, female"></div>
</div>
```

```html
<div class="animals">
  <div class="unicorn inicorn_size_large unicorn_female"></div>
</div>
```

### Mixes

```html
<div block="animals">
  <div elem="item" mix="block:unicorn, mod: [large, female]">
    <div block="unicorn" elem="photo"></div>
    <div elem="item-name"></div>
  </div>
</div>
```

```html
<div class="animals">
  <div class="animals__item unicorn unicorn_large unicorn_female">
    <div class="unicorn__photo"></div>
    <div class="animals__item-name"></div>
  </div>
</div>
```

For complex values you can use pseudo JSON syntax:

```html
<div block="unicorn" mix="block:animals, elem:item, mod:{size:large,gender:female}"></div>
<div block="unicorn" mix="{block:b-mix-1}, {block:b-mix-2, mod:[mod1, mod2]}"></div>
```

```html
<div class="unicorn animals__item animals__item_size_large animals__item_gender_female"></div>
<div class="unicorn b-mix-1 b-mix-2 b-mix-2_mod1 b-mix-2_mod_2"></div>
```

---
_Source: https://npm.io/package/beml · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._