Я провел некоторое время с Яндекса и BEM, и я знаю, что эта методология работает для больших проектов.Яндекс использует BEM развивать CSS и JavaScript компонентов;Яндекс также оптимизирует шаблоны и отслеживает зависимости в BEM, развивается BEM утилиты, поддерживает код эксперименты и исследования в поле.По большому счету, эти инвестиции окупятся, и позволяет развивать Яндекс сотни своих услуг быстрее .

Сказал бы меньше команд выгоду от BEM?Я не был уверен.BEM является уровень абстракции, предложил с другими инструментами и технологиями.Небольшой гибкой команда перехода на полный стек BEM будет под вопросом.Может идея — подход сам по себе — быть полезно

Мне пришлось пересмотреть этот вопрос, когда моя карьера в последнее время взял меня из Яндекса Deltamethod, стартапа среднего размера в Берлине.Облицовка амбициозные планы развития, мы решили попробовать BEM в меньшем масштабе.Мы хотели, чтобы те же преимущества, что Яндекс получает от BEM: обмен код, живой стиль руководства, масштабируемость, быстрое развитие . Мы также хотели, чтобы наши набор инструментов и модернизировать существующую базу кода постепенно, а не начинать с нуля .

В течение некоторого времени, мы сосредоточились на архитектуре и основах, пытаясь аспекты BEM по одному, оценивая результаты, то двигаться вперед.Мы продолжаем записывать идеи, принципы, полезные советы и короткие учебники.Я теперь убежден, что МГЭ относится к малым проектам.Я записал мои выводы, в случае, если вы найдете их полезными.Давайте начнем с рассмотрения основ .

BEM 101

В то время как семантика считается основой веб-разработки, различные интерфейсные технологии не один и тот же семантическую модель.HTML современного приложения в основном DIV суп.CSS сам по себе не дает никаких структурированный модель вообще.Высокопоставленные компоненты JavaScript использовать абстракции, которые не всегда связаны со стилями или разметки.На уровне UX, интерфейсы описаны в терминах, которые не имеют ничего общего с техническими реализациями.Введите BEM, единую семантическую модель для разметки, стилей, код и UX.Давайте поближе .

Blocks

Блок независимая организация с собственным meaning, который представляет собой кусок интерфейса на странице .

Примеры блоков включают в себя:

• Рубрика
• Кнопки
• Меню навигации .

Чтобы определить блок, вы дать ему уникальное имя и указать его семантику.Несколько экземпляров одного и того же определения блока (например, различных кнопок или нескольких меню) может существовать в интерфейсе .

Любой веб-интерфейс может быть представлен в виде иерархической коллекции блоков.Простейший представление само по себе (как метки блоков) HTML структура, но это бесполезно, потому что семантически HTML был разработан для структурированного текста, не веб-приложений .

Elements

Элемент часть block, привязаны к нему семантически и функционально.Это не имеет смысла вне блока он принадлежит.Не все блоки имеют элементы .

Примеры элементов включают в себя:

• Меню навигации (блок), который содержит пункты меню;
• Таблица (блок), который содержит ряды, ячейки и заголовки .

Элементы имеют имена, также, и подобные элементы в блоке (например, клеток в сетке или элементов в списке) идут с тем же именем.Элементы семантическое entities и не совсем такой же, как HTML макета;Комплекс HTML структура может представлять только один элемент .

Modifiers

Модификаторы флаги установлены на блоках или элементов;они определяют свойства или состояния.Они могут быть логическое (например, visible: true или false) пары или ключ-значение (size: large, medium, small) — несколько похожа на HTML атрибуты, но не совсем то же самое.Несколько модификаторы позволили на одном пункте, если они представляют различные свойства .

Блоки и DOM

Как вы работаете с BEM в то же время с помощью HTML?Вы делаете это картографических DOM узлов в BEM лиц, использующих именования .

BEM использует имена класса CSS, чтобы обозначить блоки, элементы и модификаторы.Блоки, элементы или модификаторы не может претендовать на “исключительное право собственности” на DOM узлов.Один ДОМ узел может содержать несколько блоков.Узел может быть элементом в одном блоке и (одновременно) в контейнере для другого блока .

ДОМ узел используется повторно провести более одной BEM лицо называется Пожалуйста, обратите внимание, что это всего лишь особенность удобства: только “BEM примесь.”объединить вещи, которые могут быть объединены — не превратить смесь в беспорядке .

BEM Tree

Последовательно разметки документа с BEM лиц, от корня блока (т.е. <body> или даже <html>) до самых сокровенных блоков, вы формируете семантическую накладку к существующей структуре DOM в.Это наложение называется дерево BEM .

BEM дерево дает вам возможность манипулировать весь документ в BEM точки последовательно, ориентируясь по семантике, а не на реализации DOM конкретных .

Создание первой Move

Вы могли бы думать, “Я дам BEM попробовать.Как начать свой проект миграции на BEM?Могу ли я сделать это постепенно? “Конечно.Давайте начнем с определения некоторых блоков.Мы рассмотрим только семантику;мы будем продолжать с конкретными технологиями (например, CSS и JavaScript) позже на .

