Верстка больше не об отдельных структур.Инструменты доступны — мы просто должны выбрать.
Чтобы сделать правильный выбор для вашего проекта, Вы должны начать с общего подхода, или methodology.Но большинство методологий были созданы крупными компаниями?Являются ли они по-прежнему полезны для небольших компаний, или нам нужно изобрести их в небольшом масштабе
Вы, наверное, уже знаете о BEM 12 1 , один из тех методов, разработанных в большой компании — а именно, Yandex 2 .BEM утверждает, что три основных лица ( b замки, e lements и m odifiers) достаточно, чтобы определить, как автору HTML и CSS, структура кода и компонентов, описания интерфейсов и масштаб проекта дов отрасли услуги .
Я провел некоторое время с Яндекса и BEM, и я знаю, что эта методология работает для больших проектов.Яндекс использует BEM развивать CSS и JavaScript компонентов;Яндекс также оптимизирует шаблоны и отслеживает зависимости в BEM, разрабатывает BEM коммунальные услуги, поддерживают кодовые эксперименты и исследования на поле.По большому счету, это инвестиции окупаются и позволяет Яндекс развивать сотни своих услуг быстрее .
Сказал бы небольшие группы выгоду от BEM?Я не был уверен.BEM является уровень абстракции, предложил с другими инструментами и технологиями.Небольшой гибкой команда переходить к полной стека BEM будет под вопросом.Может идея — подход сам по себе — быть полезно
Мне пришлось пересмотреть этот вопрос, когда моя карьера в последнее время взял меня из Яндекса Deltamethod, запуск среднего размера в Берлине.Облицовка амбициозные планы развития, мы решили попробовать BEM в меньшем масштабе.Мы хотели те же преимущества, что Яндекс получает от BEM: обмен кода, живой стиль руководства, масштабируемость, быстрое развитие . Мы также хотели, чтобы наши набор инструментов и модернизировать существующую базу кода постепенно, а не начинать с нуля .
В течение некоторого времени, мы сосредоточились на архитектуре и основах, пытаясь аспекты BEM по одному, оценивая результаты, то двигаться вперед.Мы продолжаем записывать идеи, руководящие принципы, полезные советы и короткие учебники.Я теперь убежден, что BEM относится к малым проектам.Я записал мои выводы, в случае если вы найдете их полезными.Давайте начнем с рассмотрения основ .
BEM101
В то время как семантика считается основой веб-разработки, различные интерфейсные технологии не одни и те же семантическую модель.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 узлов.Один DOM узел может содержать несколько блоков.Узел может быть элементом в одном блоке и (одновременно) в контейнере для другого блока .
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> и <textarea>).Другие вещи, такие как <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 .
Попробуйте найти больше примеров блоков в ваших веб-проектов.Классификация вещей в соответствии с BEM требует некоторой практики.Не стесняйтесь поделиться своими выводами, или задать команде BEM свой questions 3 !
Let Your 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 предоставляет уникальные имена классов для большинства стилей, вы будет зависеть только от того, правил .
Bye-Bye Каскад
Вложенные CSS селекторы не достаточно быстро в старых браузерах, и может привести к непреднамеренной переопределения, которые нарушают стили других элементов.Устранение много каскада из CSS можно с BEM.Как это возможно, и почему это важно?Не каскад supposed быть там?Разве это не “C” в 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 4 некоторые улучшения, а также другие усыновителей, тоже.Одна из идей заключается в использовании атрибуты представляют модификаторы, и CSS префиксы не являются “стандартизированные” на всех .
Большое преимущество синтаксиса, предложенного командой за BEM является то, что это один поддерживаемый в инструментов с открытым кодом распределенных Яндексом, которые вы можете найти под рукой какой-то момент.В конце концов, методология, вот что важно, не именования;Если вы решите использовать другое соглашение, просто убедитесь, что вы делаете это по причине .
Семантическая JavaScript: BEM-ориентированной Code
Многие издатели и авторы рассматривают BEM в именах только для CSS, но приносит лишь половину выгоды для проекта.Методология BEM была разработана, чтобы исправить (т.е. polyfill) несемантических DOM структуры на всех уровнях (HTML, CSS, JavaScript, шаблонов и UX дизайн), подобно тому, как JQuery “фиксирует” сломанные API, DOM.HTML был разработан как язык разметки, но мы используем его для создания наиболее интерактивные интерфейсы вокруг.Экспериментальные усилия, такие как веб-компонентов стремимся, чтобы принести сем …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров