We write BEM correctly

Рет қаралды 26,397

4 жыл бұрын

Egor found a presentation on the Internet and decided to share important knowledge about it with his colleagues. If you experience discomfort in layout or class naming. And you do not yet have a styled component of the brain - it will be useful and interesting

Пікірлер: 60

@sergeyklyukin3304 4 жыл бұрын

Егор, спасибо! Все круто, понравилось, буду применять. Отличный формат материала и подачи, нужно больше контента)))

@undefined_user 4 жыл бұрын

Круто, доступно, без смс и регистрация👍

@Eddie-xu6ij Жыл бұрын

Спасибо за видео .

@user-te7nc6db8u 3 жыл бұрын

Харош! Очень удивился, когда ты повторил полностью правила одного из проектов, где я участвовал. Это был самый понятный код, не смотря на то, что проект был достаточно большой. Будет порядок, если юзать такой подход. Подписался)

@smoozydrinker172 4 жыл бұрын

Егор, чаще. Чаще пили видосы, пожалуйста. Лучше более короткие, если отнимают много времени, но больше количество видео и затрагиваемых тем.

@victorz9032 4 жыл бұрын

Блин, чувак, ну как ты рассказал презентацию из 153 слайдов за 25 минут, чтобы всё стало понятно? Стиль изложения - огонь.

@levgurov7738 4 жыл бұрын

Сижу, смотрю ваши видео с holy.js, а тут такое) Посплю как-нибудь в другой раз

@nickpismenkov 4 жыл бұрын

И если можно хотелось бы от тебя увидеть какие-либо уроки по более насущным темам. Например по react, или же что-то по node.js.

@yamalkevich 4 жыл бұрын

PRO CODE сделаю на неделе

@nickpismenkov 4 жыл бұрын

@@yamalkevich Спасибо.

@mikhail3147 4 жыл бұрын

лучше про vue

@cryday3270 4 жыл бұрын

оо, понятно и приятно

@Revalto 4 жыл бұрын

Ждем уроки по NodeJS на практическом задании ;)

@serg_mak 4 жыл бұрын

Пытался осилить писать стили как в бутстрап только на tailwind, но через неделю захожу на проект и не могу нормально быстро прочитать или как сказал Егор подвинуть на 4px, знать и уметь конечно надо но чистый css one love)) Егора реально понятно и прикольно слушать, наверное круто с таким человеком работать.

@nickpismenkov 4 жыл бұрын

О, то что надо, давно хотел подтянуть css

@Eddie-xu6ij Жыл бұрын

Очень хорошие видео

@akovalevv 3 жыл бұрын

Хоспаде спасибо

@theoty-js 2 жыл бұрын

МЕНЯ ЗОВУТ ЕГОР И Я ПЬЮ МОЛОКО😅

@ROARForever 4 жыл бұрын

Концовка просто пушка

@alexanderpiskun9747 4 жыл бұрын

Когда мы пишем вложенные селекторы с помощью SASS можно искать по проекту по селектору блока, а в файле локально уже искать нужный итем. Какие подводные?

@Vladikslavik 3 жыл бұрын

Тоже не совсем понял почему не рекомендует писать &__elem. Никаких проблем с поиском нужного класса никогда не возникало.

@KarlGlebovich 3 жыл бұрын

@@Vladikslavik особенно если css.map используется

@daiske2867 Ай бұрын

@@Vladikslavik смысл плоскость теряется, как было отмечено в презентации суть БЭМ в том, что img li a, сворачивается в image , image__li , image__a, при этом геометрия стилизуется в элементах, а "внешка" в модификаторах.

@Vladikslavik Ай бұрын

