@sergei026
Стремлюсь стать верстальщиком

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

Подскажите при использовании методологии БЭМ есть куча литературы касательно того чего нельзя описывать в блоках, элементах и модификаторах, а вот что именно можно описывать в блоке, элементе и модификаторе можете разъяснить?
  • Вопрос задан
  • 772 просмотра
Решения вопроса 1
werty1001
@werty1001
undefined
Все довольно просто:

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

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

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

*position, display, float, margin
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
kentuck1213
@kentuck1213
Да выкиньте этот "БЭМ"
Ответ написан
egor_arinov
@egor_arinov
Веб-разработчик
Блок
Функционально независимый компонент страницы, который может быть повторно использован. В 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 мин. К тому же там всё легко и подробно описано.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы