Что такое методология BEM?

недавно я слышал о методологии BEM.

  • В чем именно заключается использование методологии BEM ?
  • каким образом BEM делает нашу работу проще ?
  • это хорошая практика, чтобы использовать BEM ?
6
bem css css-selectors

2 ответов

BEM-это методология именования. Он означает модификатор блочных элементов, и его цель-облегчить модульность и сделать стили и классы намного проще в обслуживании.

это нелегко объяснить в ответе, но я могу дать вам основную идею.

Итак, если вы думаете о меню, то вся структура элемента / компонента будет:

блок: элемент: пункт модификатор(ы): горизонтальный, вертикаль

и, следуя стандартным соглашениям BEM, вы напишете что-то вроде этого в CSS:

html,
body {
  height: 100%;
}

.menu {
  display: block;
}

.menu__item {
  display: inline-block;
  line-height: 30px;
  width: 100px;
}

.menu--horizontal {
  width: 100%;
  height: 30px;
}

.menu--vertical {
  width: 100px;
  height: 100%;
}

.menu--horizontal .menu__item {
  border-right: 1px solid #e5e5e5;
  text-align: center;
}

.menu--vertical .menu__item {
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
}
<div class="menu menu--horizontal">
  <div class="menu__item">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

как вы видите из кода, элементы отделены от Блока двумя подчеркиваниями, а модификаторы разделены двумя тире.

теперь, если вы измените модификатор в меню --horizontal to --vertical конкретные стили модификатора будут подобраны для обоих блок и элемент внутри.

Это должен быть базовый пример, но он должен дать вам представление о том, насколько мощна эта методология, потому что она позволяет разделить любой компонент на эти основные структуры блока-элемента-модификатора, делая все легким для поддержания.

также написание этого с помощью прекомпилятора, такого как SASS, делает его еще проще (я не буду вдаваться в детали, но дать вам идею):

.menu {
  display: block;

  &__item {
    display: inline-block;
    line-height: 30px;
    width: 100px;
  }

  &--horizontal {
    width: 100%;
    height: 30px;
  }

  &--vertical {
    width: 100px;
    height: 100%;
  }
}

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

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

вот вариант использования, если вы хотите увидеть его в использовании в реальном проекте https://m.alphasights.com/how-we-use-bem-to-modularise-our-css-82a0c39463b0#.2uvxts71f

надеюсь, что это помогает :)

7

что такое BEM?

БЭМ расшифровывается как Blocks, Elements and Modifiers. Это методология, изначально задуманная российской технологической компанией Яндекс. Как следует из того же, bem metholology-это все о компонентизации вашего HTML и CSS-кода на три типа компонентов:

  • блоки: автономные сущности, которые имеют значение сами по себе. Примеры header, container, menu, checkbox & textbox

  • элементы: часть блоков, которые не имеют автономного значения и семантически привязаны к своим блокам. Примеры menu item, list item, checkbox caption & header title

  • модификаторы: флаги на блоке или элементе, используемые для изменения внешнего вида или поведения. Примеры disabled, highlighted, checked, fixed, size big & color yellow

цель BEM - держите оптимизировать читаемость, ремонтопригодность и гибкость кода CSS. Для этого необходимо применять следующие правила.

  • стили блоков никогда не зависят от других элементов на странице
  • блоки должны иметь простое, короткое имя, а не _ или - символы
  • при стилизации элементов используйте селекторы формата blockname__elementname
  • при стилизации модификаторов используйте селекторы формата blockname--modifiername и blockname__elementname--modifiername
  • элементы или блоки, которые имеют модификаторы, должны наследовать все от Блока или элемента, который он изменяет, кроме свойств, которые модификатор должен изменить

пример кода

если вы применяете BEM к своим элементам формы, ваши селекторы CSS должны выглядеть примерно так:

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

соответствующий HTML должен выглядеть примерно так:

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

следует ли использовать БЭМ?

BEM получил довольно определенную тягу среди американских и западноевропейских веб-разработчиков после того, как был популяризирован влиятельными гуру CSS, такими как Гарри Робертс. Это особенно популярно в сочетании с простые OOCSS селекторы и SMACSS (которые все на самом деле просто вариации на тех же принципах, как писать модульный CSS). И модульный CSS поставляется с довольно много преимуществ. Однако модульный CSS может быть довольно многословным, и BEM в особенно часто является весьма некрасиво.

в конце концов, все зависит от того, для чего используется ваш код и кто еще будет читать и изменять ваш код в будущем. Я бы определенно рекомендовал модульный CSS для любого проекта с большой кодовой базой и несколькими сопровождающими, но это не означает, что вам нужно идти с соглашениями об именах BEM или строго применять принципы OOCSS/SMACSS для компонентизации.

если вероятность вашего кода когда-либо была поддерживаемый разработчиками, которые уже имеют опыт работы с BEM/OOCSS/SMACSS, является значительным, вы можете выбрать одну или несколько из этих методологий и быть строгими в отношении их применения, просто потому, что это сделает сотрудничество с этими разработчиками намного проще. Если нет, есть мало преимуществ строго придерживаться любого из этих конкретных соглашений, и вы должны чувствовать себя свободно выбирать свои собственные соглашения об именах и свои собственные вариации на BEM/OOCSS/SMACSS. В конце концов, полезность любого стандарта во многом зависит от того, кто его фактически использует.

3