UK
Форум

Методологія

Інструментарій

Платформа

Часті питання

Виникли питання по БЕМ? Ми допоможемо швидко знайти відповіді.

Чому БЕМ?

Блоки та елементи

Модифікатори і мікси

CSS

JavaScript

У мене інше питання

Якщо ви не знайшли відповідь на своє запитання, зв'яжіться з нами на форумі.

У чому відмінність БЕМ від OOCSS, AMCSS, SMACSS, SUITCSS?

У чому різниця між БЕМ і Web Components?

Підтримка браузерів

Інкапсуляція

Робота шаблонів

Замість імпорту HTML — складання

Замість Custom Elements — абстракція над DOM-деревом

У чому різниця між БЕМ і Bootstrap?

Bootstrap — це вільний набір зверстаних блоків для створення сайтів та веб-додатків.

БЕМ — це методологія, що дозволяє:

Також існує ряд бібліотек з відкритим вихідним кодом:

Коли створювати блок, коли — елемент?

Методологія БЕМ не встановлює чітких правил створення блоків і елементів. Багато чого залежить від конкретних реалізацій та особистих уподобань розробника. Вибирайте те, що підходить саме вам, враховуючи рекомендації.

Як змінити зовнішній вигляд блоку?

Зовнішній вигляд блоку можна змінити за допомогою модифікаторів або міксів.

Використовуйте модифікатори

Якщо існує ймовірність переиспользовать блок у даному оформленні.

Використовуйте мікси

Якщо блок має специфічне оформлення тільки для даного оточення і не буде переиспользован на проекті.

Детальніше про застосування міксів і модифікаторів читайте у розділі Коли створювати модифікатор, коли — мікс?.

Навіщо в іменах модифікаторів і елементів вказувати ім'я блоку?

Ім'я блоку в іменах модифікаторів та елементів:

Навіщо створювати окремі директорії і файли для кожного блоку і технології?

Для зручності розробки і підтримки проекту файлову структуру БЕМ-проекту поділяють на вкладені директорії і файли.

Ви можете дотримуватися рекомендованої структури проекту або використовувати будь-яку альтернативну:

Успадковують елементи блоку його CSS-властивості?

Так. Механізм спадкування CSS-властивостей у БЕМ нічим не відрізняється від звичного спадкування.

Щоб однаково оформити всі елементи блоку, доцільно задати CSS-правила безпосередньо блоку.

Щоб оформити елементи по-різному, CSS-правила визначають безпосередньо для кожного елемента. Що виникли при цьому повторів у виводі коді можна уникнути за допомогою CSS-оптимізатора.

Чому не варто створювати блоки-обгортки?

Абстрактні обгортки не мають ніякого сенсу, так як завдання, які вони вирішують, реалізуються з допомогою міксів і додаткових елементів блоку.

Детальніше читайте у розділі HTML БЕМ.

Чому не варто створювати елементи елементів (block__elem1__elem2)?

Наявність елементів елементів обмежує можливість змінювати внутрішню структуру блоку. Елементи можна поміняти місцями, видалити або додати без коригування існуючого коду.

Детальніше читайте у розділі Швидкий старт.

Коли створювати модифікатор, коли — мікс?

Створюйте модифікатор

Якщо вам потрібна реалізація може використовуватися повторно і не залежить від реалізації інших компонентів сторінки. Наприклад, блок select має модифікатори: hovered, pressed, disabled, focused, opened.

Модифікатори блоку select

Створюйте мікс

Якщо вам потрібна реалізація потрібно тільки для даного оточення і в даному виді точно не буде переиспользована на проекті.

Наприклад, в більшості випадків створюється мікс, якщо:

Коли створювати булевий модифікатор, коли — модифікатор «ключ-значення»?

Створюйте булевий модифікатор

Якщо важливо тільки наявність або відсутність модифікатора у блоку, а його значення несуттєво. Наприклад, модифікатор, що описує стан «вимкнено»: disabled.

Приклад

<div class="button button_disabled">...</div>

Створюйте модифікатор виду «ключ-значення»

Якщо станів у блоку може бути кілька. Наприклад, для опису розмірів блоку можна використовувати модифікатор size з допустимими значеннями s, m, l.

Приклад

<div class="button button_size_s">...</div>
<div class="button button_size_m">...</div>

Як вибрати ім'я модифікатора?

Вибирайте імена модифікаторів, спираючись на семантику, а не на описувані їм CSS-властивості.

Приклад

<!-- Невдале ім'я модифікатора -->
<button class="button button_background_yellow">...</button>
<!-- Вдале ім'я модифікатора -->
<button class="button button_view_action">...</button>

Ім'я модифікатора button_background_yellow невдалий, тому що:

Як зробити глобальні модифікатори для блоків?

У БЕМ відсутнє поняття глобальних модифікаторів, так як будь-модифікатора містить ім'я блоку або елемента.

Якщо потрібно винести CSS властивість за межі одного блоку і застосовувати його до різних БЕМ-сутностей в проекті, необхідно створювати окремий блок, реалізований в технології CSS. Після чого поєднати реалізацію різних блоків з допомогою міксів.

