БЭМ

[Shift-Web]

Вопрос не совсем в тему_:

А я за то, чтобы вешать класс на каждый тег, к которому идет обращение.

Ты видимо еще никогда не сталкивался, когда тебе нужно было поменять, например уровень заголовков, заменить спан на ссылку (и на оборот), перенести этот блок вооон туда. Добавить в тот блок плашечку. Ну и так далее. Сайт имеет тенденцию развиваться и меняться. Соответственно меняется и разметка.

Если давать каждому тегу класс, как это будет влиять на загрузку файла?

Я пока не понимаю каким образом осуществляется структуризация сайта браузером, для классов создается какая-то таблица, или они загружаются по мере встрече их в коде, или еще как-то?

Давать каждому тегу класс -- это дилетантство и плюсы весьма сомнительные.

[exessqd1]

Документ обновился до версии 0.25

Обновился раздел практика

exessqd1,

Дружище, так ты ответишь мне на вопрос или нет?

Зачем использовать в полной мере БЭМ на обычных сайтах? НЕ крупных порталах.

NeoMurderer и ceil100 ваши высказывания это и есть бред "Не нравится, потому что громоздко", "километровые названия это бред"

Сам давно поглядываю в сторону БЭМ, но вот есть такой вопрос: у меня по специфике работы надо делать сайты максимально быстро, насколько увеличится время изначальной верстки? Если первоначальная концепция сайта меняется, скажем, до 3 раз в неделю, всего сайт может меняться от 2-3 до 10 раз, начиная с мелких изменений, заканчивая 80% переделки сайта, насколько легко мне будет менять структуру при таком подходе?

Даешь конкретные примеры!

Я к тому, что не стоит брать БЭМ за догму, не стоит не видеть ничего вокруг и использовать эту технику в полном объёме в своих проектах, особенно в малометражных, если этого не требует ситуация.

Можно и "даже" нужно использовать его правильно и исходить от задачи и объёма сайта. На проектах, которые ты один раз сверстал и забыл или раз сверстал и возвращаешься к нему редко, вполне подойдёт мой подход.

Добавился раздел вопрос-ответ.

[Gaspode]

Тоже давно в эту сторону поглядываю. Спасибо, что напомнили) Новый проект сейчас начинаю, попробую заюзать эту радость.

[zSpx]

exessqd1, пожалуйста, сделайте навигацию. Это же сума сойти можно, пока нужную инфу найдешь.

[psywalker]

exessqd1,

Какой смысл использовать БЭМ на обычных проектах?

Использование БЭМ на обычных проектах дает те же преимущества что и на больших проектах.

Такие как:

* Готовая библиотека решений

* Повышение скорости разработки.

* Повышение качества кода

* Повышение скорости отрисовки страницы

* Меньше рутинной работы.

* Легкое внесение изменений

Использование БЭМ метода на обычном проекте сильно увеличит время разработки.

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

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

Ты можешь мне просто объяснить, зачем мне на проекте, состоящим из 5 страниц внедрять твой БЭМ в полном объеме? Да и вообще зачем?

Просто смотри, какие аргументы Я тебе приведу.

* Готовая библиотека решений

Нахера она мне на маленьком проекте? Зачем мне супер продуманные, неразбиваемые элементы на простом проекте, где я сверстал качественно и без БЭМ-а и забыл?

* Повышение скорости разработки.

О какой разработке идёт речь? Я делаю вёрстку один, и вполне справляюсь со своим делом. Если бы делал по БЭМ-у, то скорость разработки была бы хуже, много лишнего. На моём хомяке, совершенно ненужного.

* Повышение качества кода

Ну это вообще прикол. Какое качество? Ты о чём? О десятке вложенных элементов в один элемент, ради ненужного мне кросса?? Или ты о вездесущих непонятных классах??

В чём качество на моём хомяке даст твой БЭМ?

* Повышение скорости отрисовки страницы

Что ты заладил одно и тоже...повышение скорости, повышение скорости... Какая нафиг скорость может почусвоваться на простом хомяке? В миллисекундах? И из-за этого я должен БЭМ-иться?

* Меньше рутинной работы.

А по-моему больше всё таки)

* Легкое внесение изменений

Абсолютно легко вношу изменения, знаю, где что лежит, за что отвечает и так же соблюдена независимость и прочие вещи, только более всё щидящие.

Всё, что увидел, это слепой фанатизм. Извини, но уже 100% факты на лицо.

С удовольствием послушаю обратное, только не упрямое утверждение одного и того же, а адекватное мнение.

[Ялекс]

exessqd1,

Какой смысл использовать БЭМ на обычных проектах?

Использование БЭМ на обычных проектах дает те же преимущества что и на больших проектах.

Такие как:

* Готовая библиотека решений

* Повышение скорости разработки.

* Повышение качества кода

* Повышение скорости отрисовки страницы

* Меньше рутинной работы.

* Легкое внесение изменений

Использование БЭМ метода на обычном проекте сильно увеличит время разработки.

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

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

