Забей

Документацию от Яндекса надо читать по диагонали

Давным-давно не работал с БЭМ, но если мне не изменяет память, то основная задача блока — нести смысловую нагрузку по поводу того, что он в себе несёт, и как его переиспользовать. Ниже в документации, вот здесь, есть вот такой пример кода:

<!-- Блок `header` -->
<header class="header">
    <button class="button header__button">...</button>
</header>

.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    /* Рамка */
}
.header__button {
    margin: 30px;               /* Отступ */
    position: relative;
}

Где у нас внешняя геометрия задаётся уже в стилях элемента. Объясняется это следующим образом:

В данном примере внешняя геометрия и позиционирование блока button задана через элемент header__button. Блок button не специфицирует никакие отступы и может быть легко переиспользован в любом месте.

С дополнительным пояснением:

<!-- Блок `footer` -->
<footer class="footer">
    <button class="button">...</button>
</footer>

БЭМ ‒ это антипаттерн, а яндекс говноконтора в которую берут по блату

В чём антипаттерность?

В этом:

<button class="button__error">Click Me!</button>

Вместо человеческого:

<button class="btn error">Click Me!</button>

Во втором случае мы можем создать универсальный класс .error:

.error { color: #fff; background: red; }

И применять его к кнопкам, snackbar’ам и т.д, а по БЭМу, т.е. по-петушинному нужно налепить кучу классов (btn__error, snackbar__error) и т.д.

по-петушинному

Не торописьписьпись такие выводы делать. Как цсс парсится знаешь?

нужно налепить кучу классов

Только в том случае, если они нужны.

Нет, я не адепт какой-то одной херни, делаю и так и так, где нужно.

А вот ты — адепт, и это проблема (твоя).

Адепты - это бэмодебилы на самокатах. Мне не нужна эта богомерзкая срань у меня есть scss.

И применять его к кнопкам, snackbar’ам и т.д

А к text-message применить этот самый error?

у меня есть scss

это вообще ортогонально

Во втором случае мы можем создать универсальный класс .error:

Это тебе в твоём пту рассказали? Ну дак это полная херня. Подход достойный бутстрап-макаки низшего пошиба.

И применять его к кнопкам, snackbar’ам и т.д

В твоих фантазиях. Ты перепутал реальность и пару трюков в говнелибе, о которой тебе в ПТУ рассказали.

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

И вот очередной гений увидел где-то что-то, перепастил, свял хелворд и побежал срывать покровы. Ничего не поняв.

а по БЭМу, т.е. по-петушинному нужно налепить кучу классов (btn__error, snackbar__error) и т.д.

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

Бэмовец-смузихлеб на самокате обиделся?

Во втором случае мы можем создать универсальный класс .error

Вот кучу раз такое слышал, и почему-то всегда дело доходило до аналога кода у Bootstrap (oh the irony, он на SCSS), в котором можно наблюдать примерно следующее:

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
  }
}

и

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

ну, в общем, и так далее, и так пять мажорных версий по кругу.

Но-но! С Царём разговариваешь!

И да, он во всём прав.

Я, кстат, так и не увидел: как всё-таки предлагается сделать .error, чтобы он подходил и к .button, и к .text-message? Кнопочка у нас по дизайну красная с белым текстом, а сообщение об ошибке — красным текстом на прозрачном фоне.

и почему-то всегда дело доходило до аналога кода у Bootstrap

Только этот код порождает множество классов-модификаторов в БЭМ-стиле: .alert-primary, .alert-warning, .alert-danger и т.д.

О чём и речь.

тсарь любил поней и кресты, а я люблю змей и свитки

Плюсую этого регистранта.

Нахера этот бэм, когда есть и другие методологии css, ничем не хуже. На тот же boostrap гляньте, там нет бэм и всё прекрасно

И какая же в бутстрапе методология?

Бэмы, бутстрапы, пляска вприсядку… Пишите на голом CSS с подключением головы™. Всё остальное это мишура, которая так или иначе будет вам мешаться.

Блок должен отвечать только за то что у него внутри

Пример:

<div class="page">
  <div class="page__item-1 item-1"></div>
  <div class="page__item-2 item-2"></div>
  <div class="page__item_3 item-3"></div>
</div>

Если допустим блок item-1 нужно с позиционировать каким то особым образом, то это должно быть прописано в стилях блока page. item-1 не должен ничего знать про то куда и как его поместят. Поэтому padding и border принадлежат item-1, а вот margin или position: absolute должны быть вынесены в родительский контекст.