Детальніше читайте у розділі Стилізація груп блоків.

Чому не можна писати ім'я модифікатора блоку в імені елемента (block_mod__elem)?

Елемент — складова частина блоку, а не модифікатора блоку. Таким чином, тільки ім'я блоку може задавати простір імен для елементів.

Це важливо, тому що:

Як адаптувати сайт до різних пристроїв?

Існує кілька способів змінювати розмітку сторінки на основі ширини вікна браузера:

В обох випадках необхідно визначити контрольні точки (breakpoints), умови, при яких розкладка сайту змінюється з однієї на іншу.

Media Queries

Файлова структура:

common.blocks/
    button/
        button.css # CSS-реалізація кнопки

CSS-реалізація:

@media (max-width: 767px) {
    .button {
    left: 0;
    }
}

@media (max-width: 479px) {
    .button {
    right: 0;
    }
}

Примітка Імена блоків повинні бути достатньо загальними, для того щоб його можна було використати більш ніж з однією метою. Не варто називати блок sidebar-left, якщо при зміні ширини екрана, його позиція зміниться на right.

Перемикання модифікатора

Файлова структура:

common.blocks/
    button/
        _position/
            button_position_left.css
            button_position_right.css
        button.js                         # JS-реалізація кнопки

button_position_left.css:

.button_position_left {
    left: 0;
}

button_position_right.css:

.button_position_right {
    right: 0;
}

Зміна CSS-класів на DOM-сайті відбувається за допомогою JavaScript.

Детальніше читайте у розділі Перемикання модификаторов.

Можна поєднувати теги і класи в селекторі?

Поєднання тега і класу в селекторі підвищує специфічність CSS-правил. Методологія БЕМ не рекомендує поєднувати теги і класи в селекторі.

Детальніше читайте у розділі Суміщення тега і класу в селекторі.

Можна використовувати вкладені селектори?

Вкладені селектори збільшують зв'язаність коду і роблять його повторне використання неможливим. Методологія БЕМ допускає використання таких селекторів, але рекомендує звести їх до мінімуму.

Детальніше читайте у розділі Вкладені селектори.

Можна використовувати комбіновані селектори?

Об'єднані селектори мають більш високу специфічність CSS-правил, ніж поодинокі. Успішність перевизначення таких селекторів сильно прив'язана до порядку їх оголошення. Методологія БЕМ не рекомендує використовувати комбіновані селектори.

Детальніше читайте у розділі Об'єднані селектори.

Можна використовувати селектори по користувальницьких тегів?

В HTML блоки можуть виражатися за допомогою користувальницьких елементів HTML (Custom Elements) з метою:

Методологія БЕМ за поліпшення семантики веб-сторінок, але не рекомендує відмовлятися від селекторів за класами на користь користувальницьких тегів. У разі такої заміни класи можна буде використовувати тільки для модифікаторів.

Приклад

HTML-реалізація:

<icon-twitter class="icon_social_twitter">...</icon-twitter>

CSS-реалізація:

icon-twitter {}
.icon_social_twitter {}

У такому підході існує ряд обмежень:

Чому не варто робити загальний скид стилів (reset)?

На блоки не повинні впливати CSS-правила, створені для всієї сторінки. Це порушує їх незалежність і ускладнює повторне використання.

Загальний скид стилів по суті реалізується з допомогою (#Як зробити-глобальні-модифікатори-для-блоків), які в більшості випадків пишуться до селекторам на тег, що небажано робити у БЕМ-проекті.

Чому не варто писати block_mod замість block block_mod?

Якщо залишити тільки клас модифікатора без вказівки класу самого блоку/елемента, то всі базові CSS-властивості блоку/елемента необхідно буде визначити в модифікаторі.

Модифікатор визначає стан блоку/елемента, який може бути змінено під час виконання скрипта JavaScript. Таким чином, копіювати базові CSS-властивості блоку доведеться в усі його модифікатори.

Приклад

<div class="button_size_m button_theme_islands button_type_submit">
    <div class="button__text">...</div>
</div>

Примітка. Поєднання декількох модифікаторів на одному і тому ж DOM-сайті призведе до дублювання коду, що реалізує базову функціональність (логіку і стилі) блоку.

В яких випадках потрібно створювати допоміжні блоки?

Методологія БЕМ не встановлює чітких правил створення блоків-хелперів. Багато чого залежить від конкретних реалізацій та особистих уподобань розробника. Якщо такий блок необхідний, то можна скористатися міксом.

Прикладом допоміжного блоку в bem-core може служити блок clearfix, а в bem-components — z-index-group.

Навіщо зовнішню геометрію і позиціонування задавати через батьківський блок?

Щоб компонент залишався незалежним, CSS-властивості, які перешкодять його переиспользовать в іншому оточенні (наприклад, margin і position), задають через батьківський блок.

Детальніше читайте у розділі Зовнішня геометрія і позиціонування

Навіщо потрібен i-bem.js якщо є jQuery?

i-bem.js не призначений для заміни фреймворку загального призначення, такого як jQuery.

i-bem.js дозволяє:

doc-rating:rate
Повідомити про помилку на Гітхабі або поправити за допомогою prose.io.