Как вы помните, автономный вещь может быть блок.В качестве примера, заголовки документа блоки.Они идут без внутренних элементов, но их уровни (сверху вниз, наиболее до глубины), может быть определена как ключ-значение модификаторов .

Если вам нужно больше уровней позже, определить более модификаторов.Я бы сказал, что HTML4 ошибся с <h1> к <h6>.Он сделал различные блоки (теги) о том, что должно было просто свойство модификатор.HTML5 пытается исправить это с секционирования элементов, но поддержка браузера отстает .

Например, мы получаем следующее:

BLOCK heading
MOD level: alpha, beta, gamma

В качестве второго примера, управления вводом веб-формы можно рассматривать как блоки (включая кнопки).HTML не получить его именно здесь либо.На этот раз, это разные вещи (текст входа, радио-кнопки, флажки) были объединены под же <input> тег, в то время как другие (казалось бы, одного и того же происхождения) были определены отдельные теги (<select> 39 ~ и |).Другие вещи, такие как <label> и самовнушение datalist, должны быть (опционально) элементы этих блоков, потому что они несут мало смысла нет самостоятельно .

Давайте посмотрим, если мы можем это исправить:

BLOCK text-input
MOD multiline
MOD disabled
  ELEMENT text-field
  ELEMENT label

Существенной особенностью текстового ввода является его способность принимать обычный текст.Когда нам нужно, чтобы это было многострочный, ничего не меняется семантически — вот почему multiline всего модификатор.На уровне HTML, это представлено различными разметки по техническим причинам, что также хорошо, потому что мы только определение семантики, а не реализацию.textfield тег сам по себе является элементом, и label еще один элемент;позже, мы, возможно, потребуется другие элементы, такие как значок статуса, сообщения об ошибке или заполнителя самовнушения .

BLOCK checkbox
  ELEMENT tick-box
  ELEMENT label

BLOCK radio
  ELEMENT radio-button
  ELEMENT label

Эти два блока довольно проста.Тем не менее, <label> это элемент, а “родной” <input> теги элементов, слишком .

BLOCK select
MOD disabled
MOD multiple
  ELEMENT optgroup
  ELEMENT option
    MOD disabled
	MOD selected

Выберите коробки на самом деле не нужно этикетки, и все остальное, здесь более или менее похож на нормального выберите блок управления.Технически, мы можем использовать уже существующий <select> тег со всеми его структуры.Заметим, что и select Блок и его option элемент есть disabled модификатор.Эти differentмодификаторы: первая отключает всю контроль, в то время как вторая (будучи прекрасным примером модификатора элемента) отключает только индивидуальный option 0 | .__

Попробуйте найти больше примеров блоков в ваших веб-проектов.Классификация вещей в соответствии с BEM требует некоторой практики.Не стесняйтесь поделиться своими выводами, или задать команду BEM свой questions ³ !

Пусть Ваши CSS Выскажитесь Loud

Возможно, вы слышали много о BEM как способ оптимизации CSS и интересно, как это работает

Как уже упоминалось, BEM использует имена класса CSS для хранения информации о блоках, элементов и модификаторов.С помощью простого именования, BEM учит ваш CSS говорить, и это добавляет значение, что делает его проще, быстрее, более масштабируемой и легче поддерживать .

BEM Соглашения об именах для CSS

Вот предпосылки:

• Держите имена блоков, элементов и модификаторов коротких и семантической .
• Используйте только латинские буквы, цифры и тире .
• Не используйте подчеркивание (_), которые защищены, как “разделитель” персонажи .

Блок контейнеры получить CSS класс префикса и имени блока:

.b-heading
.b-text-input

Это b- префикс выступает за “блок” и по умолчанию во многих реализациях BEM.Вы можете использовать свой собственный — просто держать его коротким.Приставки являются обязательными, но они эмулировать долгожданный имен CSS .__ 0 (и пропавших без вести!) |

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

.b-text-input__label
.b-text-input__text-field

Имена элементов не отражают структуры блока.Независимо от вложенных уровнях, это всегда только имя блока и имя элемента (так, никогда не .b-block__elem1__elem2) .

Модификаторы принадлежат блока или элемента.Их класс CSS является имя класса их «хозяина», один подчеркивания и имя модификатора:

.b-text-input_disabled
.b-select__option_selected

Для “логическое” модификатора, этого достаточно.Некоторые модификаторы, однако, пар ключ-значение с более чем одним возможным значением.Используйте другой подчеркивания, чтобы разделить значения:

.b-heading_level_alpha

Классы Множитель используются вместе с блок-элемент и класса, вот так:

<div class="b-heading b-heading_level_alpha">BEM</div>

Почему выбрать BEM CSS над другими Approaches

Один класс, чтобы управлять ими All

CSS иногда во многом зависит от структуры — если изменить структуру, вы нарушаете CSS.С BEM, вы можете оставить имена тегов и идентификаторы с вашего CSS полностью, используя имена только класса.В основном, это освобождает вас от структурных зависимостей .

Специфика проблемы Solved

