Именование классов в БЭМ

В тестовом задании попросили применить одну из методологий вёрстки, остановился на БЭМ. Раньше не любил его за страшное именование классов, сейчас решил вникнуть. В целом интересно и толково, а при небольшой кастомизации и смотреться стало приятнее, но есть несколько вопросов:

1. Допустим, есть у меня блок, который для определённых задач внезапно нужно обернуть враппером. Как его именовать? Называть основным именно его? А если исходно обёртка не была нужна и вдруг понадобилась? Добавлять новый элемент внутрь и переписывать css?
2. Зачем у модификаторов такие длинные имена? Очевидно, что они модифицируют весьма конкретный элемент, почему не ограничиться классом вроде ._state-active? Неужели .menu__item.menu__item_state-active лучше, чем .menu__item.active?
3. Как и где располагать и хаки для старых браузеров?
  • Вопрос задан
  • 10836 просмотров
Пригласить эксперта
Ответы на вопрос 5
infinius
@infinius
1. Внутри блока создавать block__wrapper, всё верно. Кто-то практикует всякие модификаторы контекста .m-textcolor_gray, но это же как раз то, от чего они сами и пытаются уйти: каскад.
2. Это помогает смешивать разные БЭМ-сущности на одной HTML-ноде.
3. Про хаки приличное решение (для стайлуса) предложил Роман Комаров.

Советую выбрать что-то менее строгое, если вы не в мэйлру устраиваетесь.
Ответ написан
Комментировать
@daydiff
1. Просто обернуть отдельным враппером, не нужно рушить структуру блока и переписывать код.

2. > Неужели .menu__item.menu__item_state-active лучше, чем .menu__item.active
Ни первый, ни второй варианты не верны с точки зрения БЭМ. Основная идея БЭМ — независимые блоки и скорость, ради которой и избавляются от каскада.
Поэтому верно будет:

.menu__item {… }
.menu__item_state-active {… }

Просто .active неверно, потому что либо будет пересекаться с другими стилями, либо придется использовать каскад.

3. В отдельных файлах вестимо.
Ответ написан
mekegi
@mekegi
1. ИМХО я бы переписал стили, чтобы внешний элемент был всегда основным.

2.Неужели .menu__item.menu__item_state-active лучше, чем .menu__item.active?
Это для совместимости с кодом который не в БЭМ. Например класс active уже может использоваться, и стили для него уже прописаны, а если назвать класс «blockname__active» то такого элемента с таким классом нигде больше быть не должно, и конфликтов никаких не будет. В идеале независимо от того куда вставили блок и какие стили уже применены к странице, блок должен выглядеть одинаково.

3. Все необходимое должно быть в одном месте. Хаки прописывать либо в том же файле со стилями, либо в той же папке где и файлик со стилями создать отдельные файлы с хаками, добавляя префиксы с названием браузера и версии к имени основного файла.
Ответ написан
safright
@safright
Все просто — БЭМ придуман яндексом для одновременного поддержания туевой хучи достаточно однотипных (с т.з. верстки) проектов. Плюс используется генератор для этих монструозных классов, а сами они предполагаются очень независимыми от контейнеров. От этого возрастает переносимость и контролируемость всей конструкции.
Если у вас нет туевой хучи однотипных проектов — БЭМ не лучший выбор.
Ответ написан
qfox
@qfox
Ответы есть у меня
daydiff все верно заметил. Немного дополню.
(1) — При чем вы можете обернуть как элемент в блок, так и блок в элемент. Проще первое, т.е. .menu>.menu__content, но возможно и наоборот. Методология ничего не запрещает, но частенько крайне интенсивно рекомендует, поскольку её разработчики собаку много на чем съели.
С другой стороны, я не понимаю почему вам придется переписывать css? Даже если добавите какой-то враппер элемент, который пойдет внутри блока на всю его ширину/высоту, то допишите стили чисто для него, в крайнем случае перенесите ему стили блока, а блоку допишите нужные.

(2) — Чтобы не было пересечений между элементами разных блоков и состояниями разных элементов/блоков, на которые кто-то захочет повесить js обработчики или стили.

(3) — Если сборка страниц/бандов делается инструментами, то в папке блока рядом с остальными: blockname.ie*.css. Если руками — то как удобнее, сложно знать ваше окружение.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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