2005 год... Классам блоков мы добавили префиксы (b-, c-, g-), чтобы отличать их от внутренних классов...
Исторически они появились в переходный период для того, чтобы отличать новый код, написаный по БЭМ, от старого. Со временем мы от них отказались.https://ru.bem.info/forum/158/ и https://ru.bem.info/forum/806/
Иногда к именам блоков могут добавляться различные префиксы.
Часто слышу, как разработчики говорят «БЭМ не нужен, ведь есть CSS-модули». Это не так.
Корень этого заблуждения кроется в том, что люди воспринимают БЭМ как CSS-методологию. На самом деле БЭМ это набор универсальных принципов, которые можно применять независимо от используемых технологий, будь то CSS, Sass, HTML, JavaScript или React. БЭМ решает множество задач, в число которых входят именование CSS-классов, подход к разделению интерфейса на независимые части и изоляция стилей для этих независимых частей.
CSS-модули это инструмент, который решает только проблему изоляции стилей. Все остальные проблемы остаются нерешёнными: вам всё ещё нужны какие-то правила для разделения интерфейса на независимые части и всё ещё нужно придумывать названия классов. Поэтому CSS-модули можно и нужно применять вместе с БЭМом.
Эволюция выглядит так:/* Классический БЭМ с длинными именами классов для обеспечения изоляции */ .shop-cart-button {} .shop-cart-button_size_small {} .shop-cart-button_size_large {} /* CSS-модули с неограниченной свободой творчества в именах классов */ .button {} .small {} .large {} /* или */ .button {} .is-small {} .is-large {} /* или */ .button {} .size-small {} .size-large {} /* БЭМ и CSS-модули */ .button {} .button_size_small {} .button_size_large {}
Сразу отвечу на вопрос «а чем плох пример с классами .button, .small и .large?». Он плох тем, что классы .small и .large сами по себе не несут информации о том, к чему они относятся. Нельзя понять, стилизуют ли они отдельный элемент или описывают состояние существующего элемента. Также такие названия классов рано или поздно снова приведут вас к проблеме уникальности имён. Например, вы пишете стили для модального окна. Вам нужно стилизовать полупрозрачный оверлей поверх страницы и само модальное окно. Оба этих элемента могут быть в двух состояниях: виден или скрыт. Кажется, что класс .visible отлично подходит, но проблема в том, что для оверлея и для окна этот класс должен содержать разные стили. Можно придумать костыль в виде селекторов .overlay.visible и .window.visible, но это именно костыль, потому что вы увеличиваете специфичность. С БЭМом всё просто и без ненужного роста специфичности: .overlay_visible и .window_visible.
...стилизовать немножко иначе...
2005 год... Классам блоков мы добавили префиксы (b-, c-, g-), чтобы отличать их от внутренних классов...
Исторически они появились в переходный период для того, чтобы отличать новый код, написаный по БЭМ, от старого. Со временем мы от них отказались.https://ru.bem.info/forum/158/ и https://ru.bem.info/forum/806/
Иногда к именам блоков могут добавляться различные префиксы.
<div class="myBlock i-bem" data-bem='{"myBlock":{"param": "val"}}'>
...
</div>modules.define('myBlock', ['i-bem-dom'], function (provide, bemDom) {
provide(bemDom.declBlock(this.name, /* методы экземпляра */ {
onSetMod: {
'js': {
'inited': function () {
this.domElem[0].innerHTML = this.__self.parseParams(this.params);
}
}
}
}, /* статические методы */ {
parseParams: function (params) {
return '<pre>' + JSON.stringify(params, null, ' ') + '</pre>';
}
}
));
});header_logotype_link и header_logotype_image модификаторы блока («ключ-значение», если следовать Соглашение по именованию), а используются как самостоятельные единицы, их задача отражать модификацию именно блока: <section class="header header_logotype_image">, но данном случае будет мало смысла.<!-- .header -->
<section class="header">
<div class="container">
<div class="header__top">
<div class="header__logotype">
<a href="#" class="link link_type_header">
<img src="_tmp/logotype.png" alt="Casino" class="image image_type_header">
</a>
</div>
</div>
</div>
</section>
<!-- /.header -->.header {
&__top {}
&__logotype {}
}
.link {
&_type {
&_header {}
}
}
.image {
&_type {
&_header {}
}
}<!-- .header -->
<section class="header">
<div class="container">
<div class="header__top">
<div class="header__logotype">
<a href="#" class="header__link link">
<img src="_tmp/logotype.png" alt="Casino" class="header__image image">
</a>
</div>
</div>
</div>
</section>
<!-- /.header -->.header {
&__top {}
&__logotype {}
&__link {}
&__image {}
}
.link {}
.image {}.container--parallax {} можно учитывать его наличие в реализации всех элементов блока .container--parallax .container__title {}....каскад уместен, чтобы менять элементы в зависимости от состояния блока... Вкладывание элементов в элементы и другие тонкости
.container__title--parallax {} мы сужаем область действия модификации только на элемент.<div class="mdl-card mdl-card--theme-demo mdl-card mdl-shadow--2dp"/>var data = [
{
'text': 'BEM — BEM Easy Makeup',
'url': 'https://ru.bem.info/',
},
];
var template = {
tag: 'a',
class: 'button button_theme_islands button_size_xl',
href: '${url}',
children: [
{
tag: 'span',
class: 'icon icon_social_twitter',
},
{
tag: 'span',
class: 'button__text',
html: '${text}',
},
]
};
document.body.innerHTML = json2html.transform( data, template );