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

Question

[warcevil]

У меня накопилось достаточно много вопросов по БЭМ и хотелось бы все уяснить. Речь пойдет не о полном стеке, а только о нейминге.

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

Во-вторых, интересно насколько по вашему мнению маленькие сайты (уровня лендингов) нуждаются в использовании этой методологии? Я просмотрел все уроки на ютуб в поисках практической верстки малых проектов на "чистом" БЭМ и там пустота! К тому же наблюдая, как верстальщик штампует лендинг за 5 минут каскадом хочется забыть о БЭМ навсегда, потому что разработка с ним гораздо дольше.

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

Answer 1

[Владимир Ио]

1. Потому что чаще используют все таки компоненты(блоки), а не элементы, А вот в составе блока уже элементы. То есть вы делаете кнопку блоком - то она может быть использована где угодно, она универсальная. Если же вы делаете кнопку в футере с анимашкой и фоткой Памеллы Андерсон, то она одна такая и может быть элементом футера, т.к. нигде более применятся не будет. А то, во что она будет вложена(может и сам футер) - блок.
2. Они нуждаются только в том случае, если вам/команде так удобнее работать. В целом, любая структурность всегда делает код более читаемым и простым. БЭМ это или другие договоренности - не важно.
3. Да из головы все берется. Если не хватает знаний - лезешь в переводчик и берешь самый коротки и понятный из вариантов.

Comments

[warcevil]

по 1 пункту это и так понятно. Я и говорю, какой смысл давать элементу название, связанное с блоком, если каскад наоборот предотвратит использование его в каком то другом месте. Получается название элементов блока и должно быть зависимо от названия блока.
и по 3 все же сложно мне как то.. вот когда у меня штук 10 секций и по сути контент там даже особого смысла не имеет.. Допустим 10 секций с преимуществами =) Как бы вы их назвали в такой ситуации? Не цифрами же их нумеровать... Это, конечно, вопрос уже больше не бэм, а вообще собственно верстки. Но просто по бэм все должно красиво быть какбэ, но на ум приходит только что то вроде secton-1,section-2 и и т.д..

[Владимир Ио]

warcevil: Так я же вам и привел пример: если вам элемент нужен для переиспользования - он автономен, если нет - вкладываете и привязываете его жестко к блоку.
10 секций с преимуществами - это как 10 постов в блоге. У них по идее один стиль оформления, И для них нужен всего 1 общий блок с вложенными элементами.
Если вы имеете ввиду 10 разных секций, то они будут чем-то отличаться: размером, тематикой, разделом, цветом, формой, функционалом - в зависимости от этого и давайте имя.

Answer 2

[Никита Кит]

Я вот так. А каждый как хочет, так и использует. По разделителям только вариантов море. По структуре тоже немало. Главное - сам смысл понимать:
1) Компоненты модуля сохраняют внешний вид при манипуляциях с разметкой в его пределах.
2) Стили позиционирования элементов и размещения отделены от стилей внешнего вида, которые лучше переносить вообще в отдельную папку и наследовать "тихим" классом (%) при наличии препроцессора.
3) Стили внешнего вида могут быть унаследованы любым компонентом любого модуля.
4) Элементы, по внешнему виду отличающиеся небольшим количеством параметров, должны наследоваться одним и тем же классом правил, но с разными модификаторами. Для этого, они и нужны.

Comments

[Александр Серый]

Что дает "$parent:&;" ? Ниже все равно обращаетесь то через амперсанд, то через $paren ? В чем смысл?

[Никита Кит]

theobroma: $parent:& сохраняет корневую обёртку родителя в переменную. Очевидно, такая конструкция нужна для 1го приведённого мной пункта

[Никита Кит]

theobroma: И, да, ещё если тебе надо переименовать модуль, рефакторинг займёт не больше минуты

Answer 3

[sgrogov]

Во-первых элементы нужны, если одних только стилей блока недостаточно. Если у вас возникает желание переиспользовать элемент блока в другом месте, значит этот элемент должен быть вынесен в отдельный блок. В идеале стили элемента имеют смысл только в контексте блока.
Во-вторых, БЭМ даёт преимущества в долгосрочной перспективе. Если вы сдадите лендинг и забудете навсегда - можно и поговнокодить, но обычно проекты (даже лендинги) некоторое время приходится поддерживать. С БЭМ не нужно каждый раз разбираться в забытом проекте и беспокоиться о том, что новые изменения могли где-то что-то сломать.
Что касается скорости разработки - используйте препроцессоры и шаблонизаторы, скорость только вырастет. Я успешно использую csssr-project-template, где связка BEM + stylus + jade мне кажется идеальной для вёрстки.
В третьих, как уже писали, используйте переводчик, если не получается придумать название. Что касается повторяющихся секций - да, нумеровать, если больше не за что зацепиться, это особенность вёрстки лендингов. Собственно и без БЭМ нумеровать придётся, если у каждой секции свои особенности.

Answer 4

[Дмитрий Христоев]

https://www.youtube.com/watch?v=vXW7w3ym8hg

Answer 5

[TwistedAndy]

Чтобы понять есть ли смысл использовать БЭМ, нужно вспомнить, что этот стек технологий создавался для больших проектов с кучей страниц и кучей разработчиков. Он решает две основные проблемы:

1) Более-менее явная изоляция блоков. Это нужно в первую очередь для того, чтобы новички при написании новой функциональности ничего не сломали в существующем проекте;
2) Вносит единую схему именования классов.

В то же время БЭМ имеет свои минусы:
1) CSS код сильно разрастается, он становится избыточным из-за изоляции блоков;
2) С длинными именами классов сложно работать программистам, это ухудшает читаемость кода и увеличивает объем страницы.

Если команда небольшая, то можно вместо всего стека БЭМ использовать несколько ключевых принципов:
1) Страница разбивается на блоки. Стили для элементов блоков прописываются с указанием класса блока;
2) Общие стили выносятся в шаблонные селекторы с %.

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

Answer 6

[Heik]

Сила БЭМ в том, что можно один раз написать библиотеку стилей и таскать ее с проекта на проект внося индивидуальные правки. А так это из кухни яндекса, когда над проектом работают несколько десятков человек и необходимо соблюдать единые правила написания кода. Верстать таким образом лендинг нерациональная трата времени.