@daiske2867 Если я пишу, например: .header { ... &__title { ... то препроцессор генерит на выходе: .header__title Поэтому не вижу смысла не использовать Амперсанд.

@daiske2867 Ай бұрын

@@Vladikslavik если, то это имеет смысл. Но тут появляется немного иная посылка, судя по спеке БЭМ, существует 2 типа файловой иерархии flat, nested, если конкретный элемент небольшой, то действительно имеет смысл так писать через &, ровно как и располагать элементы плоско в директории блока. Но в случае, когда элемент не является на столько тривиальным или их становится слишком много, то уже тогда стоит разделять. Его интуиции говорят о том, что нужно исходить из масштабируемого варианта, чтобы потом не пришлось рефакторить(да он говорит о том, что надо стремится писать на чистом все дела, но я интерпретирую его речь так). Ваши говорят о том, что надо писать в 1 месте, чтобы переводить мысли было быстрее. И в этот момент появляется демон, который говорит, вот давайте тут делать так, а там иначе и в итоге, в 1 компонентах пишется &, а в других в отдельном файле( отдельным селектором ). И в этот момент и начинаются трудности с поиском, потому что где-то они &, где-то в разных это будет занимать дополнительное время, ну как минимум на поиск блока.

@user-ot6uc5iy5w 4 жыл бұрын

Да зашибок рассказал - лучше всех! Согласен, отделять модификатор двойным дефисом легче для визуального восприятия. Полезный был бы видос про то, как сразу из макета построить БЭМ-дерево и после этого уже начать разметку (рабочий процесс так сказать).

@serhiiyakymenko7348 4 жыл бұрын

Хорошие обяснение про BEM ВОПРОС: Можно ссылку на эту презентацию?

@serhiiyakymenko7348 4 жыл бұрын

Нашол) Презентация из видео: www.slideshare.net/IgorZenich/bem-50249629

@yamalkevich 4 жыл бұрын

Welcome www.slideshare.net/IgorZenich/bem-50249629

@strongest8359 2 жыл бұрын

Чувак ты Исус в разработке! Я считал БЕМ гуаном пока не глянул твой видос ))

@johnsnow6041 4 жыл бұрын

как ты можешь рассказывать о бэм, если ты сам ничего в этом не понимаешь

@nekitsan3837 3 жыл бұрын

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

@chip_a 4 жыл бұрын

спасибо))) !! да так должно быть нет & ибивает проект

@AndrewShmerchuk 4 жыл бұрын

Егор, норм ли учить JS, а потом сразу учить Node.js или лучше React брать???

@yamalkevich 4 жыл бұрын

учи JS и сразу ноду

@AndrewShmerchuk 4 жыл бұрын

@@yamalkevich Спасибо!)

@vladayakovleva9095 2 жыл бұрын

🥛🐄

@tseryakov 4 жыл бұрын

Егор, имхо (еще говорят 'имхо'? :)) вот удобно организованный документ, для того, чтобы наглядно кому-то объяснить на пальцах БЭМ, может будет тебе полезен - nicothin.pro/idiomatic-pre-CSS/#bem

@thezhizh2441 4 жыл бұрын

Тимофей здарова

@yuriytsygankov7376 4 жыл бұрын

The Zhizh , Рома и Тимоха, привет вам!

@thezhizh2441 4 жыл бұрын

@@yuriytsygankov7376 Ого Юрец здаровченко

@yuriytsygankov7376 4 жыл бұрын

The Zhizh как дела?

@thezhizh2441 4 жыл бұрын

@@yuriytsygankov7376 Просто превосходно!

@johnyxmelev5475 2 жыл бұрын

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

@xxxan_official 2 жыл бұрын

"Лучше сразу в скомпилированном виде писать", ага. Sass для этого же создали, чтобы не создавать дерево, и писать в css. А препроцессоры нужны только для миксинов и переменных (а, не, последнее и так есть в css). Браво.

@xxxan_official 2 жыл бұрын

Топовые верстальщики зарубежные на sass пишут, а вы самые умные, не надо на нём писать. Ага. (И да, мне удобнее и читать по дереву, и писать)

@AlexanderYukal 4 жыл бұрын

Там на заднем фоне какое-то бурчание посторонних людей, очень мешает для восприятия материала. А сдругой стороны это отношение к слушателю... А начало было хорошее: "Я Егор и я пью молоко", а на фоне фанаты молока? ))

@yamalkevich 4 жыл бұрын

Alexander Yukal я коллегам рассказывал про бем :)

@AlexanderYukal 4 жыл бұрын

@@yamalkevich А тут я, такой, с со своими пирожками))

@mushnikov35 3 жыл бұрын

мне scss нарвиться, просто чистый css писать так нудно и долго

@MaksymMinenko 3 жыл бұрын

2:49 В первой же строчке кода уже неправильный БЭМ. Дальше видео не смотрел...

@sergeymsv2391 3 жыл бұрын

БЭМ удобен, но, чертовски неудобно когда примешиваешь его к к проекту без БЭМ. Суть то тут одна, писать так, чтобы было удобно САМОМУ читать. Существуют правила, но - это ведь просто рекомендации, чтобы другому разработчику после нас, было удобно разбираться с вашим кодом... А по сути, если не лицемерить, то мне вот плевать, кто после меня будет разбираться с моим кодом. Вот абсолютно. Если клиент сменяет вас на другого разработчика (по разным обстоятельствам), да плевать с высокой колокольни - как ему будет удобно =))) Главное, чтобы вы внутри своего круга общения, писали + - одинаково. И тут да, приходит на помощь БЭМ. Если он частично не устраивает, позаимствовать удобные правила и ими руководствоваться.