Ребят, подскажите кто что думает о методологии верстки БЭМ. Это уже стандарт среди многих верстальщиков практически, но меня интересует в чем преимущества данного подхода?
Я лично использую самый упрощенный вариант БЭМа — просто верстаю блоками. Например:
HTML:
<div class="person">
<div class="hand">
...
</div>
<div class="leg">
</div>
</div>
CSS:
.person .hand {...}
.person .leg {...}
А где тут у вас БЭМ? Вроде бы как обычный код. ;)
На сколько мне известно, технология БЭМ имеет смысл в больших проектах.
Я не использую. Мало того, был случай когда просили переделать БЭМ верстку не большого проекта в человеческий вид ))
Ну в моем случае блок — это ‘person’, а ‘leg’ и ‘hand’ — элементы блока
К каждому блоку и элементу можно применить модификатор, и будет что нить типа ‘person modified-margin’
Если уж БЭМ то ваш код должен выглядеть так:
<div class="person"> <div class="person_hand"> ... </div> <div class="person_leg"> ... </div> </div>.person {...} .person_hand{...} .person_leg {...}Мое мнение: если сравнивать с автомобилестроением то БЭМ это большой конвеер. Если вы работаете над большим проектом в комманде нескольких верстальщиков — то есть необходимость работать по единым правилам, как вариант БЭМ. Иначе, я не вижу смысла его использовать: куча ограничений в написании кода, и громоздкие избыточные классы.
Как раз БЭМ и придумался для того, чтобы в css не было таких конструкций:
.person .hand {...}В данной методологии как раз предполагается схема «1 тег — 1 класс». Для чего это нужно? Например, если вдруг код
<div class="person"> <div class="hand"> ... </div> <div class="leg"> </div> </div>задумаете превратить в такой:
<div class="hand"> <div class="person"> ... </div> <div class="leg"> </div> </div>чтобы у вас не поломались стили в исходном css.
Мне кажется странной боязнь вложенных классов.
А пример который вы привели — не понимаю зачем такое делать
Не знаю, насколько плотно вы занимаетесь версткой и занимались ли поддержкой сайтов, которые сверстали — в любой момент программист может каким угодно образом изменить верстку, что даже может произойти так, как в моем примере. Очень часто с таким встречался и встречаюсь. И чтобы после того, как вы сверстали страницу, человек, который в дальнейшем будет работать с вашей версткой — не плевался, что вы прописали в стилях, что один блок должен быть обязательно внутри другого, чтобы у него сработали определенные стили — а в примере из топика — .hand должен быть всегда внутри .person — даже чтобы тупо добавить блок .hand еще куда-то на странице, нужно будет тащить за собой блок .person, тем самым замусоривая верстку лишней разметкой.
Если программист меняет разметку как ему вздумается, без понимания последствий — лучше поменять программиста, а не верстку. Надо поменять верстку — я поменяю.
Я делаю разметку такой что нет смысла ТАК менять. Также я стараюсь предвидеть возможные изменения и учесть в верстке.
А насчет разбираться в чужой верстке и не плеваться — БЭМ не поможет криворукому верстальщику сверстать так чтоб другой человек легко разобрался.
Да, вы правы конечно. Но есть много всяких но: вы можете делать верстку типовой страницы, не зная, какими будут другие страницы, после этого верстка попадает к программисту, который не может связаться с вами, но ему нужно встроить вашу верстку в движок, донастроить страницы, которые будут содержать в себе другие блоки и элементы, либо потом окажется, что нужно поменять расположение блоков, что-то убрать или добавить — и вот тут все узкие места верстки сразу будут видны. Хорошо, если просто встречаются двойные селекторы типа .person .head, а когда верстальщик вместо классов использует теги, типа такого: .header .menu ul li или что-то подобное, вот тут и начинается тот ад, от которого БЭМ частично спасает. Понятно, что всего не учтешь, но такие очевидные моменты сразу всплывают при использовании каскада.
Кстати, расскажите, взаимодействуете ли вы с программистом? Если да, то насколько часто, какие проблемы приходится решать? Поддерживаете ли дальше проекты, которые используют вашу верстку? Просто интересно.
Я внештатный сотрудник Новосибирской студии. У них в штате только дизайнеры и программисты. Иногда требуется доверстать, страницы, но ни разу не было проблем у программистов с готовой версткой. Я спрашивал у программистов, какие есть пожелания к верстке, может что не так делаю — все ОК.
Иногда при работе с другими программерами бывали трудности, особенно в связи с их желаним использовать таблицы и тег br.
Не во всех проектах требуется поддержка, в основном в тех, где я кроме верстки делал весь сайт на CMS. Иногда, если найдут баг в верстке — исправляю
Грубо сказано, но БЭМ это:
Нет селектора кроме класса .
Нет вложенных селекторов — всё определяется одним селектором класса (одноуровневая структура селекторов). БЭМ конечно, хорош для сапорта средних и больших проекто, но я лично склонюсь больше к техники многослойного CSS.. Вот небольшой доклад . https://vimeo.com/60204943
Посмотрел доклад — очень хороший подход! Мне он на данный момент больше импонирует, чем БЭМ, к которому обязательно нужны инструменты.
Спасибо за ссылку
Всегда пожалуйста!
Думаю стоит опубликовать это видео с докладом в ленте на главной. Я это сделаю, надеюсь вы не против. )
Конечно нет.. Оно в свободном доступе.