https://github.com/vitkarpov/bemhtml-lesson

Практический вебинар по основам bemhtml
https://github.com/vitkarpov/bemhtml-lesson

Last synced: about 2 months ago
JSON representation

Практический вебинар по основам bemhtml

• Host: GitHub
• URL: https://github.com/vitkarpov/bemhtml-lesson
• Owner: vitkarpov
• Created: 2015-09-27T16:44:55.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-09-29T13:51:41.000Z (over 9 years ago)
• Last Synced: 2025-01-17T23:19:43.781Z (3 months ago)
• Language: JavaScript
• Size: 116 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Практический вебинар по BEMHTML

Что получится в итоге:

![](https://yadi.sk/i/A_erjdlhjMXnv_XXL.jpg)

## Сборка

Сборка самописная, очень простая, исходя из двух предпосылок:

- есть один уровень переопределения — `blocks`

- есть один бандл — `pages/index`

Код сборщика в файлике `bem.js`

## Декларативный шаблонизатор: основы

Почитать — https://ru.bem.info/technology/bemhtml/v2/rationale/

**Отличия декларативного от императивного шаблонизатора**

### Входные данные

```

{

  items: [

    { text: '1' },

    { text: '2' }

  ]

}

```

### Шаблоны

Императивный

```html



    [% foreach item in items %]

        


            [% item.text %]

        

    [% end %]



```


Декларативный

```js

block('menu')(

    tag()('ul'),

    elem('item').tag()('li')

)

```

## Минимум, что необходимо понять

**Моды**

![](https://raw.github.com/bem/bem-core/v1/common.docs/reference/reference_mode_default.png)

https://ru.bem.info/technology/bemhtml/v2/reference/#Стандартные-моды

```js

block('b1').attrs()(function() {

    return {src: this.ctx.url};

})

```

**Предикаты**

```js

block('b1').match(function() { return !!this.ctx.url; }).tag()('a');

```

```js

block('b1').mod('size', 'big')(...)

```

```js

block('b1').elem('text')(...)

```

**Контекст**

https://ru.bem.info/technology/bemhtml/v2/reference/#Контекст

**Примеры и рецепты**

https://ru.bem.info/technology/bemhtml/v2/reference/#Примеры-и-рецепты