Большие куски CSS трудно поддерживать, потому что они продолжают переосмысление себя непредсказуемо .

Эта проблема называется CSS специфика.Оригинальный проблема в том, чтои имена тегов и элемент идентификаторы изменение специфичности селектора таким образом, что если вы полагаетесь на наследование (наиболее распространенная вещь, чтобы ожидать от CSS), то вы можете только переопределить его селекторов же или более высокой избирательностью.Проекты BEM наименее пострадавших от этой проблемы.Давайте посмотрим, почему .

Давайте говорить у вас есть таблица с этими правилами стиль:

td.data { background-color: white }
td.summary  { background-color: yellow }

Тем не менее, в другом компоненте, необходимо переопределить фон конкретной ячейки:

.final-summary { background-color: green }

Это не будет работать, потому что tag.class всегда имеет более высокую специфичность, чем просто .class .

Вы бы добавить имя тега правилу, чтобы сделать его работу:

td.final-summary { background-color: green }

Из BEM предоставляет уникальные имена классов для большинства стилей, вы будет зависеть только от того, правил .

! До свидания Каскад

Вложенные CSS селекторы не достаточно быстро в старых браузерах и может создать непредвиденные переопределения, которые нарушают стили других элементов.Устранение много каскада из CSS можно с BEM.Как это возможно, и почему это важно?Не каскад supposed быть там?Разве это не “С” в CSS)

Как вы знаете, каждый класс BEM CSS является уникальным и самостоятельно sufficient.Это не зависит от тегов или идентификаторов, а также различные блоки никогда не делиться имена классов.Вот почему вы должны только один селектор имя класса, чтобы сделать следующее:

• Стиль Блок-контейнер,
• Стиль любой элемент блока,
• Добавить дополнительные и переопределения стиля с модификатором .

Это охватывает большинство ваших потребностей моделирования, все только с одной класса selector.Таким образом, это в основном о одноклассных селекторов сейчас, и они очень быстро.Чтобы применить селектор, браузер начинает с начальной (широкой) набора элементов (как правило, определяется самой правой части селектора), а затем постепенно уменьшает набор по не применяя другие части, пока только соответствие элементы остаются.Чем больше шагов, необходимых, больше времени занимает, поэтому вряд ли можно бить одной селекторов класса скорости .

CSS редко узким местом на небольших страниц, но правила CSS должны быть повторно с каждым документа оплавления.Таким образом, когда ваш проект растет, все будет работать медленнее в какой-то момент.По юзабилити науки, 250 миллисекунд предел восприятия для быстрее ваши селекторы, больше места вы должны маневрировать, чтобы сохранить, что “молниеносно” по отношению к пользователям .

Таким образом, нет каскад ?!Ну, почти.В некоторых случаях, возможно, потребуется два названия класса в — например, когда блок модификатор влияет отдельные элементы:

.b-text-input_disabled .b-text-input__label {
   display: none;
}

Приятно то, что любое правило, что пересматривает этот, скорее всего, зависеть от другого модификатора, который означает, что специфика еще же и только порядок имеет правило (из-за унифицированных семантики!).Конечно, мы можем придумать больше случаев, которые требуют еще больше каскадирование (внутренний элемент зависимостей, вложенные модификаторы и т.д.).В то время как методология позволяет BEMчто вы вряд ли когда-нибудь нужно в реальном коде .

Абсолютно независимый Blocks

Если блоки зависит от стилей друг друга, как мы выражаем, что в CSS?Ответ, они не должны.Каждый блок должен содержать все стили, необходимые для ее представления.Накладные расходы минимальны, но это гарантирует, что вы можете свободно перемещать блоки в пределах страницы или даже между проектами без дополнительных зависимостей.Избегайте всего проекта CSS сброс по той же причине .

Это не относится к элементам, потому что они гарантированно остаться в родительской блока и, таким образом, наследует блок стили соответственно .

Альтернативная BEM Именование Conventions

Количество альтернативной BEM существуют именования.Какой мы должны использовать?”Официальный” именования BEM для CSS не единственно возможным. Николя Галлахер однажды proposed ⁴ некоторые улучшения, и другие усыновителей, тоже.Одна из идей заключается в использовании атрибутов представляют модификаторы, и CSS префиксы не “стандартизированный” на всех .

Большое преимущество синтаксиса, предложенного командой за BEM является то, что это один поддерживается в с открытым исходным кодом инструменты распределенных Яндексом, которые вы могли бы найти под рукой какой-то момент.В конце концов, это то, что методологию значение, не именования;если вы решите использовать другое соглашение, просто убедитесь, что вы делаете это по причине .

Семантическая Java-BEM-ориентированной Code

Многие издатели и авторы рассматривают BEM как именования только для CSS, но это приводит лишь половину выгоды для проекта.Методология BEM была разработана, чтобы исправить (т.е. polyfill) не-семантические структуры DOM на всех уровнях (HTML, CSS, JavaScript, шаблонов и UX дизайн), подобно тому, как JQuery “фиксирует” сломанные интерфейсы DOM.HTML был разработан как язык разметки, но мы используем его для создания наиболее интерактивные интерфейсы вокру …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров