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

Question

[darkside]

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

1. Допустим, есть у меня блок, который для определённых задач внезапно нужно обернуть враппером. Как его именовать? Называть основным именно его? А если исходно обёртка не была нужна и вдруг понадобилась? Добавлять новый элемент внутрь и переписывать css?
2. Зачем у модификаторов такие длинные имена? Очевидно, что они модифицируют весьма конкретный элемент, почему не ограничиться классом вроде ._state-active? Неужели .menu__item.menu__item_state-active лучше, чем .menu__item.active?
3. Как и где располагать и хаки для старых браузеров?

Answer 1

[infinius]

1. Внутри блока создавать block__wrapper, всё верно. Кто-то практикует всякие модификаторы контекста .m-textcolor_gray, но это же как раз то, от чего они сами и пытаются уйти: каскад.
2. Это помогает смешивать разные БЭМ-сущности на одной HTML-ноде.
3. Про хаки приличное решение (для стайлуса) предложил Роман Комаров.

Советую выбрать что-то менее строгое, если вы не в мэйлру устраиваетесь.

Answer 2

[Arsen]

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

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

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

Comments

[Алексей Ярошевич]

По (2) это у вас одно и то же, только первое конфликтовать не будет. Сравнение некорректно.
Нужно так: .menu__item_state_active или (.menu__item_active) vs .menu__item.active, — т.е. разница 1 класс против 2, или _ вместо точки.
Но бонусом вы получаете уникальность класса состояния active для каждого элемента любого блока. Т.е. ничего нигде не поедет по недосмотру.

Answer 3

[safright]

Все просто — БЭМ придуман яндексом для одновременного поддержания туевой хучи достаточно однотипных (с т.з. верстки) проектов. Плюс используется генератор для этих монструозных классов, а сами они предполагаются очень независимыми от контейнеров. От этого возрастает переносимость и контролируемость всей конструкции.
Если у вас нет туевой хучи однотипных проектов — БЭМ не лучший выбор.

Comments

[safright]

По сути вопросов:
1. Оставлять основным его, с враппером работать отдельно. Идея БЭМ по своей сути — компонентная.
2. Удобнее для человека и на одном проекте — просто «.active», а вот если нужно тягать один и тот же блок по 20 проектам — удобнее копипаста без вникания. Меньше пересечений имен — больше переносимость.
3. странный вопрос. На ваше усмотрение и лишь бы не путались.

[Алексей Ярошевич]

@safright .active удобнее только тем, что писать короче. Но хочешь быть хорошим разработчиком — думай о коде, а не о том, как его набирать. И если проект не сделал и забыл — то лучше использовать полные названия состояний, т.е. .menu__item_active или _state_active, потому что вернувшись к проекту через какое-то время вы просто можете забыть о той куче этих состояний, которые в проекте есть. Грабли проверены временем, слушать совет или нет — дело каждого, у нас свобода, никто никого не заставляет ;-)

Answer 4

[Алексей Ярошевич]

daydiff все верно заметил. Немного дополню.
(1) — При чем вы можете обернуть как элемент в блок, так и блок в элемент. Проще первое, т.е. .menu>.menu__content, но возможно и наоборот. Методология ничего не запрещает, но частенько крайне интенсивно рекомендует, поскольку её разработчики собаку много на чем съели.
С другой стороны, я не понимаю почему вам придется переписывать css? Даже если добавите какой-то враппер элемент, который пойдет внутри блока на всю его ширину/высоту, то допишите стили чисто для него, в крайнем случае перенесите ему стили блока, а блоку допишите нужные.

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

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