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.
clean-eip-attributes = "1"
удаляет только атрибуты Edit-in-place.exclude-result-prefixes
, надо исключить ненужные неймспейсы:<xsl:stylesheet version="1.0"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:date="http://exslt.org/dates-and-times"
xmlns:udt="http://umi-cms.ru/2007/UData/templates"
xmlns:umi="http://www.umi-cms.ru/TR/umi"
exclude-result-prefixes="xsl date udt umi">
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 {}
Подскажите, для чего в БЭМ т.н. "первый уровень вложенности", то есть "блок__элемент"?
Зачем весь этот цирк с двойным подчеркиванием и якобы вложенностью, но запретом на ее использование?
А для чего вводить двойное подчеркивание, если элемент может быть с указанным родителем в качестве модификатора?
Вопрос почему кодеры так активно кричат "бэм это хорошо", если достаточно было сказать "ребята, научитесь УМНО пользоваться вложенностью", дескать каждый уровень вложенности это как золото, их нельзя делать 22, максимум 2 или 3??
ну то есть - зачем каждому элементу писать модификатор, отказывая себе во вложенности, если вложенность тут очевидна?
А если делать все равно вложенность, то на какой долбаться с ней без вложенности?
Хотелось бы услышать объяснения без ссылок на "какую-то там статью про бэм" в которой те, кто сломали себе мозг, ломают его остальным.
.container--parallax {}
можно учитывать его наличие в реализации всех элементов блока .container--parallax .container__title {}
....каскад уместен, чтобы менять элементы в зависимости от состояния блока... Вкладывание элементов в элементы и другие тонкости
.container__title--parallax {}
мы сужаем область действия модификации только на элемент.{
tag : 'div',
attrs : {
id : 'anchor1',
name : 'BEM',
},
content : [
{
tag : 'div',
attrs : {
id : 'anchor2',
name : 'BEM 2',
},
content : 'BEM text'
},
]
}
<div id="anchor1" name="BEM">
<div id="anchor2" name="BEM 2">BEM text</div>
</div>
{
"content": "BEM Block!",
"title": "I am BEM"
}
block( 'someBlock' )(
def()( function () {
var data = this.ctx.data || {};
this.ctx.content = [
{ elem : 'title', content : data.title || 'Empty title' },
{ elem : 'content', content : data.content || 'Empty content' },
];
return applyNext();
} )
);
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 );