Ты можешь мне просто объяснить, зачем мне на проекте, состоящим из 5 страниц внедрять твой БЭМ в полном объеме? Да и вообще зачем?

Просто смотри, какие аргументы Я тебе приведу.

* Готовая библиотека решений

Нахера она мне на маленьком проекте? Зачем мне супер продуманные, неразбиваемые элементы на простом проекте, где я сверстал качественно и без БЭМ-а и забыл?

* Повышение скорости разработки.

О какой разработке идёт речь? Я делаю вёрстку один, и вполне справляюсь со своим делом. Если бы делал по БЭМ-у, то скорость разработки была бы хуже, много лишнего. На моём хомяке, совершенно ненужного.

* Повышение качества кода

Ну это вообще прикол. Какое качество? Ты о чём? О десятке вложенных элементов в один элемент, ради ненужного мне кросса?? Или ты о вездесущих непонятных классах??

В чём качество на моём хомяке даст твой БЭМ?

* Повышение скорости отрисовки страницы

Что ты заладил одно и тоже...повышение скорости, повышение скорости... Какая нафиг скорость может почусвоваться на простом хомяке? В миллисекундах? И из-за этого я должен БЭМ-иться?

* Меньше рутинной работы.

А по-моему больше всё таки)

* Легкое внесение изменений

Абсолютно легко вношу изменения, знаю, где что лежит, за что отвечает и так же соблюдена независимость и прочие вещи, только более всё щидящие.

Всё, что увидел, это слепой фанатизм. Извини, но уже 100% факты на лицо.

С удовольствием послушаю обратное, только не упрямое утверждение одного и того же, а адекватное мнение.

Нет, ну на больших проектах 1000+ страниц с кучей блочков и разной ерунды — это может действительно быть полезным.

Хотя, я больше склоняюсь к мнению, что архитектура такого проекта изначально кривовата, если приходится использовать блочные нагромождения.

[sigma77]

Вопрос не совсем в тему_:

Если давать каждому тегу класс, как это будет влиять на загрузку файла?

Я пока не понимаю каким образом осуществляется структуризация сайта браузером, для классов создается какая-то таблица, или они загружаются по мере встрече их в коде, или еще как-то?

Селектор по классу отработают, чем селекторы тегов. Другой вопрос, что на небольших проектах эта разница не очень заметна.

Могу ошибаться, но вначале загружается html-код полностью, а потом уже идет обработка объявлений в css (справа на лево). Т.е. в объявлении .class p {...} в начале находятся все элементы p, а потом уже из них выбираются те, у которые являются потомками элементов .class

[psywalker]

Ялекс,

Нет, ну на больших проектах 1000+ страниц с кучей блочков и разной ерунды — это может действительно быть полезным.

Дык я и не спорю. Я про обычный хомяк спрашивал.

Вопрос не совсем в тему_:

Если давать каждому тегу класс, как это будет влиять на загрузку файла?

Я пока не понимаю каким образом осуществляется структуризация сайта браузером, для классов создается какая-то таблица, или они загружаются по мере встрече их в коде, или еще как-то?

Селектор по классу отработают, чем селекторы тегов. Другой вопрос, что на небольших проектах эта разница не очень заметна.

Могу ошибаться, но вначале загружается html-код полностью, а потом уже идет обработка объявлений в css (справа на лево). Т.е. в объявлении .class p {...} в начале находятся все элементы p, а потом уже из них выбираются те, у которые являются потомками элементов .class

Оксан, а ты чё сама думаешь про фанатизм товарища?

[sigma77]

Оксан, а ты чё сама думаешь про фанатизм товарища?

Я думаю:

1. Любой фанатизм и перегибы в одну сторону - плохо.

2. Любой идей надо "переболеть". Тогда из этого можно сделать выводы и вынести для себя полезные приёмы. Т.е. убедиться на собственном опыте в полезности/бесполезности каких-то приёмах. Вспомни себя в отношении тех же списков, емов

Короче нормально всё

Здравое зерно в БЭМе есть и если кому-то удобно им пользоваться, почему нет.

[psywalker]

Оксан, а ты чё сама думаешь про фанатизм товарища?

Я думаю:

1. Любой фанатизм и перегибы в одну сторону - плохо.

2. Любой идей надо "переболеть". Тогда из этого можно сделать выводы и вынести для себя полезные приёмы. Т.е. убедиться на собственном опыте в полезности/бесполезности каких-то приёмах. Вспомни себя в отношении тех же списков, емов

Короче нормально всё

Здравое зерно в БЭМе есть и если кому-то удобно им пользоваться, почему нет.

Не спорю, подруга. Полностью с тобой согласен. Но ты понимаешь, в чём дело, я ж ведь не со зла докапываюсь, я же ведь сам хочу мудрее стать, а мне всё тычат и тычат свои пункты, ничего не объясняя Я может после НЕфанатиских ответов сам приду к этому БЭМ-у и буду его везде тыкать, но мне не хотят объяснять и всё тут.

