Есть ли какие-нибудь средства, которые проверяют — насколько моя верстка соответствует БЭМ'у?

Question

[alexandrnevajno1]

Здравствуйте! Я изучаю БЭМ. Хочу взять от него CSS и HTML (то есть, только методологию наименований). Есть ли средства, которые могут проанализировать мою верстку и стили и показать, насколько она соотвествует БЭМ? Я вот сверстаю макет. А как понять - правильно ли (с точки зрения БЭМ) я его сверстал (написал HTML и CSS. Без раскладывания элементов по папкам и тд). Может, я как-то не так понял эту методолгию. Но если нет возможности проверить работу на правильность, как я об этом узнаю?

Comments

[Владимир Проскурин]

ой всё, методология, позволяющая создавать расширяемые и повторно используемые блоки интерфейса. Например пишем кнопку, задаем ей нужный класс (уникальный, по правилам методологии), в кнопке может быть ссылка (это уже элемент блока), и эту кнопку мы потом сможем безболезненно использовать в других частях сайта, или даже на других сайтах. Если блок нужно немного поменять (например сделать его больше), то мы можем описать ему модификатор _big. т.е. по факту, создаются кирпичики, которые размещаются на странице, типа конструктор лего. Вот тут объясняется правильнее https://ru.bem.info/methodology/key-concepts/
Я описал грубо и коротко, там на самом деле много штук, описана файловая структура, структура блоков и.т.д.. Но и без БЭМа можно всего этого добиться, просто БЭМ дает общую структуру, так в команде работать легче.
Мне не нравится его громоздкость, очень часто получается огромные классы для тегов. Мне нравится больше ABEM https://css-tricks.com/abem-useful-adaptation-bem/ он короче.

[s-jet]

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

[ой всё]

s-jet, Vlad_IT, для этого существуют известные и хорошо зарекомендовавшие себя template engines - Mustache, Handlebars и иже с ними, а для деревьев существуют mindmaps

[s-jet]

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

[DevMan]

ой всё, https://ru.bem.info/methodology/
странно, что человек, постоянно посылающий в гугл, сам не в состоянии нагуглить и прочитать..

[Владимир Проскурин]

ой всё, не, не для этого. Шаблонизаторы же используются для генерации выходного файла из слияния шаблона и данных, а БЭМ именно оформляет эти шаблоны. Да, кнопку можно вставить шаблоном через переменную {{ button }}, но содержание этой переменной, это HTML код, и вот этот код HTML описывается при помощи БЭМ. Например вот

-- button.pug
.button
    .button__text

Для нее пишутся стили

// button.scss
.button {
   &__text { }
}

и этот HTML и описанный стиль являются блоком (написанным на Pug и SCSS). Чем данный кусок хорош? Это тем, что я пишу стили, которые не меняют стили других элементов на странице, и которые можно использовать вне родителя (т.е. они не зависят от стилей родителя). т.е. говоря более привычно, БЭМ позволяет использовать пространство имен (в данном случае button). В БЭМ нельзя писать дочерние селекторы, нельзя использовать селекторы по тегам. Все изолированно друг от друга.
Еще более грубо говоря, БЭМ это правила написания классов для тегов.

[ой всё]

s-jet, так зачем?
суть в чем?
зачем мне что-то кроме шаблонов?

[ой всё]

Vlad_IT, как обычный css мешает вам использовать пространство имен?

[Илья Герасимов]

Это просто методология упрощающая жизнь в крупных проектах, жестко следовать её принципам или нет решает верстальщик, но от его решения конкретно ничего не изменится, потому что это просто CSS и просто HTML если оно выглядит как на макете значит задача решена. Этим ненужно загибаться, учить, курить, убивать время на то чтобы все было четенько по методичке, это чисто моё субъективное имхо относительно верстки. Так что релакс. Сервисов проверки ессно нет, но автор может заказать аудит у шарящих.

[s-jet]

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

[ой всё]

s-jet, что из этого я не могу сделать в css?

[s-jet]

ой всё, я тебе про фому, ты мне про ерему. Открой уже ссылку которую тебе дали и почитай

[s-jet]

ой всё, Ок, раз ты меня упрекашешь, я отвечу. Реши тогда сначала такую задачку:

У тебя есть блок новость типа такого, сверстанного без методологии:

<div class="news">
  <div class="date">12.12.12</div>
   <div class="title">sadsadsad</div>
   <div class="text">sfsdfsdf</div>
   <div class="comments">
      <div class="comment">
        <div class="title">sadsadsad</div>
        <div class="text">sfsdfsdf</div>
      </div>
   </div>
</div>

Как ты напишишь css чтобы эти блоки можно было внедрять в разные места страницы, с разным дизайном? Как сами новости, так и отдельно комментарии, так и отдельно комментарий?

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

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

Answer 1

[s-jet]

Если просто, то смысл БЭМ, в верстке, в том чтобы ты мог взять и перенести любой блок (даже блок внутри блока) в любое место сайта и у тебя ничего не разлетелось т.е. не привязывать свой блок к родителю в верстке, он живет своей независимой жизнью в твоем DOMе. У тебя возникнет сразу вопрос: "Но мой блок в другом месте страницы выглядит же по другому, на главной он с бежевым фоном, а на вторичке с синим, да и шрифты там разные и расположение?". Вот за это отвечают модификаторы, которые прописываются к элементам в случае необходимости => поиграться с проверкой ты можешь путем перетаскивания своего сверстанного по БЭМ блока в разные места

Comments

[alexandrnevajno1]

А когда перетаскиваю в другое место, получается, модификаторы нужно убирать? Например, в модификаторе float:left; указано. Из-за этого может неправильно отображаться блок в другом месте, где рядом с ним будет модификатор с другим float, например. Или с clear.

[s-jet]

alexandrnevajno1, да, модификаторы отвечают за внешний вид в т.ч. за позиционирование