BEM: Откровения принявших веру

bem-ten-commandmentsВпервые о независимых блоках я услышал от Харисова на UAWeb’2008. Мы все сталкивались с проблемой каскада, и наверно многие приходили в итоге к стилям а-ля
.result .albums .album .buy
чтобы создать контекст и работать внутри него.

Харисов говорил всё верно и правильно, но переломать себя, понять и принять что нужно уходить от каскада (данного нам свыше авторами HTML) – огромный труд над собой.

Понять, что когда все стили на сайте сделаны независимыми за счёт детализации – это не независимые блоки. Потому что их нельзя перенести вне контекста (вот той самой длинной вложенности), им нужно создавать контекст при переносе!

Вот типичный пример неправильного кода

Типичного кода, который верстальщики считали хорошим, и к которому многие приходили независимо друг от друга (жизнь вынуждала):
independent-blocks-by-cascade

Это не BEM!
Это не независимые блоки.
Я читал все статьи, все доклады по BEM, ездил на субботники, но был слеп.

Юра Ткаченко сказал мне – «старина, я вижу тут структуру, но это не АНБ, и ничего общего с ним не имеет».

Я смотрю на это сейчас и думаю – ну блин, и правда как можно не видеть очевидного!

Если просто их скопировать – они будут без конфликтов и с дефолтным оформлением элементов. Им нужно создать (скопировать) контекст. Им нужно создать вокруг них, выше, те же самые блоки с такими же классами. Если тебе нужно перенести блок на другую страницу – тебе нужно создать такие же родительские блоки. Или нафигачить кучу бессистемных multiple classes.
Тех самых, вы их прекрасно знаете:

  • тех, без которых не работает каскад ниже,
  • тех, когда никто не знает какой и зачем нужен,
  • когда не трогают старые multiple-классы потому что боятся. И пишут новые и новые, ведь нужно перебивать специфичность!
  • когда <body class="inner single-column registration thx> – это только начало, а с выходом в продакшен энтропия увеличится.

Я был из тех кто «BEM – это классная идея, но это чересчур, так категорично не надо, надо чуть по-другому, под себя…»

И уходил от базовых правил, от тех что составляют BEM.

Нет, нельзя быть немножко беременным! BEM – это большая методология с большим выбором вариантов. Там есть и light и hard, но нельзя нарушать базовые принципы, главные из которых:

  • отсутствие стилей вне блоков
  • и нигде не описанный из-за очевидности, а надо бы! – Каскад должен использоваться только для элементов, не для блоков! Максимум каскад блоку для модификации от контекста, но это лишь когда «чуть-чуть»… и (опять это нигде не говорится) – главное – когда этот блок не будет никуда копироваться второй раз. Когда не надо будет взять «вот тот блок что модифицирован от контекста и положить ещё куда-то» и да, ещё чуть-чуть поправить. И здравствуй ад.

Мне потребовался долгий путь чтоб понять что каскад зло

Когда Виталя писал про АНБ, меня аж передёргивало (как и многих поборников семантики тогда). Я написал что

но сам не понимал насколько в точку попал.
Каскад был придуман для текста, там он хорош, а для больших сайтов – это ад, каскад больших сайтов похож на то как если бы в программировании всё писалось внутри одной функции с кучей goto.

А семантика – она может быть не только в используемых элементах, но и в именах классов. И BEM-иерархия классов – это новый уровень семантики.

Моим коллегам потребовалось 2 месяца чтоб принять BEM в сердце

И ещё чуть-чуть времени для того чтоб понять суть (тут уже я сыграл роль евангелиста).

Я выдал задачу Nov 21. 2012 – верстаем новый сайт, делаем строго в АНБ-нотации, вот доки от Яндекса – читайте.
Вначале были от них слова о том что «BEM – это огромный шаг назад», что «куда меня потом возьмут, ни на одну нормальную работу не возьмут после такого», мол только и буду уметь что каждому элементу классы задавать.

Прошло 2 месяца. И с промежутком в 5 дней я получил в скайп два сообщения от ребят, которым вместе дал верстать первый проект по канонам BEM.

«Я понял, чем так хороши независимые блоки.
И надо срочно переходить всем на этот метод вёрстки, потому что у меня тут просто ад.»
— Валера, Thursday, January 17, 2013 3:23PM

«Я понимаю прелесть АНБ
с каждой правкой по %projectName% я понимаю это все больше и больше =)»
— Паша, Tuesday, January 22, 2013 2:46PM

Важно понимать что BEM – это не bem-tools.

Это основа будущей статьи на Хабр о «BEM для атеистов», где я приведу конкретные примеры, расскажу о вопросах с которыми сталкивались при внедрении, о найденный ответах, о там как поняли как же писать код, и главное – как использовать BEM в рамках аутсорс-веб-студии, у которой не один большой проект, а куча разных, совсем не связанных, на разных движках и вёрстка нужна не на сегодня и даже не на вчера, а внезапно.

Опубликовано
В рубрике Development Отмечено