Просто пока по факту я вижу, что все опытные камрады соглашаются со мной, что на обычных проектах БЭМ то этот особо и не нужен, оказывается, а человек мне другое доказывает, вот я и пытаюсь понять истину

[Shift-Web]

Вот ещё фишка. Gzip обладает чудодейственным средством(как и любой другой архиватор) собирать в словари все повторения. Грубо говоря, повторив 50 раз border-radius: 1px 28px 13px 88px; для разных селекторов результирующий размер затронет только распаковывающийся сорц и в меньшей степени раздует объем реально передаваемых данных. Для больших проектов, где потенциальное число повторений реально высоко -- это скажется ещё меньше.

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

p.s.: вообще тема как-то сложновата. я бы очень хотел знать как браузер перебирает селекторы, есть ли там вообще какой-то препроцесс и другие хитрые примочки. вообще должны быть, ведь частью процессорной логики является устройство предсказания ветвлейний и smart-ass штуковины. было бы разумно предположить, что браузер делали не дураки(правильный браузер а так да ... что то сказать утвердительно трудно, да и ни к чему

Edited October 21, 2011 by Shift-Web

[Justnewone]

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

Но если есть еще разработчики - то системы удобнее чем БЭМ и аналоги пока еще не придумано. У нее низкий порог входа, не такой как, например, у XSLT-подобных, простая интеграция с прочими системами оптимизации разработки типа sass.

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

Есть и недостатки. Времени на лаконичное описание функционала блока в классе уходит немало, но все это с лихвой окупается в результате. Идеальных систем нет, БЭМ - первая ласточка, наверняка будут системы и попроще когда нибудь, но не сейчас, пока есть всякие недобраузеры, для которых надо создавать "х-костыль-для-ие".

[exessqd1]

Версия 0.28

psywalker, обновлен раздел вопрос-ответ

По просьбам трудящихся добавлена навигация.

[exessqd1]

Обновлено до версии 0.35

Добавлена большая часть теории.

http://bemclub.in/

Со следующим обновлением будет добавлена библиотека блоков.

[mishka]

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

А за статьи спасибо, но приведи сайт в удобный вид.

[Svatov]

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

[mishka]

если сделать не полотно, а табы - то последовательность не пострадает.

Можно и переключатели табов на фикседе повесить, и внизу контента каждого таба добавить линку перехода на следующий таб.

[Justnewone]

навигацию надо открывать сразу и не закрывать ее.

[lexxcode]

Старая навигация была лучше, сейчас она у меня в 17" не помещается в высоту.

[Nanto]

Оксан, а ты чё сама думаешь про фанатизм товарища?

Я думаю:

1. Любой фанатизм и перегибы в одну сторону - плохо.

2. Любой идей надо "переболеть". Тогда из этого можно сделать выводы и вынести для себя полезные приёмы. Т.е. убедиться на собственном опыте в полезности/бесполезности каких-то приёмах. Вспомни себя в отношении тех же списков, емов

Короче нормально всё

Здравое зерно в БЭМе есть и если кому-то удобно им пользоваться, почему нет.

Не спорю, подруга. Полностью с тобой согласен. Но ты понимаешь, в чём дело, я ж ведь не со зла докапываюсь, я же ведь сам хочу мудрее стать, а мне всё тычат и тычат свои пункты, ничего не объясняя Я может после НЕфанатиских ответов сам приду к этому БЭМ-у и буду его везде тыкать, но мне не хотят объяснять и всё тут.

Просто пока по факту я вижу, что все опытные камрады соглашаются со мной, что на обычных проектах БЭМ то этот особо и не нужен, оказывается, а человек мне другое доказывает, вот я и пытаюсь понять истину

Я Вам больше скажу - он и на больших проектах не нужен!

[Great Rash]

Скажите это Яндексу.

[Justnewone]

У яндекса БЭМ, так скажем, выстрадан, ну по крайней мере с их слов, быть может они хотели бы что-то иное, но имеют это и радуются

[Nanto]

Яндекс - крупный проект?

И с их "минималистичной" вёрсткой вполне... То-то автор упирает на ПЕРЕМЕЩЕНИЕ блоков (по сути вся вёрстка Яндекса); но обычно менеджер не просит переместит блок, а просит перелопатить все стили в этом блоке (шрифт другой, отступы изменить, картинки добавить частично и т.д.) - чем тут полезен БЭМ? Перенавешивать все классы? Менять все правила для конкретного блока? Думаю всё же второе... И БЭМ тут никак не помощник...

[Justnewone]

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

[Nanto]

Не господа - теоретизировать, конечно, хорошо! Но только тут тоже не лохи сидят... Могу рассказать о реальной практике работы с крупными проектами, и как там всё строится через ж...! А в теории всё конечно красиво выходит, угу... Спецификации CSS и HTML тоже по началу строгими и стройными казались, а во что вылилось?

Что забавно - минисуют люди, которые не вполне себе представляют функционирование крупного проекта!

Ну-ну...

Ещё понравились слова про "железобетонную вёрстку" - в крупном проекте такой не бывает в принципе!