Как научиться пользоваться методологией БЭМ?

Question

[Swaer]

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

Comments

[Михаил]

https://ru.bem.info/

[Vitaliy]

а может не надо? Есть множество других годных методологий, которые позволят не засорять HTML шаблоны. Просто берете библиотеку, которая будет делать scoped стили (либо классический CSS модифицирует, либо CSS in JS) и не мучайте свои пальцы и глаза

Answer 1

[Ankhena]

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

Тут БЭМ вторичен.

Попробуйте представить, что вам нужно сделать верстку для сотни похожих (только похожих) сайтов. Вот первый готов. Вы берете второй макет, садитесь работать и понимаете, что снова есть блок, например, последних новостей, все тоже самое, дата-заголовок-текст-подробнее. Ах, как было бы хорошо, взять и сделать ctrl+c ctrl+v из предыдущей работы. Вот подумайте, как записать все стили так, чтобы при переиспользовании на этом же сайте или в другом проекте нужно было бы переписывать как можно меньше кода, а стили внутренних элементов не "поссорились" с тем кодом который уже есть в новом проекте.

Comments

[profesor08]

Ах, как было бы хорошо, взять и сделать ctrl+c ctrl+v из предыдущей работы

А потом вдруг на всей сотне сайтов надо поменять пару стилей. И вся вот эта радужность подхода разбивается о реальность.

[Andrew]

profesor08, глобальная автозамена?

А потом вдруг на всей сотне сайтов надо поменять пару стилей

прям типичный заказщик

[Ankhena]

profesor08, в какой реальности у одного конечного заказчика сотня сайтов?
Да даже если и так, то при единой методологии и модульности окажется, что менять нужно в одинаковых классах, а не каждый раз выяснять его название. И, например, менять придётся всегда margin, а не в одном проекте margin одного блока, в другом другого, в третьем padding, в четвертом position или transform. И т.д.

[profesor08]

Ankhena, какая разница? Есть сотня похожих сайтов, да хоть два, три, пять, не важно. И вот надо и все! Это могут быть не сайты, а что-то еще. Копипаста тут подложит наижирнейшую вонючую свинью, которую придется проглотить, и остаться в ожидании добавки.

[Ankhena]

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

[profesor08]

Ankhena, раз пошли фантазии, то тогда я пас.

[Ankhena]

profesor08, переиспользовать не нравится и с нуля не нравится. Выразитесь конкретнее.

[profesor08]

Ankhena,

ctrl+c ctrl+v

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

[Ankhena]

profesor08, мне кажется вы не вполне поняли, какую именно мысль я высказала. У спрашивающего проблема не в БЭМ, а в делении макета на блоки, какой бы методологией или инструментами он не пользовался. Для того, чтобы разобраться, нужно понять, что именно и как может переиспользоваться. Какие сущности могут/будут быть самостоятельными, а какие не могут жить без родителя.

[profesor08]

Ankhena, надуманная проблема. Любая сущность может жить без родителя. Доказывается элементарно, просто берешь и вставляешь ее куда надо. Это родитель должен решать, как сущность должна у него отображаться.

[Ankhena]

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

вставляешь ее куда надо.

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

Надеюсь, я нас помирила.

Answer 2

[profesor08]

Используй Styled Components и хватит себя мучить.

Comments

[profesor08]

Андрей, например?

[Swaer]

Андрей, Если бы работодатели, в большинстве, не требовали и не спрашивали про бэм, я бы его не учил, но надо

[profesor08]

Андрей,
Производительность - отличная, и вообще не понятно зачем приплетать.
Головной боли нет, больше кода писать не надо.
Сложностей с отладкой нет.
Какие нужны инструменты? Подсветка синтаксиса есть, автокомплит не пригодился.
Анимации, трюки, псевдоэлементы, это все есть, даже можно обратиться к родителю, что некоторые вещи упрощает.
Бонусом исчезает проблема конфликтов стилей. Не надо париться над именами, но если хочется, то указывай. Проблемы, которые решает бэм, решаются автоматически.

[profesor08]

Андрей,

По поводу анимации и прочих "трюков". Речь идёт о том насколько удобно этим пользоваться. С этим у Styled Components имеются проблемы.

Удобнее чем в css. Можно генерировать на основе параметров, крутить вертеть как угодно. Ни css, ни sass подобного не предоставляют.

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

Что с отладкой не так, мне так и не понятно. Возможно я что-то делаю не так, а возможно это слишком тривиально чтоб обращать внимание.

но при этом теряется вся мощь, производительность и гибкость CSS

На выходе имеем тот-же самый CSS, что там должно теряться, мне не понятно. Бабайка крадет?

Вместо того чтобы грамотно подойти к вопросу организации стилей проблему решают всякими костылями.

Это рутинная, повторяющаяся задача, которую можно автоматизировать и избавить разработчика от головной боли. Так как рано или поздно количество кода разрастется до такой степени, что любой начнет косячить, ЛЮБОЙ. Ни трюки css, ни трюки sass, ни методология бэм тут не помогут, потому что рано или поздно что-то забудешь.

Tailwind

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

Answer 3

[McBernar]

Вы слишком заморачиваетесь.
Если вы назовете элемент блоком - к вам не спустится с небес БЭМ-инквизиция и на костре не сожжет.

Помните, что вкладывать блоки в блоки и элементы в элементы - это норм.