Что именно можно описывать в блоке, элементе и модификаторе при БЭМ?

Question

[Сергей К]

Подскажите при использовании методологии БЭМ есть куча литературы касательно того чего нельзя описывать в блоках, элементах и модификаторах, а вот что именно можно описывать в блоке, элементе и модификаторе можете разъяснить?

Comments

[Ярослав Иванов]

Да вы че документацию почитать не можете ?

[Сергей К]

Ярослав Иванов, прочитал и не нашел (кроме модификатора конечно) что можно использовать в блоке и элементе. Буду благодарен если тыкните пальцем

Answer 1

[Олег]

Все довольно просто:

блок - это независимая и самодостаточная единица, например кнопка, ссылка, логотип, весь сайт это лишь набор блоков. В стили можно писать все (кроме отступов и позиционирования*).

модификатор позволит добавить какие-то особенности блоку или элементу, для модификатора блока в стили можно писать все (кроме отступов и позиционирования*), для модификатора элемента можно все.

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

*position, display, float, margin

Comments

[Сергей К]

Благодарю очень доступно объясниили

[#FFFFFF]

А можете поподробней пояснить, почему нельзя модификатору блока указывать отступы и позиционирование? И как их тогда указывать, если это понадобится?

[Алекс Глебов]

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

[Олег]

Pyatachok,

1. Блоки нельзя позиционировать, поэтому модификаторы блока также не могут позиционировать блок.

2. Наглядный пример, есть блок логотип, нужно его разместить в шапке по центру, как это сделать, если нельзя задать margin? Для этого нужно использовать элементы родительского блока (header), микс или обертку:

// Микс блока и элемента
<a class="logo header__logo">...</a>

// Или создаем обертку
<div class="header__logo">
  <a class="logo">...</a>
</div>

.logo {
  ... базовые стили лого
}

.header__logo {
 max-width: 200px;
 margin: 0 auto;
}

[#FFFFFF]

Алекс Глебов, Олег, спасибо

[HelpSophie]

Олег, где написано, что туда входит display?

Answer 2

[Alexander]

Да выкиньте этот "БЭМ"

Comments

[Андрей Федосеев]

Дмитрий Мязин, БЭМ решает проблему копипасты из проекта в проект без слома верстки и текучки кадров, если уж совсем до корней копать. Если проблема переиспользования вашей верстки не стоит — БЭМ избыточен.

Answer 3

[Егор Аринов]

Блок
Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.
Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Элемент
Составная часть блока, которая не может использоваться в отрыве от него.
Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Модификатор
Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

А вообще прочитай "Быстрый старт" от офф. сайте: https://ru.bem.info/methodology/quick-start/
Время чтения 10 мин. К тому же там всё легко и подробно описано.

Comments

[Сергей К]

Дмитрий Мязин, это я все прочитал и не раз, но раз у Вас после прочтения есть понимания какие стили писать в блоке то поясните какие именно потому-что согласно этой документации блок представляет из себя просто название и использование стилей в нем запрещено. Так же как и элемент так как у него нужно задать только правильное название которое должно отображать смысл, а про то какие стили можно использовать не слова. Поясните пожалуйста

[Егор Аринов]

Верно в самом блока использование стилей запрещено. Элементы и модификаторы нужны лишь для логического определения для чего это написано. А сами стили уже пишутся отдельно на CSS к этим блокам
Вот пример:

<div class="offer" >
	<div class="offer-title">
		Получите индивидуальное предложение 
                    <span class="offer-title_small">на производство и поставку</span>
	</div>
</div>

.offer {
  padding-top: 63px;
  padding-bottom: 57px;
  background: grey url("../img/offer/offer-bg.jpg") center no-repeat;
  background-size: cover;
  text-align: center;
  color: #ffffff;
}

.offer-title {
  font-size: 32px;
  font-weight: 300;
}

.offer-title_small {
  margin-bottom: 20px;
  display: block;
  font-size: 26px;
  font-weight: 300;
}

[Сергей К]

Егор Аринов, что-то я не понял Вы пишите что в самом блоке использование стилей запрещено но при этом задали ему кучу стилей.

[Сергей К]

Егор Аринов, и Вы задали в блоке как он будет выглядеть за это же должен отвечать модификатор