31 комментарий

  1. БЭМ — это для меня всё-таки совершенно непонятная религия. Я не вижу в чём профит.

    То, что на скриншоте («типичный пример неправильного кода») — это повод взять в руки LESS/SASS и переписать всё по-человечески, с нормальным каскадом и переменными.

  2. Для меня BEM и bem-tools (с bemjson, bemhtml) неразрывно связаны. А когда начинаешь писать js в bem-терминах, становится ясно, зачем и почему именования классов, элементов и модификаторов реализованы именно так. Я напишу об этом летом, когда закончу пару проектов в студии.

    А главный профит для меня такой: проектирование интерфейса на более высоком уровне. Именно, не верстка “как мне написать пачку div/span etc” (ассемблер) а создание блоков интерфейса (высокоуровневый язык, типа ruby/etc) и BEM как стройная и проработанная методология воплощения этого проектирования.

  3. Каскад должен использоваться только для элементов

    Если честно, не приходилось юзать каскад для элементов, за исключением модификаторов или каких-то врапперов для текста.

    1. Имеется в виду что это единственное для чего каскад вообще разрещен.
      Ну и конечно для оформления блока под вывод текста из админки/визига.

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

    Говоря об организации именно стилей, MCSS это менее строгий БЭМ или как переходной вариант для быстрорастущий проектов.

        1. Скажите, где сложность — возможно я смогу вам помочь. Самый главный вопрос: вы под windows работаете? В ней я не знаю, как все поставить, чтобы работало хорошо.
          Если нет, то постараюсь ответить на ваши вопросы.

          1. Я скачивал project-stub, я читал статьи Вареньки на Хабре, смотрел реализацию сниппета 2gis на bem.info. У меня всё получалось, я всё понимал что делаю шаг за шагом, но цельной картины стандартного workflow при работе над проектом у меня так и не возникло. При попытке сделать что-то своё сталкивался с существующими ограничениями, тупил.

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

      1. Ну насчёт порога входа, можно поспорить.
        АНБ – гораздо легче и понятней чем bemtools (и как идея и как инструмент), особенно для англоязычных разработчиков, дескать “BEM – это русский более суровый SMACSS”.

        1. Я вот поэтому и выделяю линию развития своей методологии как АНБ -> MCSS. Просто у АНБ очень мело правил в сыром виде, а в приготовленном уже разные ответвления — БЭМ, MCSS.

    1. На самом деле мы знаем с тобой верный способ перейти на сторону BEM – нужно face2face пообщаться с Харисовым :) Было бы интерестно прочитать твою историю – как ты принял BEM, имея свою методологию.

      Я не согласен что MCSS – это менее строгий БЭМ. Это скорее OOCSS “по-русски”.
      BEM – сознательный уход от каскада, а MCSS – наоборот весь на каскаде (осмысленном) и построен.

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

      2. Это верный путь понять БЭМ, я тоже открыв рот слушал о будущем БЭМ и о идеях вокруг него :) Есть еще здравый смысл, и реалии конкретных проектов.

        MCSS допускает каскад только в модификаторах, и то в достаточно строгой форме. OOCSS это 2 слова по сравнению с MCSS, после отпуска закину много обновлений в спеку, и не переделок, а именно дополнений к боле специфичным кейсам.

  5. это тред для тех, кто все еще дрочит на детали (четкие имена, правильные теги, красивая табуляция)?
    вы наверное те ребята, которые говорят, что верстка говно, если там кнопка названа каким-нибудь классом вроде .button, а не .submit.

    1. Почему “всё еще”? Интерфейсы проще не становятся, а сильно наоборот, так что я бы сказал, что для тех, _кто уже_ начал задумываться о будущем.

        1. Возможно, конечно. Как и без underscore, angularjs, rails, nodejs. Речь идет об инструментах решения задач для успешного конкурирования на рынке. Можно и сейчас разрабатывать сайт на C++, идея в том, что есть более эффективные способы.

          1. Я уже не раз говорил в сети об этом. БЭМ – хорош. Как методология. Интрусенты – ужас. Но даже при всей моей симпатии к методологии, она не является элементом успешной конкурентно-способной разработки. Увы.

  6. Офтоп: мне кажется, при вложенности более трех, нельзя ответить на коммент.

    По теме: скажите, чем ужасны инструменты? Есть один объектный минус: плохо работает в windows.

    Не хватает полноты поддержки в IDE, над этим сейчас как раз идет работа.

    “она не является элементом успешной конкурентно-способной разработки. Увы.”
    Легкость разработки и поддержки кода в условиях сильно меняющихся требований и хорошая расширяемость команды и разделения труда разве не определяют конкурентно-способность?

    1. Я сейчас думаю, как подвести всех верстальщиков, с которыми работаю, к краю пропасти и дать им возможность туда самим шагнуть, чтобы они наконец поняли, что ползать уже не модно, тем более, когда они умеют летать.
      В общем, был бы рад в hangouts или skype обсудить более детально что не так с bem-tools ;-) С @arikon уже общаюсь время от времени, но он занятой очень. Отвечает редко, да и отвлекать не хоца — он 1.0.0-финал хочет к концу года ;-)

  7. Даешь видео-подкаст “Почему стоит использовать БЭМ” в студию :)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *