Мастер-класс про БЭМ

Содержание

Слайд 2

Теория

Теория

Слайд 3

Словарь

БЭМ! — методология + инструменты + библиотека

Словарь БЭМ! — методология + инструменты + библиотека

Слайд 4

Словарь

БЭМ! — методология + инструменты + библиотека
БЭМ-сущность — блок, элемент, модификатор
БЭМ-технология —

Словарь БЭМ! — методология + инструменты + библиотека БЭМ-сущность — блок, элемент,
~ язык программирования

Слайд 5

Сущности и технологии

$ ls -1 bem-bl/blocks-desktop/b-search/
b-search.bemhtml
b-search.css
b-search.deps.js
b-search.en.title.txt
b-search.ru.title.txt
b-search.ru.wiki
examples
__layout

blocks/block/block.tech
blocks/block/__elem/block__elem.tech
blocks/block/_mod/block_mod_val.tech

Сущности и технологии $ ls -1 bem-bl/blocks-desktop/b-search/ b-search.bemhtml b-search.css b-search.deps.js b-search.en.title.txt b-search.ru.title.txt

Слайд 6

Словарь

БЭМ! — методология + инструменты + библиотека
БЭМ-сущность — блок, элемент, модификатор
БЭМ-технология —

Словарь БЭМ! — методология + инструменты + библиотека БЭМ-сущность — блок, элемент,
~ язык программирования
БЭМ-дерево — дерево блоков страницы
БЭМ-декларация — множество блоков страницы

Слайд 7

Дерево

({
block: 'b-page',
head: [
{ elem: 'css', url: 'example.css' },
{

Дерево ({ block: 'b-page', head: [ { elem: 'css', url: 'example.css' },
elem: 'css', url: 'example.ie.css', ie: 'lt IE 8' },
{ block: 'i-jquery', elem: 'core' },
{ elem: 'js', url: 'example.js' }
],
content: {
block: 'b-link',
mods: { pseudo: 'yes' },
url: 'www.yandex.ru',
target: '_blank',
title: 'Click me',
content: 'Visit Yandex'
}
})

bem-bl-test/pages/example/example.bemjson.js

Слайд 8

Декларация

exports.blocks = [
{ "name": "b-page" },
{
"name": "b-link",
"mods": [

Декларация exports.blocks = [ { "name": "b-page" }, { "name": "b-link", "mods":

{
"name": "pseudo",
"vals": [ "yes" ]
}
]
}
];

bem-bl-test/pages/example/example.bemdecl.js

Слайд 9

Сборка

Сборка

Слайд 10

Теория
Подробно:
github.com/bem/bem-method

Теория Подробно: github.com/bem/bem-method

Слайд 11

Применение

Применение

Слайд 12

CSS
JS
BEMHTML
PRIV.JS
NODE

Глубина погружения

CSS JS BEMHTML PRIV.JS NODE Глубина погружения

Слайд 13

Применение

Готовый движок?
CSS, JS
Статический сайт?
CSS, JS, BEMHTML
Динамический сайт?
CSS, JS, BEMHTML, PRIV.JS

Применение Готовый движок? CSS, JS Статический сайт? CSS, JS, BEMHTML Динамический сайт? CSS, JS, BEMHTML, PRIV.JS

Слайд 14

Практика 1: статика

Практика 1: статика

Слайд 15

Инструменты + библиотека
github.com/bem/bem-tools
github.com/bem/bem-bl-test

Инструменты + библиотека github.com/bem/bem-tools github.com/bem/bem-bl-test

Слайд 16

План

Подготовка:
— настраиваем веб-сервер (nginx)
— устанавливаем bem-tools
Разработка:
— скачиваем библиотеку
— описываем свою страницу
— пишем

План Подготовка: — настраиваем веб-сервер (nginx) — устанавливаем bem-tools Разработка: — скачиваем
технологии для блоков: css, js, bemhtml

Слайд 17

Практика 2: динамика

Практика 2: динамика

Слайд 18

План

Подготовка:
— настраиваем проксирование http-запросов
Разработка:
— веб-сервер на node
— технология сборки priv.js
— кастомизация технологии

План Подготовка: — настраиваем проксирование http-запросов Разработка: — веб-сервер на node —
сборки bemhtml
— технологии для блоков: priv.js

Слайд 19

Результат
github.com/mishanga/serp

Результат github.com/mishanga/serp