Содержание
Быстрый старт / Методология / БЭМ
Введение
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке.
В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».
Содержание
Блок
Элемент
Когда создавать блок, когда — элемент?
Модификатор
Микс
Файловая структура
Блок
Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class
.
Особенности:
Название блока характеризует смысл («что это?» — «меню»:
menu
, «кнопка»:button
), а не состояние («какой, как выглядит?» — «красный»:red
, «большой»:big
).
Пример
<!-- Верно. Семантически осмысленный блок `error` --> <div></div> <!-- Неверно. Описывается внешний вид --> <div></div>
Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.
В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или
id
.
Таким образом обеспечивается независимость, при которой возможно повторное использование или перенос блоков с места на место.
Принцип работы с блоками
Вложенность
Блоки можно вкладывать друг в друга.
Допустима любая вложенность блоков.
Пример
<!-- Блок `header` --> <header> <!-- Вложенный блок `logo` --> <div></div> <!-- Вложенный блок `search-form` --> <form></form> </header>
Элемент
Составная часть блока, которая не может использоваться в отрыве от него.
Особенности:
Название элемента характеризует смысл («что это?» — «пункт»:
item
, «текст»:text
), а не состояние («какой, как выглядит?» — «красный»:red
, «большой»:big
).Структура полного имени элемента соответствует схеме:
имя-блока__имя-элемента
. Имя элемента отделяется от имени блока двумя подчеркиваниями (__
).
Пример
<!-- Блок `search-form` --> <form> <!-- Элемент `input` блока `search-form` --> <input> <!-- Элемент `button` блока `search-form` --> <button>Найти</button> </form>
Принципы работы с элементами
Вложенность
Принадлежность
Необязательность
Вложенность
Элементы можно вкладывать друг в друга.
Допустима любая вложенность элементов.
Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида
block__elem1__elem2
.
Пример
<!-- Верно. Структура полного имени элементов соответствует схеме: `имя-блока__имя-элемента` --> <form> <div> <input> <button>Найти</button> </div> </form> <!-- Неверно. Структура полного имени элементов не соответствует схеме: `имя-блока__имя-элемента` --> <form> <div> <!-- Рекомендуется: `search-form__input` или `search-form__content-input` --> <input> <!-- Рекомендуется: `search-form__button` или `search-form__content-button` --> <button>Найти</button> </div> </form>
Имя блока задает пространство имен, которое гарантирует зависимость элементов от блока (block__elem
).
Блок может иметь вложенную структуру элементов в DOM-дереве:
Пример
<div> <div> <div> <div></div> </div> </div> </div>
Однако эта же структура блока в методологии БЭМ всегда будет представлена плоским списком элементов:
Пример
.block {} .block__elem1 {} .block__elem2 {} .block__elem3 {}
Это позволяет изменять DOM-структуру блока без внесения правок в коде каждого отдельного элемента:
Пример
<div> <div> <div></div> </div> <div></div> </div>
Структура блока меняется, а правила для элементов и их названия остаются прежними.
Принадлежность
Элемент — всегда часть блока и не должен использоваться отдельно от него.
Пример
<!-- Верно. Элементы лежат внутри блока `search-form` --> <!-- Блок `search-form` --> <form> <!-- Элемент `input` блока `search-form` --> <input> <!-- Элемент `button` блока `search-form` --> <button>Найти</button> </form> <!-- Неверно. Элементы лежат вне контекста блока `search-form` --> <!-- Блок `search-form` --> <form> </form> <!-- Элемент `input` блока `search-form` --> <input> <!-- Элемент `button` блока `search-form` --> <button>Найти</button>
Необязательность
Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.
Пример
<!-- Блок `search-form` --> <div> <!-- Блок `input` --> <input> <!-- Блок `button` --> <button>Найти</button> </div>
Когда создавать блок, когда — элемент?
Создавайте блок
Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.
Создавайте элемент
Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).
Исключение составляют элементы, реализация которых для упрощения разработки требует разделения на более мелкие части — подэлементы. В БЭМ-методологии нельзя создавать элементы элементов. В подобном случае вместо элемента необходимо создавать служебный блок.
Модификатор
Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.
Особенности:
Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»:
size_s
, «тема»:theme_islands
), состояние («чем отличается от прочих?» — «отключен»:disabled
, «фокусированный»:focused
) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»:directions_left-top
).Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (
_
).
Типы модификаторов
Булевый
Используют, когда важно только наличие или отсутствие модификатора, а его значение несущественно. Например, «отключен»:
disabled
. Считается, что при наличии булевого модификатора у сущности его значение равноtrue
.Структура полного имени модификатора соответствует схеме:
имя-блока_имя-модификатора
;имя-блока__имя-элемента_имя-модификатора
.
Пример
<!-- Блок `search-form` имеет булевый модификатор `focused` --> <form> <input> <!-- Элемент `button` имеет булевый модификатор `disabled` --> <button>Найти</button> </form>
Ключ-значение
Используют, когда важно значение модификатора. Например, «меню с темой оформления
islands
»:menu_theme_islands
.Структура полного имени модификатора соответствует схеме:
имя-блока_имя-модификатора_значение-модификатора
;имя-блока__имя-элемента_имя-модификатора_значение-модификатора
.
Пример
<!-- Блок `search-form` имеет модификатор `theme` со значением `islands` --> <form> <input> <!-- Элемент `button` имеет модификатор `size` со значением `m` --> <button>Найти</button> </form> <!-- Невозможно одновременно использовать два одинаковых модификатора с разными значениями --> <form> <input> <button> Найти </button> </form>
Принципы работы с модификаторами
Модификатор нельзя использовать самостоятельно
С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее.
Пример
<!-- Верно. Блок `search-form` имеет модификатор `theme` со значением `islands`--> <form> <input> <button>Найти</button> </form> <!-- Неверно. Отсутствует модифицируемый класс `search-form` --> <form> <input> <button>Найти</button> </form>
Зачем в именах модификаторов и элементов указывать имя блока?
Микс
Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.
Миксы позволяют:
совмещать поведение и стили нескольких сущностей без дублирования кода;
создавать семантически новые компоненты интерфейса на основе имеющихся.
Пример
<!-- Блок `header` --> <div> <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`--> <div></div> </div>
В данном примере мы совместили поведение и стили блока search-form
и элемента search-form
блока header
.
Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form
, а сам блок search-form
оставить универсальным.
Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости.
Файловая структура
Принятый в методологии БЭМ компонентный подход применяется и к организации проектов в файловой структуре. Реализации блоков, элементов и модификаторов делятся на независимые файлы-технологии, что позволяет нам подключать их опционально.
Особенности:
Один блок — одна директория.
Имена блока и его директории совпадают. Например, блок
header
— директорияheader/
, блокmenu
— директорияmenu/
.Реализация блока разделяется на отдельные файлы-технологии. Например,
header.css
,header.js
.Директория блока является корневой для поддиректорий соответствующих ему элементов и модификаторов.
Имена директорий элементов начинаются с двойного подчеркивания (
__
). Например,header/__logo/
,menu/__item/
.Имена директорий модификаторов начинаются с одинарного подчеркивания (
_
). Например,header/_fixed/
,menu/_theme_islands/
.Реализации элементов и модификаторов разделяются на отдельные файлы-технологии. Например,
header__input.js
,header_theme_islands.css
.
Пример
search-form/ # Директория блока search-form __input/ # Поддиректория элемента search-form__input search-form__input.css # Реализация элемента search-form__input # в технологии CSS search-form__input.js # Реализация элемента search-form__input # в технологии JavaScript __button/ # Поддиректория элемента search-form__button search-form__button. css search-form__button.js _theme/ # Поддиректория модификатора # search-form_theme search-form_theme_islands.css # Реализация блока search-form, имеющего # модификатор theme со значением islands # в технологии CSS search-form_theme_lite.css # Реализация блока search-form, имеющего # модификатор theme со значением lite # в технологии CSS search-form.css # Реализация блока search-form # в технологии CSS search-form.js # Реализация блока search-form # в технологии JavaScript
Такая файловая структура позволяет легко поддерживать и повторно использовать код.
Разветвленная файловая структура предполагает, что в production код будет собираться в общие файлы проекта.
Придерживаться рекомендуемой файловой структуры не обязательно. Вы можете использовать любую альтернативную структуру проекта, соответствующую принципам организации файловой структуры БЭМ, например:
Flat
Flex
Основные понятия / Методология / БЭМ
Блок
Элемент
Модификатор
БЭМ-сущность
Микс
БЭМ-дерево
Реализация блока
Технология реализации блока
Переопределение блока
Уровень переопределения
Блок
Логически и функционально независимый компонент страницы, аналог компонента в Web Components. Блок инкапсулирует в себе поведение (JavaScript), шаблоны, стили (CSS) и другие технологии реализации. Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.
Возможности блоков:
Вложенная структура
Свободное перемещение
Повторное использование
Вложенная структура
Блоки можно вкладывать в любые другие блоки.
Например, блок head
может содержать логотип (logo
), форму поиска (search
) и блок авторизации (auth
).
Свободное перемещение
Блоки можно перемещать в пределах одной страницы и разных проектов. Независимость блока позволяет изменять его положение на странице и обеспечивает корректную работу и внешний вид.
Так, например, логотип и форму авторизации можно поменять местами. При этом вносить изменения в CSS или JavaScript-код блоков не нужно.
Повторное использование
В интерфейсе может одновременно присутствовать несколько экземпляров одного и того же блока.
Элемент
Составная часть блока, которая не может использоваться в отрыве от него. Элементы не существуют вне блока. Каждый элемент может принадлежать только одному блоку.
Например, пункт меню вне блока меню не используется, значит является его элементом.
Когда создавать блок, когда элемент?
Можно ли в методологии БЭМ создавать элементы элементов?
Модификатор
БЭМ-сущность, определяющая внешний вид, состояние и поведение блока или элемента.
Использование модификаторов опционально, количество — неограничено. Блоку или элементу нельзя одновременно присвоить разные значения модификатора.
По своей сути модификаторы похожи на атрибуты в HTML. Один и тот же блок выглядит по-разному благодаря применению модификатора.
Например, внешний вид блока меню (menu
) может меняться в зависимости от примененного модификатора.
Модификаторы могут изменяться в процессе работы блока (например, как реакция на DOM-события блока) и по запросу из других блоков.
Например, при клике по кнопке Sign In
(DOM-событие click), в случае неверно заполненных полей Login
или Password
, на скрытый блок сообщений об ошибках устанавливается модификатор (visible
).
БЭМ-сущность
БЭМ-сущностями называются блоки, элементы и модификаторы.
Это понятие может применяться как частное, если рассматривается отдельная БЭМ-сущность, и как собирательное для блоков, элементов и модификаторов.
Микс
Способ использования разных БЭМ-сущностей на одном DOM-узле.
Миксы позволяют:
совмещать поведение и стили нескольких БЭМ-сущностей без дублирования кода;
создавать семантически новые компоненты интерфейса на основе имеющихся БЭМ-сущностей.
Рассмотрим пример микса блока и элемента другого блока.
Допустим, в проекте ссылки реализованы блоком link
. Необходимо сделать ссылками пункты меню. Существует несколько способов:
Создать модификатор для пункта меню, который превратит пункт в ссылку. Но в таком случае для реализации модификатора придется скопировать поведение и стили блока
link
. Это приведет к дублированию кода.Воспользоваться миксом универсального блока
link
и элементаlink
блокаmenu
. Микс двух БЭМ-сущностей позволит применить базовую функциональность ссылок из блокаlink
и дополнительные CSS-правила из блокаmenu
без копирования кода.
БЭМ-дерево
Представление структуры веб-страницы в терминах блоков, элементов и модификаторов. Это абстракция над DOM-деревом, которая описывает имена БЭМ-сущностей, их состояния, порядок, вложенность и вспомогательные данные.
В реальных проектах БЭМ-дерево можно выразить любым форматом, который поддерживает древовидную структуру.
Рассмотрим пример DOM-дерева:
<header> <img> <form> <input> <button></button> </form> <ul> <li> <a href="url">en</a> </li> <li> <a href="url">ru</a> </li> </ul> </header>
Ему соответствует такое БЭМ-дерево:
header logo search-form input button lang-switcher lang-switcher__item lang-switcher__link lang-switcher__item lang-switcher__link
Это же БЭМ-дерево будет иметь следующий вид в форматах XML и BEMJSON:
XML
<block:header> <block:logo/> <block:search-form> <block:input/> <block:button/> </block:search-form> <block:lang-switcher> <elem:item> <elem:link/> </elem:item> <elem:item> <elem:link/> </elem:item> </block:lang-switcher> </block:header>
BEMJSON
{ block: 'header', content : [ { block : 'logo' }, { block : 'search-form', content : [ { block : 'input' }, { block : 'button' } ] }, { block : 'lang-switcher', content : [ { elem : 'item', content : [ { elem : 'link' } ] }, { elem : 'item', content : [ { elem : 'link' } ] } ] } ] }
Реализация блока
Набор различных технологий, определяющих следующие особенности БЭМ-сущности:
поведение;
внешний вид;
тесты;
шаблоны;
документацию;
описание зависимостей;
дополнительные данные (например, картинки).
Технология реализации
Технология, которая используется для реализации блока.
Блоки могут быть реализованы в одной или нескольких технологиях, например:
поведение — JavaScript, CoffeeScript;
внешний вид — CSS, Stylus, Sass;
шаблоны — Pug, Handlebars, XSL, BEMHTML, BH;
документация — Markdown, Wiki, XML.
Например, если внешний вид блока задан с помощью CSS, это означает, что блок реализован в технологии CSS. А если документация к блоку написана в формате Markdown — блок реализован в технологии Markdown.
Переопределение блока
Изменение реализации блока путем добавления ему новых особенностей на другом уровне.
Уровень переопределения
Набор БЭМ-сущностей и их частичных реализаций.
Конечная реализация блока может быть разделена по разным уровням переопределения. Каждый последующий уровень добавляет или перекрывает исходную реализацию блока. Конечный результат собирается из отдельных технологий реализации блока со всех уровней переопределения последовательно в заданном порядке.
Переопределять можно любые технологии реализации БЭМ-сущностей.
Например, в проект на отдельный уровень подключается сторонняя библиотека, которая содержит готовые реализации блоков. Проектные блоки хранятся на другом уровне переопределения.
Предположим, что необходимо изменить внешний вид одного из блоков библиотеки. Для этого не нужно менять CSS-правила блока в исходном коде библиотеки или копировать код на уровень проекта. Достаточно создать дополнительные CSS-правила для этого блока на проектном уровне. При сборке в конечную реализацию подключатся исходные стили с уровня библиотеки и новые — с уровня проекта.
БЭМ: Разработка под несколько платформ
Новый макет: Дорожная карта BAM
Автор: Джеймс
Everingham
Обновлено: 28 апреля 1998 г.
ред. примечание: BAM расшифровывается как «Born Again Modularization», а не персонаж Флинтстоунов.
Обзор |
Цель модуляризации BAM
усилие состоит в том, чтобы разделить ключевые модули для совместного использования как NGLayout, так и
кодовая база 5. 0. Усилия BAM обусловлены необходимостью интеграции
новый движок NGLayout, достигая более удобного и модульного
архитектура. Это будет достигнуто за счет стратегического
области: библиотека поддержки сети (netlib), механизм компоновки
(макет) и библиотеку изображений (imglib). Усилия по сетевой библиотеке
потребует разбить текущую реализацию на несколько различных
DLL и библиотеки, каждая из которых будет предоставлять один или несколько компонентов XPCOM.
Усилия по макету включают определение набора специфичных для макета API-интерфейсов XPCOM.
(веб-виджет) и интеграция движка NGLayout в текущую версию 5.0.
база исходного кода. Разделение Imglib включает определение imglib
Интерфейс XPCOM и реинтеграция обратно в базу исходного кода 5.0.
Основные компоненты |
Сетевая библиотека
DLL Engine Netlib
Эта DLL будет содержать основную сеть
функциональность, включая сетевые утилиты, необходимые всем потребителям
из Netlib. Новый код, такой как NGLayout, будет программировать непосредственно на
новые API-интерфейсы XPCOM, предоставляемые движком.Статическая библиотека клиента Netlib
Эта библиотека будет содержать устаревшие
код, необходимый клиенту Mozilla для использования Netlib. В конечном счете,
этот код должен уменьшаться по мере того, как все больше и больше клиентов перерабатываются для
использовать новые API-интерфейсы XPCOM…Потоки DLL
Эта DLL будет содержать различные
реализации потока, используемые Netlib…DLL протокола Netlib
Протоколы, поддерживаемые Netlib
будет разбит на отдельные динамически загружаемые библиотеки DLL. Это будет
разрешить динамическое добавление новых протоколов.
Реализация |
Во время процесса BAM два кода
базы будут в следующих состояниях:
5. 0 Исходная база | Исходная база NGLayout |
интегрированная библиотека образов интегрированная сетевая библиотека интегрированный макет | интегрирована в автономную тестирование модульная сетевая библиотека модульная библиотека imglib |
модульная библиотека изображений интегрированная сетевая библиотека интегрированный макет | интегрирована в автономную тестирование модульная сетевая библиотека модульный imglib |
модульная библиотека изображений модульная сетевая библиотека интегрированный макет | интегрирована в автономную набор тестов и исходная база 5.0 модульная сетевая библиотека модульная библиотека imglib |
модульная библиотека изображений модульная сетевая библиотека модульная компоновка | модульная библиотека изображений модульная сетевая библиотека модульная компоновка |
Ниже представлена предлагаемая структура каталогов.
кода Netlib.
Каталог | Описание |
мозилла/сеть | Корневой сетевой каталог |
мозилла/сеть/протоколы | Корневой каталог для всех протоколов реализации |
mozilla/network/protocols/<ваш реализация любимого протокола> | Существует каталог для каждого протокола реализация |
мозилла/сеть/двигатель | Основная реализация Netlib |
мозилла/сеть/клиент | Устаревший код, необходимый Mozilla клиент… |
мозилла/сеть/поток | Реализации различных потоков.. |
мозилла/сеть/тесты | Автономные тесты |
Сетевая библиотека
Сначала Netlib будет разбит на статические библиотеки и
реинтегрированный
в Mozilla, чтобы показать совместимость. Тогда библиотеки будут
быть индивидуально помещенным за API нового интерфейса на ветках, а затем приземлиться
обратно на транке Mozilla через короткие промежутки времени. Конечный результат должен
быть реструктурированной кодовой базой с гораздо меньшим количеством зависимостей. удаленный
возможность обновления с помощью DLL на основе интерфейса и возможность делать третьи
сторонние протоколы подключаемых модулей и преобразователи потоков.
Макет
После запуска и работы автономной реализации netlib набор
API будут определены, чтобы позволить механизму компоновки NGLayout подключаться к
текущая кодовая база Mozilla. После определенной степени стабильности
и функциональная насыщенность будет достигнута, старый код макета будет вырезан из
кодовая база Mozilla. Это оставит частично компонентный
продукт с модульной компоновкой, netlib и imagelib.
Зависимости |
Макет
- Работа в автономном режиме Netlib и реинтеграция
в Громит - Доработка ДОМ
- Модель события
- Модель стиля
- Предложение диапазона W3C
- NGLayout работает на Mac и UNIX
- Посадка XPCOM на наконечник
Дорожная карта |
Сетевая библиотека
- Переместить nsIURL и реализацию nsURL
в сетевую библиотеку - Поддержка запросов HTTP POST путем предоставления
OutputStream в компоненте nsIURL - Завершите реализацию nsIStreamNotification
- Переместите код mozilla/lib/libnet в
новая иерархия Mozilla/сети - Заставьте клиент Mozilla работать с
новый код мозиллы/сети - Разбейте основной код Netlib на
библиотека библиотеки Netlib - Заставьте NGLayout работать с новой Netlib
двигатель DLL - Начните делить остальную часть мозиллы/сети
код в отдельные библиотеки DLL и библиотеки - основной набор фреймворков и включает
- структура плагина протокола
- Вспомогательные подпрограммы TCP
- функция сетевой утилиты
- протоколы
- http
- суслик
- фтп
- о URL
- файл
- данные
- мокко
- маримба
- удаленный (telnet/rлогин)
- почтовые протоколы
- кеш
- сетевые преобразователи
- ганзип
- вид-источник
- сохранить на диск
- Функции потока C (декларация, реестр,
служебные функции для старых потоков netlib на основе C) - Потоковые функции С++
- Потокобезопасность. Нам нужно завершить
модель многопоточности и сделать DLL-движок Netlib многопоточным.
Вероятно, библиотеки протоколов также должны быть многопоточными…
.
Компоновка
- Спецификация первого прохода WebWidget API (5/4)
- Простая демонстрация работы NGLayout
в Gromit Chrome на Windows (5/13) - Посадка ветки IMGLIB на наконечник (5/15)
- Завершить документ о зависимостях (в процессе)
- Прототип ввода с использованием NGLayout,
совместно с группой Editor (5/29) - Дизайн редактора первого прохода (6/1)
- контекстные меню
- история сеансов
- Клавиатурная навигация
- Сообщения о состоянии
- Вырезать, копировать, вставить
- Закладки
- HTML-диалоги
- Управление окнами, несколько браузеров
окна - Настройки, сервис и пользовательский интерфейс
- Печать
- Взаимодействие JavaScript с приложением
- Найти текст
- Плагины
Имглиб
- Интеграция в кодовую базу Mozilla
XPCOM
- Сборка MAC (5/15)
- Проверка Unix (5/15)
- Land XPCOM на наконечнике (5/15)
Макет страницы портала BAM — BizTalk Server
Редактировать
Твиттер
Фейсбук
Эл. адрес
- Статья
- 2 минуты на чтение
Страница портала BAM размещена в следующих трех фреймах:
Баннер
Мои просмотры
Содержание
Рамка Banner расположена в верхней части страницы портала. Рамка баннера содержит информацию о торговой марке, такую как название и логотип компании, ссылки на справку для этой страницы пользовательского интерфейса (UI) и заголовки страниц. Вы можете настроить брендинг в соответствии с потребностями вашей организации. Дополнительные сведения о настройке фирменной информации в баннере см. в разделе Настройка конфигурации портала BAM.
Мои представления
Рамка Мои представления находится в левой части страницы портала. Мои представления показывают пользователям все представления, для которых им были предоставлены разрешения. Пользователи могут развернуть любое представление, чтобы увидеть функции, доступные им для этого представления. Если представления не отображаются, то либо представления не были созданы (задача, обычно выполняемая бизнес-аналитиком), либо пользователю не были предоставлены разрешения (задача, обычно выполняемая администратором).
В каждом представлении есть три задачи, которые вы можете выполнять в этом представлении:
Поиск активности : Позволяет создавать запросы и оповещения на основе активности.
Агрегации : позволяет просматривать агрегированные данные и создавать оповещения на основе итогов в диаграмме сводной таблицы.
Alert Manager : Позволяет создавать, редактировать, просматривать и подписываться на оповещения.
Примечание
При выборе Диспетчера предупреждений в окне Мои представления вы можете редактировать только существующее предупреждение.