Почему лучше верстать в соответствии с БЭМ — практические примеры

    Про БЭМ (методология написания CSS от ЯндексБлок__Элемент_Модификатор ← наиболее правильная запись расшифровки) нынче можно услышать на каждом шагу. Дело оказалось благим и покатилось по миру. Яндекс даже полез в W3C (связано это или нет — не знаю, но надеюсь, что да — [на самом деле нет]).

    Думаю многие, кто ещё не пробовал, но прочитал описание БЭМ, задаются справедливым вопросом: «какая практическая польза от всего этого действа?» На самом деле, не смотря на то самое развёрнутое описание, конкретно уловить основную «фишку» довольно сложно. Описано конечно много плюсов и общее ощущение от методологии положительное, и кажется, что вроде как и не плохо бы попробовать, но нехватает чего-то конкретного. Прямо вот примера на живом что ли. Вот у меня сайт, вот вёрстка не по БЭМ, почему я должен всё менять? Особенно, если учесть тот факт, что БЭМ в принципе отметает все селекторы кроме классов, неужто за это время столько умных мужей в W3C не осознали, что всё настолько неправильно?

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

    Немного о БЭМ


    Вкратце вся система БЭМ укладывается в 2 тезиса (принципа/правила):

    1. Нет селектора кроме класса — т.е. никаких стилей повешанных на теги, ID и прочее, только классы.
    2. Нет вложенных селекторов — т.е. никаких .class1 .class2{ display: none; }, всё определяется 1 (одним) селектором класса (плоская/одноуровневая структура стилей/селекторов). [на самом деле не всегда]

    Вот и всё. Вся остальная система — это способ выжить при таких ограничениях.

    Естественно такая компания как Яндекс не могла просто так придумать себе геморрой чтобы с ним мучиться до конца дней — для этой системы были причины и именно о них (некоторых из них, с точки зрения простого смертного) я попробую рассказать.

    Реюзабельность (повторное использование)


    Собственно всё именно из-за этого. Особенно первое правило. Но дальше на обещанных примерах.

    Пример 1

    Допустим вы заказали вёрстку на аутсорсе. Или вы вошли в проект, который существует давно и всё уже свёрстано до вас. В общем на руках типичные стили вроде:

    .content a{
      color: green;
    }
    

    и всё работает, но — добавили аяксов и решили AJAX линки в контенте делать без подчёркивания и другим цветом. Мы не можем решить эту проблему добавив класс ajax-link к аякс ссылкам — CSS так не работает. Стиль ссылки в контенте описан селектором из 2х элементов, а это больше чем наш один стиль. Поможет a.ajax-link, если будет стоять в css файле после предыдущего определения.

    Теперь предположим, что content это не класс а ID — думаю с таким тоже сталкивались не раз.

    #content a{
      color: green;
    }
    

    Чтобы «победить» эту запись предыдущий способ не поможет придётся использовать этот id — #content .ajax-link, т.к. id в документе должен быть уникален и, стало быть, его вес выше других селекторов.

    Пример 1pro

    Т.е. чтобы перебить такое:

    #buy-form fieldset .buttons input.submit{
      color: green;
    }
    

    и сделать, скажем, скруглённые углы у одной кнопки — вам нужно будет написать что-то ещё более длинное, но с использованием #buy-form.

    Пример 2

    Допустим у нас есть стили вроде таких:

    .content h1{
      font-size: 18px;
    }
    .content h1 a{
      color: green;
    }
    .content h1 a span{
      text-decoration: none;
    }
    

    И оказывается, что логическая структура страницы изменилась и h1 теперь стал h3 или вообще div, но графическое отображение при этом должно остаться прежним (юзеру — юзерово, яндексу — яндексово). Т.е. для подобного действия потребуется изменить 1 тег в HTML вёрстке и 3 стиля.

    Работа БЭМ


    Тут на передовую выходят все прелести БЭМ позволяющие использовать как природную каскадность (наследование вложенными элементами стилей родительских элементов) CSS так и возможность изменить/использовать повторно в другом окружении элементы.

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

    Думаю вы уже начинаете догатываться, что сейчас получится.

    Пример 1 и 1pro

    Согласно первому принципу имя тега не может быть селектором (для 1) также как и id (для 1pro) добавляем сюда второе правило и стиль ссылки в контенте вырождается до:

    .content__link{
      color: green;
    }
    

    Примечание: согласно нотации БЭМ Блок content содержит Элемент ссылки link их разделяют двойным подчёркиванием [и состоит из пары ключ_значение].

    По нашей легенде нам нужно внести изменения в ссылку. Т.е. модифицировать её. Для этого нужно ниже определения стиля смой ссылки .content__link в CSS записать её модификатор, допустим так:

    .content__link{
      color: green;
    }
    .content__link_type_ajax{
      color: red;
      text-decoration: none;
    }
    

    Примечание: согласно нотации БЭМ Модификатор отделяется от Элемента одиночным подчёркиванием.

    Т.е. тег будет выглядеть примерно так:

    <a class="conten__link content__link_type_ajax" href="#">Ещё сообщения</a>

    Пример 1pro выглядел бы где-то так:

    .buy-form__submit{
      color: green;
    }
    

    Минусы

    Естественно ни что не идеально и концепция БЭМ тоже. В первом случае нам придётся писать класс у каждой ссылки, что не пришлось бы делать при классическом подходе, но опыт показывает (кстати на это часто ссылаются в самом руководстве), что лучше всё же их прописать. Тем более, что сейчас HTML страницы редко когда целиком пишутся руками, так что придётся просто добавить несколько стилей в ваш движок. Ну и, конечно, всегда же есть стили по-умолчанию. Ни что не мешает прописать их в начале CSS файла (тот же сброс стилей). Главное чтоб никакой теговый селектор не был вложенным, только первый уровень и только плоская структура.

    Пример 2

    Тут уже всё очевидно, но для полноты картины — стили в БЭМ выглядели бы примерно так:

    .content-header{
      font-size: 18px;
    }
    .content-header__link{
      color: green;
    }
    .content-header__link-text{
      text-decoration: none;
    }
    


    По задачам второго примера у нас выходит, что чтобы выполнить задачу нам вообще стили трогать не надо — достаточно изменить 1 тег HTML вёрстки. Собственно в этом месте лишнее прописывание стилей становится оправданным…

    Выводы


    Немного личного опыта. Первая попытка разобраться была… первой попыткой. Я пытался понять что, зачем и куда + работа с Twitter Bootstrap и я верстал сам. Потом пошёл на другой проект где вёрстку стали давать готовую, но надо рихтовать при введении новых фишек. Вот тут я отчётливо ощутил все проблемы классических стилей. В итоге я просто стал заменять их на БЭМ по мере необходимости. Одно совершенно очевидно — кастомизировать и повторно использовать БЭМ несомненно легче. А отрыв стилей от семантики (те же теги заголовков, выделения и т.п.) позволяет менять теги не беспокоясь о внешнем виде — в большинстве случаев он не разрушится (если версталось по БЭМ полностью без учёта стилей тегов) или будет легко поправим, а значимость элементов для поисковой индексации можно будет изменять.

    Как перейти, если конечно если вы решили принять БЭМ в своё сердце.

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


    PS: Примечания в квадратных скобках добавлены на основании комментариев vithar.

    Я.Субботник в Екатеринбурге
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 285
    • +44
      Я вижу только отвратительную читабельность, низкую скорость разработки и потенциальные проблемы при поддержке БдсЭМа.
      Описанные вами преимущества с лихвой покрываются препроцессорами типа SASS и LESS.
      • 0
        Вся прелесть заключается в том что одно другому не мешает. Это просто способ записать название стиля, который избавляет от головняков с его применением. Всего лишь… Никто не мешает (наоборот, даже рекомендуют) использовать компиляторы с поддержкой переменных, функций и т.д.
        • +5
          Вы сами в статье заметили, что от головняков это не спасает, а наоборот — создаёт новые на совершенно пустом месте (пример со ссылками).
          Кроме того, существует мнение, что семантика — это не только название тега, но и совокупность его атрибутов, в том числе class и id, от которого вообще предлагают отказаться.
          • +1
            «Существует мнение» и «поддерживается стандарт» это немного разные категории. Значение тегов и микроформатов описано и официально декларируется поисковиками как поддерживаемые стандарты (см. руководство по оптимизации любого поисковика). Некоторые атрибуты тегов тоже туда относятся, но не id, class, или data-* — т.к. они изначально выступают в роли служебных элементов. Можно подозревать что поисковик придаёт повышенное значение элементу с id «warning»? Даже если так кто заставляет не использовать этот id в коде страницы? Просто не нужно использовать этот id для назначения стилей…
            • 0
              Хоть я и нахожу стандарты исключительно рекомендательными, но раз уж мы о них заговорили — прошу любить и жаловать:
              Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics).
              http://www.w3.org/TR/html5/elements.html#semantics-0
              • 0
                Простите, а я про что написал?
                • 0
                  Вы написали про поисковики:
                  Некоторые атрибуты тегов тоже туда относятся, но не id, class, или data-*

                  Я вам ответил, как это же выглядит в стандарте HTML5, а именно, что семантика — это совокупность тегов, атрибутов и их значений. И всё туда очень даже относится.
                  Поэтому, когда БЭМ лишает меня возможности писать нормальные, логичные классы, использующие каскад, когда он запрещает на идеологическом уровне мне использовать id — я нахожу в этом ухудшение семантики.
                  • 0
                    Там написано, что у каждого элемента есть назначение (смысл) и оно обрабатывается браузером/поисковиком и т.д. И id, class, или data-* также имеют свой смысл, а именно — это прикладные элементы для описания классов, идентификаторов и доп. данных для служебного пользования. Собственно даже отсюда вырастает то, что не надо использовать теги и идентификаторы для определения внешнего вида.
                    • 0
                      И, ещё раз, как это согласуется с БЭМом? Вы лично не видите явной семантической пропасти в этой идеологии?
                      • 0
                        А так, что классы — классово, а идентификатору — идентификаторово. Не должен идентификатор использоваться для описания внешнего вида, и тег не должен. Внешний вид тега должен обрабатываться браузером в соответствии с его семантическим значением. А название класса должно использоваться как название класса — для поиска по этому названию в CSS файле описания его внешнего вида — не более того. А ни как не для вычисления особой смысловой значимости этого элемента. Никто не запрещает использовать идентификатор для целей быстрого нахождения элемента в JS, просто не надо на него цеплять нюансы отображения — для этого есть классы…
                        • 0
                          В не поверите, но классы тоже не для этого. На них можно повесить стили с помощью CSS-селекторов, которые позволяют достаточно гибко выбрать элемент для применения правил. Но, так же, стили можно повесить на id или, скажем, на каждого второго члена списка. Вы вправе использовать любые селекторы для стилизации элементов, в том числе по id.

                          Я хочу сказать, что навязывание классов, как единственно-возможного способа задания стилей элементу, ущербно.
                          • 0
                            Тут Вы правы вообще во всём. www.w3.org/TR/html5/global-attributes.html#classes класс — это объявление принадлежности элемента к каким-то классам. И ещё «authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content». И класс это всего лишь один из возможных селекторов. Всё так, и об ущербности я написал в начале статьи — БЭМ это 2 принципа, а вся остальная методология — это способ выжить в этих ограничениях. Всё так и есть…

                            Однако это не меняет положения вещей — работать с БЭМ в части стилизации отображения всё равно проще (и он не отменяет ни LESS ни ID ничего другого). С ним не надо решать задачи, с ним можно просто написать то, что нужно и получить это без хитрых хаков своего же CSS.
                    • +1
                      Думаю, в рекомендации скорее говорится о том что для блока авторизации вряд ли подойдёт класс .block1, или например .news. Т.е., по этому классу можно сказать, что это за блок. По БЭМ-именованию с исключеним множества вложенностей в именовании вполне себе можно понять что это за блок и даже какое иерархическое положение он имеет.
                      • +1
                        Да, но сомнительно, что для попапа будут семантичными классы b-popupa b-popupa__without-padding b-popupa_theme_ffffff b-popupa_direction_down b-popupa_is-bem_yes i-bem b-dropdowna__popup b-dropdowna__menu b-popupa_js_inited.

                        По БЭМ-именованию с исключеним множества вложенностей в именовании вполне себе можно понять что это за блок и даже какое иерархическое положение он имеет.

                        Для таких целей придумали SASS и LESS, в которых иерархия прослеживается табуляцией, что намного читабельнее.
                        • +3
                          Это корявый БЭМ) Давайте тогда я «не_БЭМ» буду представлять как
                          .myOwnPage #myBlock div div div a {}
                          ? :)
                          • 0
                            Даже этот ужасный «каскад» (как его называют БдсЭМщики) лучше читается, чем приведённый мною «корявый» БЭМ.
                            Да и у кого учиться БЭМу, как ни у его создателей?
                            • 0
                              Так и учитесь. Есть bem.info — там всё подробно, и с хорошими примерами. Куда как лучше составлять своё мнение на чём-то более-менее существенном. Моё сложилось на множестве больших проектов, которыми занималось одновременно много человек, и на том, что те люди, что не использовали БЭМ, после них его полюбили и оценили профит.
                              • 0
                                Более существенном, чем Яндекс.Метрика? habrahabr.ru/post/151931/#comment_5158009
                                • 0
                                  Но это же HTML! Классов туда можно набить хоть миллион — HTML от этого не изменится зато изменить внешний вид элемента — элементарно и также элементарно поменять HTML не нарушая внешнего вида.

                                  С другой стороны когда у тебя вязанка контекстных селекторов то ни то, ни другое (если там участвуют теги) сделать не просто. Просто потому что сами своими руками прибили себя к этому месту на странице и этим тегам и потом только выкручиваться и переписывать.
                                  • 0
                                    Но я же про семантику! Любимый момент: b-popupa_theme_ffffff
                                    • 0
                                      Вы так ничего и не поняли…
                                      • +1
                                        ffffff — название темы, тут может быть любой удобный верстальщику идентификатор.

                                        Замените b-popupa_theme_ffffff на b-popupa_theme_white, если вам так больше нравится.

                                        Только сложно будет подбирать названия цветов, когда основным цветом темы будет какой-нибудь цвет типа #1ab3df.
                                    • 0
                                      Ну, накосячили верстальщики или разработчики.
                                      А говнокод на PHP характеризует PHP?
                              • 0
                                Да, и вы удивитесь, но с БЭМ можно использовать LESS и табуляцию :)
                                • +1
                                  <картинка c троллейбусом из хлеба/>
                                • 0
                                  Если вы так пишете БЭМ, то вы забиваете гвозди микроскопом.
                                  • +1
                                    Да, но сомнительно, что для попапа будут семантичными классы b-popupa b-popupa__without-padding b-popupa_theme_ffffff b-popupa_direction_down b-popupa_is-bem_yes i-bem b-dropdowna__popup b-dropdowna__menu b-popupa_js_inited
                                    Да, будут семантичны. Объяснить каждый класс отдельно?
                            • 0
                              Расскажите, каким, по-вашему, должно быть именование классов?
                              • 0
                                И что вас смущает, например, в:
                                .menu
                                .menu__item
                                .menu__item .link
                                ?
                                Что несемантично/сложно/непонятно?
                                • 0
                                  Конкретно этот пример — ничем не смущает.
                                  • 0
                                    ".menu__item .link" — это ведь уже не БЭМ?
                                    • 0
                                      не БЭМ
                                      • 0
                                        Почему? Блок может содержать и элементы и другие блоки.
                                        • +1
                                          В статье же «Нет вложенных селекторов — т.е. никаких .class1 .class2{ display: none; }, всё определяется 1 (одним) селектором класса (плоская/одноуровневая структура стилей/селекторов).»
                                          Выходит не ".menu__item .link" должно быть, .menu__item_link
                                          • 0
                                            В статье же «Нет вложенных селекторов — т.е. никаких .class1 .class2{ display: none; }, всё определяется 1 (одним) селектором класса (плоская/одноуровневая структура стилей/селекторов).»
                                            В статье ошибка, я ниже про это написал: habrahabr.ru/post/151931/#comment_5165248

                                            Запись ".menu__item .link" означает: блок link вложенный в элемент item блока menu.
                                          • +1
                                            Содержать может, но описывать стиль вложенного блока так всё равно нельзя. Структура CSS должна быть плоской (один и только один уровень) иначе смысл теряется…
                                            • 0
                                              А как тогда быть с модификаторами? Их нельзя применять к элементу, только к блоку, или я ошибаюсь? А если .link содержит в себе множество элементов, которые я хочу сделать элементами для блока ссылки плюс мне нужно состояние (к примеру активности) для неё? Мне эти элементы тоже привязывать к меню?)
                                              • +1
                                                Даже не знаю, что сказать и как по букве. Но если мне нужно уникальное состояние для блока — я добавлю модификатор через подчёркивание, если для элемента — я поступлю аналогично.

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

                                                .menu
                                                .menu_highlighted // особое состояние всего меню
                                                .menu__item
                                                .menu__item_hidden // особое состояние элемента меню
                                                .menu__item__link
                                                .menu__item__link_active // особое состояние ссылки меню
                                                • 0
                                                  Насколько я знаю, вот так
                                                  .menu__item__link .menu__item__link_active
                                                  совсем делать нельзя.
                                                  Может быть только один уровень вложенности (поправьте меня примером с bem.info, если я не прав).
                                                  Т.е., м.б. только отношения блок__элемент, но никак не блок__элемент__элемент.
                                                  • 0
                                                    Вот знающие люди говорят что можно и я склонен согласиться, т.к. концепцию это не рушит, а понять местонахождение поможет. Но может это стоит делать в особо непонятных случаях, я обычно все внутренние элементы вне зависимости от уровня вложенности именую как блок__элемент — чтоб не разводить демагогию в именах (опять же, может я его потом передвину и чем это лучше вложенных селекторов уже не понятно) да и их обычно в блоке не так чтобы много однотипных на разных уровнях чтоб заморачиваться. Хотя автоматические инструменты наверняка нагеренрят полный путь (я пока не пользовался)…
                                                    • 0
                                                      Не вижу явной необходимости прописывать .menu__list__item__link__icon
                                                      и не встречал такой подход где-либо + создатели, как я понял, тоже против такого (хотя я уверен, что можно модифицировать под себя всё что угодно, но эта дорога реально в ад).
                                                      • 0
                                                        Согласен, потому я так у себя не делаю. Иногда лишняя педантичность только вредит :)
                                                    • 0
                                                      Не то что бы нельзя… Печаль умножает.
                                                      • 0
                                                        Может быть только один уровень вложенности (поправьте меня примером с bem.info, если я не прав).

                                                        Т.е., м.б. только отношения блок__элемент, но никак не блок__элемент__элемент.
                                                        Да, всё верно, только один уровень вложенности, может быть только блок__элемент.
                                                        • 0
                                                          Добавлю, что речь только об именовании классов. В самом HTML вложенность одних элементов в другие может быть любой глубины.
                                                    • 0
                                                      А как тогда быть с модификаторами? Их нельзя применять к элементу, только к блоку, или я ошибаюсь?
                                                      Модификторы могут быть как у блоков, так и у элементов:

                                                      .block_mod_value
                                                      .block__elem_mod_value
                                      • +2
                                        БЭМ — это не просто способ записывать названия стиля.
                                        • +12
                                          но и попытка горстки людей навязать всем пользоваться их сомнительным корпоративным стандартом?
                                          • +1
                                            Вас кто-то что-то заставляет делать?
                                            • 0
                                              Надеюсь, что до этого не дойдет, но новость про вступление в W3C в контексте этого топика настораживает.
                                              • 0
                                                Во-первых, если они и повлияют там на что, так это с целью избежать костылей типа БЭМа. А во-вторых, там и без них достаточно «горсток людей» со своим мнением.
                                                • +1
                                                  Хорошо, я скажу подробнее:

                                                  1) По-моему, создание подобных костыльных решений как раз поощряет использование того что есть теми, кто считает, что это ущербно, вместо того, чтобы «взбунтоваться» и, действительно, взять и подкинуть нормальную, бескостыльную идею, вроде упомянутых выше less и sass.

                                                  2) Что касается самого Яндекса и участия его в развитии html/css, то я разделяю ваш оптимизм, поскольку Яндекс это не какая-то бестолковая веб-студия, а компания, собираемая действительно хорошими специалистами, о чем, в том числе, говорят их продукты, которыми я каждый день пользуюсь и остаюсь доволен. Не согласен я только в том, что этот БЭМ является чем-то таким, чем можно поделиться для пользования.
                                                  Этот набор собственных наблюдений и правил форматирования лучше использовать когда вы наедине и никто на вас не смотрит, иначе через год мы уже будем отучать людей пользоваться в CSS только классами и двойным подчеркиванием в именах, от которого нынешних программистов отучала пользоваться почти каждая книга по программированию.

                                                  Подытожу:
                                                  Если Яндекс хочет сделать что-то инновационное с CSS, то я наверняка буду рад, хотя и на данный момент особых сложностей с CSS не испытываю. Но БЭМ — это не расширение, а сужение к плоскому понятию «классы» всего объемного css, с его иерархичными `тэг -> класс -> элемент (id)`, а в сочетании с использованием двойного подчеркивания в именах и моего нежелания доломать себе глаза их считая, я твердо уверен, что это совершенно не решение испытываемой ими проблемы.
                                                  • 0
                                                    Я понял, в чем у нас с вами основа непонимания. Я считаю less и sass такими же костылями, как и БЭМ, а вы нет.
                                                    • 0
                                                      Я понял, в чем у нас с вами основа непонимания. Я считаю less и sass такими же костылями, как и БЭМ, а вы нет.
                                                      Я с вами полностью согласен. Вообще, HTML/CSS не предназначался для современного их использования, для создания web-приложений. Если бы они дизайнились сейчас с нуля именно для этого современный web был бы другим. И делать web-приложения было бы существенно проще.
                                                    • 0
                                                      двойным подчеркиванием в именах, от которого нынешних программистов отучала пользоваться почти каждая книга по программированию.
                                                      БЭМ-методология не навязывает использование подчёркиваний для отделения одних сущностей от других, мы можете использовать любые другие сепараторы для отделения имени блока от имени элемента, и модификатора от блока/элемента.

                                                      Более того, возможность использовать любые другие разделители заложена в bem-tools и это можно настраивать как для всего проекта, так и для любого уровня переопределения в нём.
                                        • +3
                                          вы украли мой коммент.
                                        • +18
                                          Названия CSS классов БЭМ весят больше чем HTML теги ))
                                          • +1
                                            Наверное это тоже можно причислить к минусам…
                                            • +2
                                              Ну и что? Большая часть там повторяющиеся фрагменты, которые хорошо сжимаются в gzip.
                                              • +4
                                                Можно использовать class mapper, как это например это сделано в Google Closure + Google Soy Templates — размер названий классов сократится до одной-двух букв. Для дебага конечно можно и не обфускейтить названия.
                                                Кроме того, названия должны быть достаточно информативны, чтобы последующий человек, читающий код, не сходил с ума пытаясь понять, что имелось ввиду. Т.е. длинные имена — не могут быть отмазкой, что так оно весит больше.

                                                Во что превращаются имена классов после маппинга вы можете увидеть напрямую в YouTube/Gmail/Analytics и другие. Причем Google старается использовать БЭМ тоже, это ОЧЕНЬ облегчает паралельную разработку проекта из тимов размером 50-100 людей. Это не по на слышке.
                                                • 0
                                                  Стоит уточнить, пока камни не полетели, это не всетаки не в чистом виде БЭМ с БЭМ нотацией, но _очень_ близко к этому.
                                                  • 0
                                                    Причины использования БЭМа Яндексом или Гуглом, в разработке собственных сервисов, предельно понятны и обоснованы.
                                                    Автор статьи же, как и верстальщики Яндекса, рекомендует применять БЭМ везде.
                                                    • +3
                                                      Ну я это предлагаю делать не потому, что люблю яндекс или бегу за всем новым. Я предлагаю это на основе личного опыта. Мне нужно править готовую вёрстку или старую вёрстку. И править БЭМ или править классическую вёрстку это две большие разницы. Правка БЭМ обычно заключается в добавлении класса, а правка классики в перелопачивании половины CSS файла…

                                                      Это взгляд с моего берега. Возможно тем кто просто верстает статику и сдаёт заказчику (у которого кто-то типа меня потом с этим всем работает) и проще налепить по быстрому 10 вложенных тегов и получить деньги, но любви к таким исполнителям у меня не прибавляется (хотя понимаю, что это мало кого волнует).
                                                      • 0
                                                        Главные принципы хорошей вёрстки — это её семантичность, последовательность и читабельность.
                                                        Использование БЭМа значительно понижает 2 принципа из трёх: семантичность и читабельность. И это относится не только к вашим примерам, где от БЭМа только классы, но и к полноценному БЭМу, который навязывает Яндекс.

                                                        От себя рекомендую посмотреть в сторону SASS + Compass и требовать вёрстку именно в них — это избавит вас от вышеописанных проблем, при этом не понижая семантику и значительно повышая последовательность с читабельностью.
                                                        • 0
                                                          1) Читабельность. Смотря на правильно свёрстанную страницу по БЭМ, можно понять место и значение элемента, просто глядя на класс в стилях:
                                                          .main-menu > .main-menu__item > .main-menu__link,
                                                          умно описывать стили элементов, используя уже написанный код"
                                                          .ico.ico_size_16.ico_map
                                                          2) Семантичность. Вам что-то мешает использовать уместные тэги в БЭМ?) Мне, и многим бывшим и нынешним коллегам — нет)
                                                          • 0
                                                            .main-menu > .main-menu__item > .main-menu__link,
                                                            .ico.ico_size_16.ico_map

                                                            Простите, насчёт читабельности не убедили. Смурфовские имена ещё никому читабельности не добавляли.

                                                            Семантика не ограничивается только тегами.
                                                            • +2
                                                              Чтож, до того как меня на прошлом месте работы не убедили попробовать — я плевался и считал это нечитаемым. Сейчас в 95% случаев с ужасом смотрю на читабельность больших проектов «не по БЭМу», часто их поддержка отнимает необоснованно много времени.
                                                              • +1
                                                                Уверяю, если бы все эти 95% были разработаны _теми же людьми_ по БЭМу — вас бы вообще вывернуло наизнанку.
                                                                • +1
                                                                  Простите, но мне кажется у вас двоих разное представдение о «читабельности» :)
                                                                  • 0
                                                                    Ну, многие, например, говорят, что стили, записанные одной строчкой, много читабельнее, чем блочные.
                                                                    Надеюсь, что только у нас двоих разное представление о читабельности.
                                                              • 0
                                                                Что вы имеете в виду когда говорите что БЭМ рушит вам семантику кода?
                                                          • 0
                                                            Есть хорошее правило на Хабре: минусуешь — аргументируй.
                                                          • +2
                                                            Главные принципы хорошей вёрстки — это её семантичность, последовательность и читабельность.
                                                            А главные принципы поточной разработки — хорошая поддерживаемость кода, возможность быстрого внесения изменений, простота передачи кода от одного человека другому и быстрый вход нового человека в команду и проект.
                                                            • 0
                                                              Если вы посмотрите внимательно, то все 3 пункта, перечисленных мною, как раз направлены на достижение указанных вами целей.
                                                    • 0
                                                      Названия CSS классов БЭМ весят больше чем HTML теги ))
                                                      Вы можете использовать jeanny для сокращения классов в своём проекте.

                                                      В Яндексе везде используется gzip и он даёт достаточно хорошее сжатие, чтобы не заморачиваться с этим.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                      • +14
                                                        Главная проблема БЭМ в том, что это велосипед. Крутой, сделанный профессионалами но велосипед. То есть продукт, в котором не учтена природа html и css, долгие годы их эволюции.
                                                        • 0
                                                          БЭМ — это не только правила записывания стилей, это инструмент, позволяющий создавать страницы, используя в качестве сущностей — не теги, а БЭМ сущности.
                                                          Например: блок List
                                                          <ul class="list">
                                                              <li class="list__item">Привет</li>
                                                              <li class="list__item">Пока</li>
                                                          </ul>
                                                          

                                                          можно, добавив один модификатор, превратить в:
                                                          
                                                          <table class="list list_type_table">
                                                            <tr>
                                                              <td class="list__item">Привет</td>
                                                              <td class="list__item">Пока</td>
                                                            </tr>
                                                          </table>
                                                          
                                                          • 0
                                                            <table style="list-style-type: circle; border: solid 1px #ffffff"> <tr> <td style="display: table-cell;">Привет</td> <td style="display: table-cell;">Пока</td> </tr> </table>
                                                            Назад в будущее?
                                                            • 0
                                                              вы в моем коде что-то подобное увидели?
                                                              • 0
                                                                Я увидел то, что можно без создания файлов стилей компилить/генерить прямо в разметке правила стилей. И их так же хорошо можно гзипануть за счет повторяющихся фрагментов. И выглядит это практически так же нативно и линейно. И конечно же это плохо. Сама мысль БЭМ может быть и не плоха, но уж очень она напоминает что-то такое, что уже давно проехали ранее, только в другой «одежке», которую я и продемонстрировал в коде комментарием выше.
                                                                • 0
                                                                  Напоминает, но тут уже писали, что, к примеру, b-popupa_theme_ffffff не обязательно задаёт только цвет — это просто название темы, в которую входит много чего. Ну и т.д.
                                                                  • +1
                                                                    в том, что вы увидели, я вижу очередной уровень семантики
                                                                    <ul class="menu">
                                                                        ...
                                                                    </ul>
                                                                    

                                                                    о чем говорит этот кусок когда? это меню, возможно, это меню в виде списка

                                                                    <ul class="menu menu_layout_horisontal menu_type_dropdown menu_theme_macosx">
                                                                        ...
                                                                    </ul>
                                                                    

                                                                    что можно сказать об этом кусе кода?
                                                                    — это меню
                                                                    — возможно в виде списка
                                                                    — это горизонтальное меню
                                                                    — в нем есть дропдауны
                                                                    — скорей всего оно похоже, на меню из mac OS x
                                                                    мне нравится, когда я могу по 1 строке html кода сказать о блоке так много
                                                                    более того, я даже могу вам сказать где на файловой структуре искать стили от каждого из классов, что в разы ускоряет работу с кодом, и не заставляет каждый раз пользоваться поиском

                                                                    для меня это тоже было странным, но сейчас я понимаю, что это удобно, и нет ничего плохо в классах — их для этого придумали :)
                                                            • +3
                                                              То есть продукт, в котором не учтена природа html и css, долгие годы их эволюции.
                                                              Поверьте, там учтена природа HTML/CSS и годы их эволюции.

                                                              И учтено так же, что HTML/CSS не предназначены для создания современных web-приложений и современных сайтов.

                                                              Создатели HTML/CSS не предполагали такого их использования и дальнейшее хаотичное развитие этих технологий академиками из W3C (в противоположность практикам) в конце 90x ничего хорошего в долгосрочное переспективе не дало.

                                                              Инициатива WHAT WG по созданию Web Applications 1.0 была хорошей, но опаздавшей на несколько лет и слишком долгой в разработке.

                                                              До создания БЭМ я много верстал, спецификации HTML и CSS были прочитаны мною много раз.

                                                              История создания БЭМ описана статьях в клубе и рассказана мной на Я.Субботнике в Минске. Поверьте, это был не быстрый и не лёгкий путь. Было много проб и ошибок, пока мы не выработали систему, которая позволяет верстать проекты так, чтобы их было легко поддерживать и развивать дальше, не превращая код в кашу.
                                                            • +21
                                                              что бы посмотреть на живом примере залез в первый попавшийся сервис яндекса, в метрику.

                                                              <div class="b-popupa b-popupa__without-padding b-popupa_theme_ffffff b-popupa_direction_down b-popupa_is-bem_yes i-bem b-dropdowna__popup b-dropdowna__menu b-popupa_js_inited">
                                                                  ...
                                                              </div>
                                                              


                                                              Это окошко, которое появляется при клике на «Счётчики».

                                                              Мне кажется если именовать классы с умом то БЭМ имеет место быть, цсс «говорящий» получается. Хотя «b-counter-popup» читается проще да и быстрее :)
                                                              • +25
                                                                Это уже какой-то back to inline styles получается.
                                                                • +2
                                                                  Не стоит пугаться, прописывается все это не руками, а специальной программой, генерирующей код исходя из заложенной логики.
                                                                  • 0
                                                                    С тем же успехом программа может inline style="..." генерировать, никто не будет пугаться.
                                                                    • 0
                                                                      Вы действительно не видите разницы между написанными выше классами и inline style?
                                                                      • 0
                                                                        Вижу, что inline style эффективнее.
                                                                        b-popupa__without-padding вместо paddind:0
                                                                        b-popupa_theme_ffffff вместо background:#ffffff

                                                                        И только не говорите, что в CSS это будет проще поменять:
                                                                        .b-popupa__without-padding { paddind: 5px }
                                                                        .b-popupa_theme_ffffff { background: #cccccc }
                                                                        • +4
                                                                          b-popupa__without-padding вместо paddind:0
                                                                          Почему вы думаете, что without-padding это padding: 0? И theme_ffffff вполне может быть с градиентами и фоновыми картинками.

                                                                          Отличие класса от inline стиля состоит в том, что ему может соответствовать разный CSS как в пределах разных страниц одного проекта, так и в пределах разных проектов.

                                                                          Ну и названия without-padding и theme_ffffff хотя и говорящие, но не самые лучшие.

                                                                          «Программировании есть две проблемы — инвалидация кешей и именование переменных» ©
                                                                • +6
                                                                  Что-то это не похоже на отделение структуры документа от представления, которое так пропагандируют последнее время. Особенно стиль ffffff.
                                                                • +2
                                                                  Мне кажется, что если есть хотя бы теоретическая возможность программно перебрать html/css/js с целью конвертировать вот этот ад в короткие уникальные имена вроде jShx¸ Hjy и т.д. стоит попробовать.
                                                                  Кстати, никто не знает подобного софта?
                                                                  • 0
                                                                    Эта возможность есть, и не теоретическая, а практическая. Google Closure + Soy Templates умеют это по дефолту.
                                                                    То что яндекс чудачит таким образом оставляя имена в чистом виде, либо недоработка, либо продукт все еще находится в стадии отладки.
                                                                    • 0
                                                                      Гляну, спасибо.
                                                                      • 0
                                                                        То что яндекс чудачит таким образом оставляя имена в чистом виде, либо недоработка, либо продукт все еще находится в стадии отладки.
                                                                        Мы минимизировали классы в выдаче поиска: clubs.ya.ru/company/replies.xml?item_no=23106

                                                                        Отказались от этого из-за всё большего количества js-кода, в котором классы могут получаться склейкой строк. После минимизации классов они получаются другими и js-код перестаёт работать.

                                                                        Чтобы избежать этого, надо всю работу с классами вести через функции, которые скрывают конечные классы, позволяя при этом работать с блоками/элементами/модификаторами.

                                                                        В этом случае до минимизации эти функции будут работать с одними классами, а после минимизации — с другими.

                                                                        Это понятно как сделать, но руки сделать это ещё не дошли, есть более приоритетные задачи.
                                                                      • +3
                                                                        Возможность есть. Но измерения показали, что после гзипования разницы между двумя документами с длинными классами и короткими нет. Поэтому мы отказались от идеи такой конвертации.
                                                                        • 0
                                                                          Ясно, спасибо, что отписались, очень интересовал этот вопрос.
                                                                    • –2
                                                                      У них так дело дойдет до:

                                                                      Нет! Без меня!
                                                                      • –2
                                                                        Вырезало:

                                                                        — Если код выше не отобразился, киньте плз cсылку на интсрукцию по вставке HTML кода в комент
                                                                    • +6
                                                                      Странно у них там все.

                                                                      Зачем нужно все это когда HTML со времен основания описывал данные, а CSS настраивал отображение этих данных.

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

                                                                      ===

                                                                      На самом деле, мне не очень нравятся наработки Яндекса в методологии верстки. Все начинается с использования движка XSL. xsl уж какой-то не очень понятный и не читабельный, может быть наверное поэтому они привыкли к этому и им такие громоздкие структуры не кажутся проблемой, но не мне.
                                                                      • +1
                                                                        XSL ломает взгляды многих, кто никогда не сталкивался с декларативными языками программирования, а только с такими, где выполнение команд идет линейно.

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

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

                                                                        Разница улавливается?

                                                                        В случае с XSL, как наиболее близкому к синтаксису самого HTML, мне видится гораздо более прозрачная работа с преобразованием входных данных, чем в шаблонизаторах другого типа.
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                        • +3
                                                                          А завтра понадобилось добавить иконку, и <a> теперь не в <li>, а в <span>, чтобы не подчёркивались пробелы. Ваш CSS сломался. Или добавился пункт, который не ссылка <a>, а псевдо-ссылка. Опять сломано. Вы получаете удовольствие от мазохизма?
                                                                          • +6
                                                                            Что значит «сломался»? Вы меняете часть работающей системы, и ожидаете, что все будет работать также, как и прежде? БЭМ может гарантировать это со 100% уверенностью? Нет? К чему тогда весь этот огород из классов?

                                                                            Опять же — как часто вы меняете разметку в продакшене? Как показывает мой опыт, если даже такие изменения и делаются, то они не ограничиваются заменой тегов или перемещением их по дереву — часто меняется вид, что само собой подразумевает правку стилей. И тут БЭМ уже не работает.

                                                                            Ну и да, как уже не раз было отмечено, SASS/LESS/Stylus позволяют минимизировать любые «мазохизмы», на более высоком уровне.
                                                                            • +2
                                                                              Имея модульную методологию, вам достаточно использовать тот же класс на новом элементе. А вот не используя, вам придётся перевёрстывать.
                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                • +2
                                                                                  Ага, а логотип и шапка могут быть только одни. А потом появляется страница настроек, где меняется скин, и там —о боже! — появляется вторые! Или появляется элемент подсказки. Или появляется ещё что-то такое же, но с нюансами.

                                                                                  Первое правило верстальщика: если вам говорят, что будет так и только так, а уж тем более если вы так сами подумали, очень скоро может оказаться, что это совсем не так.
                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    • +3
                                                                                      Вы когда-нибудь работали в серьёзных проектах? Вас там не будут спрашивать, хотите вы это поддерживать или нет, а просто попросят это сделать.
                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                        • +4
                                                                                          Методология это одно, а организация файлов и прочего это другое. Мне не нравится, как сделана организация процесса в Яндексе — сильно перемудрили, но ничто не мешает использовать ту же методологию. А методологию стоит использовать практически с любым случаем сложнее простенькой страницы, иначе начинают сказываться недостатки её отсутствия, и увеличиваются затраты времени.
                                                                                          • 0
                                                                                            У них там и организация файлов проекта, и представление блоков в JSON/XML, из которого потом автоматом генерируется HTML, и привязка к жаваскрипту, и даже инструменты для работы с этим.
                                                                                            Почитайте историю развития БЭМ: clubs.ya.ru/bem/replies.xml?item_no=1398

                                                                                            Ещё до автоматической генерации HTML и привязки к JS мы использовали БЭМ (только тогда не называли это так, а называли независимыми блоками) и верстали это руками.
                                                                                        • 0
                                                                                          Да ну вы же должны понимать, что элементы с такими классами вроде приведённого выше яндексковского нельзя верстать и поддерживать руками и никто в здравом уме этим заниматься не будет.
                                                                                          И верстали, и поддерживали. От того оно всё развивалось и совершенствовалось.
                                                                                  • 0
                                                                                    Вы меняете часть работающей системы, и ожидаете, что все будет работать также, как и прежде?
                                                                                    Да, именно так.
                                                                                  • +1
                                                                                    Иконку без проблем можно добавить фоном к ссылке. С паддингом, разумеется.
                                                                                    • 0
                                                                                      Это если у вас не спрайт.
                                                                                      • 0
                                                                                        Это если иконки в спрайте у вас не «столбиком». :)
                                                                                        • 0
                                                                                          Столбик увеличивает как размер самого спрайта, так и потребление памяти.
                                                                                          • 0
                                                                                            Хм, если это и так, то разница должна быть совершенно незначительной. Загуглить что-то не получается, не поделитесь пруфом?
                                                                                            • 0
                                                                                              Под рукой ссылки нет, было где-то описание, что чем больше площадь картинки, тем больше потребление памяти. Плюс об этом рассказывали на Яндекс.Субботнике, где в почте скорость работы интерфейса важнее.
                                                                                      • 0
                                                                                        Расположить ссылку в пяти пикселях справа вам получиться далеко не во всех браузерах.
                                                                                    • 0
                                                                                      ">" не очень рекомендуют использовать. Там что-то спроизводительностью у браузера.
                                                                                      • 0
                                                                                        Откуда такая инфа?
                                                                                        • 0
                                                                                          Child and adjacent selectors are inefficient because…
                                                                                          developers.google.com/speed/docs/best-practices/rendering?hl=ru
                                                                                          • 0
                                                                                            Переводя ссылку выше, детские и соседние селекторы неэффективны, потому что браузер должен обработать каждый указанный в селекторе узел. И он должен это сделать для каждого элемента, указанного с самого права. Хотя они неэффективны, хуже только контекстные селекторы, которые пишутся через пробелы.
                                                                                            • 0
                                                                                              Про проблему скорости селекторов можно почитать тут: clubs.ya.ru/bem/replies.xml?item_no=338
                                                                                          • 0
                                                                                            Нет, корректно будет так:
                                                                                            .nav__item {}
                                                                                            .nav __item .link {}
                                                                                            • 0
                                                                                              Это тоже не по БЭМ — вложенные классы… По БЭМ скорее так:

                                                                                              .nav{}
                                                                                              .nav__item {} 
                                                                                              .nav__item-link {}
                                                                                              
                                                                                              • 0
                                                                                                Ну а в чём проблема? Вот CSS со случайной странички яндекса:
                                                                                                .b-mail-domik .b-hint-input { /*… */ }

                                                                                                По БЭМ нормально:
                                                                                                .main-menu — блок
                                                                                                .main-menu__item — элемент блока
                                                                                                .ico_size_16 — модификатор для блока

                                                                                                двойную вложенность в БЭМ я не встречал
                                                                                                • 0
                                                                                                  Просто у Вас там пробелы в селекторах, я про это…
                                                                                                  • 0
                                                                                                    .b-mail-domik .b-hint-input — такое может использоваться, когда блоку .b-mail-domik надо переопределить внутри себя блок .b-hint-input
                                                                                                  • 0
                                                                                                    Не хочу вас расстраивать, но это тоже не БЭМ.
                                                                                                    БЭМ выглядел бы так:

                                                                                                    .nav {}
                                                                                                    .nav__item {} 
                                                                                                    .nav__item__link {}
                                                                                                    
                                                                                                    • 0
                                                                                                      По-моему там было что-то про один блок и элемент в классе, но несколько модификаторов (если мне это не приснилось).
                                                                                                      • 0
                                                                                                        Явного запрета на иерархию в именовании элементов блока в их доках я что-то не нашел, к тому же сами яндексоиды на почте верстают именно так.

                                                                                                        Да и с точки зрения логики это, по-моему, правильней, так как link — это по сути элемент, вложенный в другой элемент и не имеющий смысла вне родительского item'а. Если же link такой универсальный и существует потенциальная возможность его дальнейшего использования в другом месте, то он должен быть вынесен отдельно в качестве блока.

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

                                                                                                        К примеру, у нас на проекте мы с коллегами отказались от всяческих предлагаемых яндексом префиксов, но добавили свой — префикс «w-», который мы добавляем к элементам-оберткам (так называемые wrappers, отсюда и название префикса). Таким образом мы отделяем вспомогательные обертки от участия в иерархии при именовании, о которой я писал выше. Вот типовой пример нашего кода:

                                                                                                        <div class="news">
                                                                                                        	<div class="news__tabs">
                                                                                                        		<div class="news__tabs__item">
                                                                                                        	</div>
                                                                                                        	<div class="news__list">
                                                                                                        		<div class="news__list__item">…</div>
                                                                                                        		<div class="news__list__item news__list__item_hiddable">…</div>
                                                                                                        		<div class="news__list__item news__list__item_hiddable">…</div>
                                                                                                        		<div class="w-news__list__item_project">
                                                                                                        			<div class="news__list__item">…</div>
                                                                                                        			<div class="news__list__item">…</div>
                                                                                                        			<div class="news__list__item">…</div>
                                                                                                        		</div>
                                                                                                        	</div>
                                                                                                        </div>
                                                                                                        

                                                                                                        .news {}
                                                                                                        	.news__tabs {}
                                                                                                        		.news__tabs__item {}
                                                                                                        	.news__list {}
                                                                                                        		.news__list__item {}
                                                                                                        			.news__list__item_hiddable {}
                                                                                                        		.w-news__list__item_project {}
                                                                                                        


                                                                                                        Для нас в такой записи все прозрачно и очевидно, по стилям сразу видна вся структура блока и видно что и от чего зависит внутри него.
                                                                                                        • +1
                                                                                                          Ну в этом есть смысл…
                                                                                                          • 0
                                                                                                            news__list__item_hiddable — вот это действительно ад
                                                                                                            • 0
                                                                                                              Ну не намного хуже .news .list .item.hiddable просто без пробелов…
                                                                                                              • 0
                                                                                                                В чем по-вашему заключается адовость? И как бы вы именовали такой пример?
                                                                                                                • 0
                                                                                                                  news__list-item_type_hiddeable

                                                                                                                  1. двойное подчеркивание отделяет элемент блока
                                                                                                                  2. одинарное — модификаторы элемента и их значения.
                                                                                                                  3. пробелы в именах заменяются на тире

                                                                                                                  мне так больше нравится :)
                                                                                                                  • 0
                                                                                                                    Я, пожалуй, воздержусь от спора о фломастерах, а попробую описать чем лично меня не устраивает приведенный вами тип записи с точки зрения моей логики:

                                                                                                                    1. Вы в имени элемента так или иначе используете ту же самую иерархию именования, что я описал выше, только в качестве разделителя пишете абсолютно нелогичный с моей точки зрения символ дефиса.
                                                                                                                    «list» — это элемент? Да.
                                                                                                                    «item» — это элемент? Да.
                                                                                                                    Элементы по БЭМ отделяются так — "__элемент"? Да.
                                                                                                                    Так при чем здесь тогда дефис? И, интересно, как бы вы написали такое — «news__list__item__link__image»?

                                                                                                                    2. Именование модификаторов как "_ключ_значение", на мой взгляд, излишне. На практике для нормального понимания абсолютно всегда достаточно написать только "_значение". Или кому-то в строке "*_disabled *_hidden *_big" будет непонятно, что "_disabled" — это о состоянии, "_hidden" — о видимости, а "_big" о размерах? Зачем писать лишние "_state", "_visibility" и "_size", когда все и без них очевидно?
                                                                                                                    • 0
                                                                                                                      Ну в его записи не list элемент и item элемент а list-item элемент, как и положено… К тому же если иерархия плоская, а стили независимы — совершенно не нужно описывать оную иерархию в имени класса. Как я это вижу…
                                                                                                                      • 0
                                                                                                                        Я прекрасно понимаю что имеется ввиду в записи Beyondtheclouds. Я же пытаюсь абстрагироваться от документации и следовать логике.
                                                                                                                        И, думаю, бессмысленно доказывать, что белое — это белое, а в этой абстрактной разметке:

                                                                                                                        <div class="news">
                                                                                                                            <div class="list">
                                                                                                                                <div class="item">…</div>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                        

                                                                                                                        … news — блок, list — элемент блока, а item — элемент блока, вложенный в другой элемент блока.

                                                                                                                        К тому же если иерархия плоская, а стили независимы — …

                                                                                                                        Стили внутри блока не могут быть независимы. В большей или меньше степени, но они обязательно зависят от того, что рядом, во что обернуты и что внутри. А если элемент независим, то это уже блок.
                                                                                                                        • 0
                                                                                                                          Харисов не раз говорил о том что элемент может быть внутри блока на любом уровне вложенности.
                                                                                                                          b-news
                                                                                                                          b-news__list
                                                                                                                          b-news__item

                                                                                                                          <div class="b-news">
                                                                                                                              <div class="b-news__list">
                                                                                                                                 <div class="b-news__item">...</div>
                                                                                                                                 <div class="b-news__item">...</div>
                                                                                                                                 <div class="b-news__item">
                                                                                                                                     <div class="b-news__list">
                                                                                                                                           <div class="b-news__item">...</div>
                                                                                                                                     </div>
                                                                                                                                 </div>
                                                                                                                              </div>
                                                                                                                          </div>
                                                                                                                          
                                                                                                                          • 0
                                                                                                                            Да я уже понял, что «чисто по БЭМ'овски, как Виталя прописал» все именно так, как вы говорите. Даже покаялся чуть ниже в комментах.
                                                                                                                            Теперь же просто высказываю точку зрения о том, что оригинальное БЭМ-именование, на мой взгляд, нелогичное и трудное для восприятия, и объясняю как и почему, опять же на мой взгляд, было бы логичней и понятней.
                                                                                                                            • 0
                                                                                                                              оно логичное, если помнить о том, что это все папки на файловой системе
                                                                                                                              github.com/bem/bem-bl/tree/master/blocks-desktop/b-link
                                                                                                                              • +1
                                                                                                                                Согласен. Если брать всю методику разработки в целом, то, конечно, учитывать иерархию внутри элементов и делать многоуровневые вложенности папок в файловой системе абсолютно излишне и было бы полнейшим маразмом.

                                                                                                                                Если же брать только метод именования (ну и, конечно же, независимость блоков), то в отрыве от вашего инструментария и системы разбивки всего внутри блока на папки — метод именования становится нелогичным. А, как мне кажется, в большинстве случаев верстальщики с небольших проектов как раз заимствуют только именование.
                                                                                                                          • 0
                                                                                                                            news — блок, list — элемент блока, а item — элемент блока, вложенный в другой элемент блока.
                                                                                                                            Да, элементы вкладываются один в другой при использовании, но при описании этих элементов проще использовать плоский список, не вкладывая их в коде и на файловой системе один в другой. Это позволяет не менять код, когда между list и item появится ещё один элемент.
                                                                                                                        • 0
                                                                                                                          Вы в имени элемента так или иначе используете ту же самую иерархию именования, что я описал выше, только в качестве разделителя пишете абсолютно нелогичный с моей точки зрения символ дефиса.
                                                                                                                          Дефис отделяет слова в составных именах, вне зависимости от того, блок это, элемент или модификатор.

                                                                                                                          Как-то так: long-long-block-name__long-element-name_mod-name_value

                                                                                                                          Так при чем здесь тогда дефис? И, интересно, как бы вы написали такое — «news__list__item__link__image»?


                                                                                                                          news__list
                                                                                                                          news__item
                                                                                                                          news__link
                                                                                                                          news__image

                                                                                                                          Если хочется явно указать принадлежность item к list'у — news__list-item. Это по-прежнему будут два разных элемента, но их родственность определяется близкими именами.
                                                                                                                          • 0
                                                                                                                            Именование модификаторов как "_ключ_значение", на мой взгляд, излишне. На практике для нормального понимания абсолютно всегда достаточно написать только "_значение". Или кому-то в строке "*_disabled *_hidden *_big" будет непонятно, что "_disabled" — это о состоянии, "_hidden" — о видимости, а "_big" о размерах? Зачем писать лишние "_state", "_visibility" и "_size", когда все и без них очевидно?
                                                                                                                            Мы тоже так думали, пока не начали писать много JS, который работает с модификаторами и меняет их значения.

                                                                                                                            Вам надо изменить модификатор size со значения big на small — вы ищете модификатор по его типу, а не по значению. Типы модификаторов в пределах одного блока/элемента уникальны, а вот их значения могут совпадать.
                                                                                                                          • 0
                                                                                                                            Да, у вас написано правильно. Мы именно так и делаем.