Тёмный

Есть ли аналоги БЭМ (BEM)? 

Просто: разработка
Подписаться 47 тыс.
Просмотров 18 тыс.
50% 1

Практически у всех кто сейчас начинает верстать сайты в голове одни и те же утверждения - "юзай флексбокс / бутстрап отстой / jQuery отстой / не подошел флесбокс - юзай гриды / флоуты отстой" и много чего другого, включая "Юзай бэм / почитай про бэм!".
BEM - ru.bem.info/methodology/
OOCSS - github.com/stubbornella/oocss...
SMACSS - smacss.com/
ITCSS - не нашел отдельного сайта, но легко гуглится
ACSS - acss.io/
И многие даже не задаются вопросом - ПОЧЕМУ? Почему это плохо или хорошо?!...
И, не успев даже понять какие есть вообще свойства, лезут в BEM. И тут мозг вообще плыть начинает. И так непонятно где юзать абсолют, а где фиксед, так ещё и каким-то образом нужно понять, что из всего этого относится к элементам, а что к модификаторам...
Отсюда мой вам совет - если вы только-только начинаете вникать во всё это - начните верстать ХОТЬ КАК-ТО! Реально толпы людей в чатах на протяжении часа ведут дискуссии "Как правильно назвать блок? А это по BEM или не по BEM". За это время можно полноценный просто лендинг сверстать!
Есть отличная поговорка: «Done is better than perfect». Сделанное лучше идеального.
Вот вы научились верстать простые сайты (визитки, лендинги) и сталкиваетесь с большим проектом. Раньше, вы могли писать на своих небольших проектах все стили в одном файле, а тут можете столкнуться, что у css файла есть ограничение на кол-во селекторов (4095).
Дальше вы понимаете, что стили нужно разбивать на файлы. И тут всплывает уже море вопросов - "а стили располагать рядом с компонентом или делать аналогичную структура ксс файлов, как и компонентов? А что делать со стилями, которые пересекаются но используются в разных компонентах? А где располагать общие стили, например для body?"
И вот в этот момент я вам советую почитать не только про методология БЭМ, но и про такие подходы, как ITCSS / OOCSS / SMACSS / ACSS. Да-да в мире существуют и другие методологии/подходы.
Вам вовсе не требуется знать ОТ и ДО все их и всё в них, но из каждого можно взять для себя что-то полезное. Так, например, из БЭМа можно взять концепцию наименования классов, из ITCSS структуру css файлов.
И ознакомившись с различными подходами, вы будете понимать где, какой применять, включая БЭМ. И тогда он уже будет вам служить во благо, а не быть ЗЛОМ.

Опубликовано:

 

24 фев 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 136   
@prosto_razrabotka
@prosto_razrabotka 3 года назад
Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@placid3495
@placid3495 4 года назад
Виталий, мы хотим посмотреть видео и о других подходах! Спасибо большое за видео!
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Мы - это вы о себе в 3м лице?)
@placid3495
@placid3495 4 года назад
@@prosto_razrabotka Ха ха)) Мы - царь-император вселенной, желаем так))) Мы - пользователи конечно) Позволил себе ответить еще за тех других желающих) А что, могу ведь, не один ведь я такой))
@alexeygumenyuk8510
@alexeygumenyuk8510 4 года назад
@@prosto_razrabotka ну, нас уже, как минимум, 2, и это ещё не учитывая лайки у комента)
@alexeygumenyuk8510
@alexeygumenyuk8510 4 года назад
@@prosto_razrabotka вообще-то, во втором, кстати)
@insidesky9959
@insidesky9959 4 года назад
+
@DjekasUzumaki
@DjekasUzumaki 4 года назад
Только и рад посмотреть такой интересный контент, всегда приятен взгляд со стороны да и краткий обзор методологий всегда полезен для расширения кругозора) Буду ждать :3
@AbraKadabra000
@AbraKadabra000 4 года назад
очень ценно когда все 10 человек в команде делают всё одинаково как один. БЭМ именно для этого. Ну и плюс он позволяет не говнокодить в вёрстке. Запрет для блоков влиять на внешнее позиционирование например. С бэмом можно не волноваться за рефакторинг вёрстки когда не очевидно что за что отвечает, и вы боитесь что-то удалить важное, что могло бы сломать стили на других страницах.
@Dianochka86
@Dianochka86 4 года назад
Боже, это именно то, что я искала! Никак не могла найти информацию, как правильно верстать большие проекты, а не просто лендинги. Хотелось бы послушать по подробнее о разных подходах. Большое спасибо за информацию!
@pablos2401
@pablos2401 4 года назад
Ожидаем видео про подходы, спасибо)
@liliiaakopian4587
@liliiaakopian4587 4 года назад
С нетерпением жду более подробный разбор методологий :)
@Aslankz1983
@Aslankz1983 4 года назад
Спасибо за совет! Сам месяц уже в ступоре, а ваш совет помог. Спасибо и удачи вам!
@serhiikorniichuk865
@serhiikorniichuk865 4 года назад
Обязательно расскажи, очень актуально и полезно! За скороговорки отдельный респект)
@user-jh1qg7tk7j
@user-jh1qg7tk7j 2 года назад
Дякую за інформацію! Чекаю відео про інші методології:)
@user-fb3tn9hy5r
@user-fb3tn9hy5r 3 года назад
Лысый из Айти ты топчик просто. Пожалуйста сделай длинные видео по каждой из методологий. У тебя такие короткие видео порой. Ну хоть за основу спасибо
@smog93by
@smog93by 4 года назад
Виталий, просьба к Вам огромная, если увидите, сделать видео об алгоритмах! Где и как они применяются на практике, как можно облегчить себе задачу, может быть какую-то полезную информацию о данной теме! Понимаю, что куча информации в сети , но было бы интересно посмотреть видео конкретно от Вас. Вы четко и красиво излагаете мысли.
@TheTexPro
@TheTexPro 4 года назад
Спасибо! Сделай видос по другим методологиям, пожалуйста)
@kapchakap5257
@kapchakap5257 4 года назад
Виталя,ждем видио!!❤️
@kravcev
@kravcev Год назад
Отличный автор)) нужный человек😎
@konstantinkuksov914
@konstantinkuksov914 4 года назад
Скороговорки топчик! А по теме - хочу подробностей, спасибо! ))
@OLEKSANDRWINCH
@OLEKSANDRWINCH 3 года назад
Виталий, расскажи пожалуйста подробнее и о других подходах!
@Evgeniy19856
@Evgeniy19856 4 года назад
Спасибо. Хотим знать подробно про все подходы.
@user-dk9yl4ct7b
@user-dk9yl4ct7b 4 года назад
Жду с нетерпением. 😃
@chikenmacnugget
@chikenmacnugget 4 года назад
Давай давай голова, спасибо тебе. Ждем видосы)
@user-qv4hn6qq4n
@user-qv4hn6qq4n 4 года назад
Хорошо что-то или плохо зависит от задачи, а не от средства. Если любая методология / фреймворк / что угодно закрепились на рынке, значит в какой-то момент времени была задача, которую они решали хорошо. Но в точности ли такая же задача у тебя? А вот это правильный вопрос.
@user-cs5zp9rv9c
@user-cs5zp9rv9c 4 года назад
Финальный аккорд прям заслуживает Like)
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Спасибо -)
@smog93by
@smog93by 4 года назад
Виталий, давайте пожалуйста и про другие подходы!
@iamanangel9178
@iamanangel9178 4 года назад
Я был бы рад, если бы ты записал гайды по другим подходам к CSS!
@a.panfilov.s
@a.panfilov.s 3 года назад
Все круто! Но поговорка в конце, заслуживает отдельного лайка
@jses8560
@jses8560 4 года назад
Будет круто услышать про данные подходи.
@user-hk6ec5xk1k
@user-hk6ec5xk1k 4 года назад
На первой работе был БЭМ, и я что-то как-то и не парился до этого видео...) пойду погуглю, но и видосики от тебя было бы интересно посмотреть)
@DK-tq5wd
@DK-tq5wd 4 года назад
Всем привет! Меня, как человека, который недавно начал изучать верстку, интересует 1 вопрос: как вообще обстоит ситуация с конкуренцией в этой сфере на рынке труда? Как обычного, так и на фрилансе
@user-hk4lq2xc4v
@user-hk4lq2xc4v 4 года назад
Ждем видео о других подходах!
@fife3366
@fife3366 4 года назад
Комментик, как всегда видос топ)
@Cinegami3
@Cinegami3 4 года назад
Последние 2 дня ищу эту информацию, изучаю другие варианты rscss oocss и т.д. И тут выходит видео на эту тему, на этом шикарном канале.... Теперь я точно уверен что мы живем в "Гипотеза симуляции" и мы всего лишь проекции За видео огромное спасибо.
@DEN2695
@DEN2695 4 года назад
Конечно стоит рассказать, нужно больше адекватных и интересных видео, спасибо)
@Vladikslavik
@Vladikslavik 4 года назад
Да, хотелось бы узнать от тебя и о других подходах.
@julias6774
@julias6774 4 года назад
Спасибо за видео. Интересует вопрос, если сайт будет натянут на crm, то бэм по сути не нужен? При переносе, классы будут мешать?
@iamInnoel
@iamInnoel 4 года назад
Не crm, а cms тогда? Если делать тему с нуля, то тогда это будет решать, но некоторые компоненты cms могут оборачивать элементы в свои тэги со своими классами, но это поведение обычно можно изменить.
@julias6774
@julias6774 4 года назад
Innoel да cms, думаю одно, пишу другое) спасибо
@unnopeso4784
@unnopeso4784 4 года назад
А можно подробнее о всех подходах, но ещё и на примерах реальных?)) Понимаю много времени, но всё же....
@blooddimon2390
@blooddimon2390 Год назад
Разговор по делу, но очень затянуто.
@MrKokokokokokkokokok
@MrKokokokokokkokokok 4 года назад
Хочу более подробный разбор методологий, и пишу об этом в комментариях
@natalichernikova
@natalichernikova 3 года назад
Если вам не понятно, то это не значит , что не работает. Я массажист и работаю с этим прибором 3 года. Результаты просто потрясающие!!!!
@jemilsuleimanov209
@jemilsuleimanov209 4 года назад
Было бы интересно посмотреть о методологиях)
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Гуд
@jemilsuleimanov209
@jemilsuleimanov209 4 года назад
Хотел бы выразить благодарность за канал. Не планируете подкаст? Слушал интервью у айти бороды в подкастах и голос и речь приятно слушать)
@kuziakivmarko
@kuziakivmarko 4 года назад
Круті відео! Буде дуже цікаво й корисно почути від вас про інші підходи
@user-sm7vj8bd7o
@user-sm7vj8bd7o 4 года назад
Круто в конце зачитал!
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Благодарю -)
@andreiribac6284
@andreiribac6284 4 года назад
Добрый друг! Поведай нам о лучших моментах в каждом стиле!
@user-hu3gv8zq8j
@user-hu3gv8zq8j 4 года назад
Расскажи подробнее !!!
@tovjukov
@tovjukov 4 года назад
Хотелось бы подробнее про каждый.
@WixxTeR
@WixxTeR 4 года назад
уважаемый автор канал, прошу в своих видео про эти штуки, да и вообще про технологии. расскажи как они нужны: для себя, для совершенствования или для устройства на работу. по данному поводу БЭМ пишут прям в вакансии, а другие и слышать не слышали. ну вот именно такие моменты задавай в видео. как они нужны и на сколько нужны. спасибо
@alexeygumenyuk8510
@alexeygumenyuk8510 4 года назад
На самом деле, очень важная мысль. Причём она относится не только к вёрстке, а в целом к жизни) (я говорю про начало видео)
@panamaver4917
@panamaver4917 4 года назад
Было бы неплохо, если бы рассказал
@user-iz9sj1nn5q
@user-iz9sj1nn5q Год назад
4:14 Да, хотим, спасибо.
@user-cu4cy2tv9l
@user-cu4cy2tv9l Год назад
чёткие скороговорки!!
@offilawnoone9020
@offilawnoone9020 3 года назад
пока что самый адекватный ролик на подобную тему в русскоязычном ютьюбе с тех пор, как десять минут назад я решил узнать, что это за хрень, хотя за плечами веб-приложение по управлению продажами и персоналом на предприятии, которое было собрано исключительно на основе результатов запросов в гугле и базовому образованию в этой сфере. До этого посмотрел какой-то короткий ролик про БЭМ и ни фига не понял, чем оно отличается от того, что ты и так делаешь, когда тебе приходится автоматизировать создание однотипных странниц. Так или иначе приходится одновременно упрощать создание/удобоваримость/читаемость и комплексно структурировать сайт/веб-приложение. А вот на всяких других (не там где я сейчас) работах требуют постоянно знание каких-то всевозможных технологий и подходов (будто бы потенциальная полезность разработчика сводится к уже имеющемуся опыту, а не к способности этот опыт приобретать по мере необходимости), поэтому приходиться вникать зачем, что, как и почему существует вся эта солянка идей. Посмотрим. А может я вообще брошу разработку и стану блогером :-)))
@GamesServices
@GamesServices 3 года назад
Thanks
@romuelson
@romuelson 4 года назад
Крутая футболка!
@alkaskakalka4312
@alkaskakalka4312 4 года назад
Хочу подробнее о подходах)
@matveysidorov6092
@matveysidorov6092 4 года назад
расскажи о других подходах пожалуйста
@user-no5cv5to7r
@user-no5cv5to7r 4 года назад
Ждём видео про другие подходы
@userbilas
@userbilas 4 года назад
За подходы!
@somnvm37
@somnvm37 3 года назад
Лендинг за 2 часа это конечно супер быстро для меня. Сколько вообще нужно учится, чтобы писать настолько быстро?
@agilkerimov
@agilkerimov 4 года назад
Хочу подробно про каждый подход
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Оке
@AbraKadabra000
@AbraKadabra000 4 года назад
Кайф!! Спасибо!
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Не за что -)
@user-wo7vc6ow6d
@user-wo7vc6ow6d 4 года назад
Полностью согласен с тем, что надо пробовать ,а не слушать. У каждого свой взгляд, запас знаний и просто полагаться на чужое мнение нет смысла.
@user-it4mb6bg9v
@user-it4mb6bg9v 4 года назад
Лучший)
@prosto_razrabotka
@prosto_razrabotka 4 года назад
А вы слышали ранее про другие подходы?
@kotlancer
@kotlancer 4 года назад
к стыду своему, нет)
@yarko4766
@yarko4766 4 года назад
Нет, счяс на курсах фронт-енда, уже в запасе имею 5 лендингов сверстаных)
@placid3495
@placid3495 4 года назад
слышал, но оставил изучение на попозже, когда вот точно надо будет)
@bfgftrty
@bfgftrty 4 года назад
Слышал из твоего интервью АйтиБороде
@user-nk8wq4sx1x
@user-nk8wq4sx1x 4 года назад
выработал свою методику, ну наверно она сборник техник из всех других, но получается очень гибко. Глянул на бэм, сложно, долго, нахера вообще?! Можно куда проще.
@Nekby2
@Nekby2 4 года назад
давай подробный разбор и ещё совет: фоновая музыка мешает. или стоит попробовать заменить на что-то менее динамичное. а то твоя медленная речь не сочетается с фоновой музыкой и звучит это как первые видосы школоты, которые любили на фон поставить музычку по-агрессивнее. да они вроде и сейчас так делают )
@user-iz9sj1nn5q
@user-iz9sj1nn5q Год назад
4:39 Вот так бы сразу - коротко и ясно, а то большую часть ролика прелюдии какие то непонятные про всякие там БЭМы были).
@daymaker_bybit
@daymaker_bybit 4 года назад
Топ!
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Спасибо)
@user-on3rp6qm9d
@user-on3rp6qm9d 4 года назад
Что такое в конце было?) Это вобще законно?)
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Я консультировался по данному вопросу. Да -)
@nimroen1031
@nimroen1031 4 года назад
@@prosto_razrabotka про китайцев, кстати не до конца. у них еще дети появились...
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Nim Roen мое кунг-фу пока слабовато для такого -)
@imvasia13
@imvasia13 4 года назад
а что там по JS?)
@iamname8758
@iamname8758 4 года назад
Ничего не плавится, и бем осваивал и верстку прокачивал, по сути бем за пол часа понять и освоить можно, именно то, что для вёрстки нужно дальше практика, и если что то не по бем сделаешь никто тебя не наругает)
@user-iz9sj1nn5q
@user-iz9sj1nn5q Год назад
3:15 другие подходы помимо БЭМ
@mqtrade5743
@mqtrade5743 4 года назад
4:25 да да хотим
@AK-it4nk
@AK-it4nk 4 года назад
Норм чувак
@perseveranse
@perseveranse 4 года назад
про другие подходы слышал, но видосов нормальных на эту тему пока не видел
@artemlobanchikov2270
@artemlobanchikov2270 Год назад
крутая футболка
@user-uo5do7mf6n
@user-uo5do7mf6n 4 года назад
Да, да расскажи про другие
@viktorprytuliuk6177
@viktorprytuliuk6177 4 года назад
привет. хочу видео о других подходах)))
@nikitabudza2296
@nikitabudza2296 4 года назад
Я был бы не против видосиков про новые технологии
@talbot177
@talbot177 4 года назад
пили видео про другие подходы!
@Vlad-vd2on
@Vlad-vd2on 4 года назад
лайк
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Лайк!)
@UkraineAb0veAll
@UkraineAb0veAll 4 года назад
"ITCSS - не нашел отдельного сайта, но легко гуглится" - выдает вот это itcss.io, правда на этой странице лишь ghbdtncdbt b ссылка на twitter...
@mondragondr
@mondragondr 4 года назад
ITCSS. Что это? Да, хочется узнать подробнее об этом и других подходах! Очень хочется узнать.
@user-lc8vs4pb9z
@user-lc8vs4pb9z 4 года назад
Ну так узнай, кто тебе запрещает)
@mondragondr
@mondragondr 4 года назад
@@user-lc8vs4pb9z где?)
@user-lc8vs4pb9z
@user-lc8vs4pb9z 4 года назад
@@mondragondr поискоковики, ютуб, it блоги. Сначала узнаешь список методалогий, затем по каждой определенно ищешь. А Виталий где будет контент брать? Сам что ли придумает?))) Все уже давно есть. Осталось только прочитать
@mondragondr
@mondragondr 4 года назад
@@user-lc8vs4pb9z )))))
@user-um4rm1no3b
@user-um4rm1no3b 4 года назад
расскажи расскажи))
@maximpanfilov5931
@maximpanfilov5931 3 года назад
Новички путаются что к чему и чем пользоваться потому, что мало кто толком объясняет чем что-то хорошо, а чем какой-либо подход хорошо или удобен, а чем нет.
@WixxTeR
@WixxTeR 4 года назад
ждём видосы про другие
@DmitriyWDL
@DmitriyWDL Год назад
Как заверстать Клару с кораллами, если Карл украл ее кораллы?
@somnvm37
@somnvm37 3 года назад
Насчёт flexbox, я сам пытался использывать float-ы какое-то время, из-за того что какой-то курс по ним был довольно стар. И в итоге я сам понял насколько это криво и неудобно. Насчёт jQuerry, я заню что, и как он стал старым. Я пытался учить JS ещё в 2016, и тогда это звучало свежее. Хотя да, в целом новичёк. Я бы сказал, новичёк это тот кто до сих пор шутит про php
@kojedi8524
@kojedi8524 4 года назад
ещё варианты
@eldr0n
@eldr0n 4 года назад
и что, 4095 селекторов -- это проблема? Вы еще поддерживаете верстку для IE9 ?
@human7058
@human7058 6 месяцев назад
Может мне уже свой придумать подход?😂
@AlekMuz
@AlekMuz 2 года назад
Комментарий =)
@alexeys212
@alexeys212 4 года назад
Хочу.
@iGotton
@iGotton 4 года назад
Расскажи
@Kirill-kh3kt
@Kirill-kh3kt 4 года назад
На собеседовании сказали, что БЭМ умирает и это устаревший подход. Мол, зря я верстаю по БЭМу. А я, как бы, даже не знал про другие подходы ). Начал спорить, но меня непонятными терминами загрузили)
@user-zb7nu5et8o
@user-zb7nu5et8o 4 года назад
Это был рэп в конце? но в основном не плохо!
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Это была разминка голоса перед записью -)
@user-zb7nu5et8o
@user-zb7nu5et8o 4 года назад
@@prosto_razrabotka Просто не буду ничего обьяснять, ты молодец!
@gyros9162
@gyros9162 4 года назад
hhwear?
@eldr0n
@eldr0n 4 года назад
Следуя Вашей же логике: done is better than perfect - соответственно лучше освоить один подход и хорошо его применять, чем пытаться ухватиться за все подряд в поисках перфекционизма. так я не понял. почему БЭМ - зло? Или просто хайпануть решил
@mikhailm6997
@mikhailm6997 4 года назад
Погодь, а где брови?) Наверняка ими кому-то расплатился в обмен на искусство программирования? :b
@truedivan
@truedivan 4 года назад
jquery уже не нужон с новыми версиями ES Bootstrap - для любителей тушенки Float часто неадекватны Flex идеал Grit пока не готов) и сложен
@dashkevi4Mike
@dashkevi4Mike 4 года назад
за 2 часа полноценный лендинг? что за сказки подьехали?
@kuziakivmarko
@kuziakivmarko 3 года назад
Виталий, мы хотим посмотреть видео и о других подходах! Спасибо большое за видео!
@Madskillz_On
@Madskillz_On 4 года назад
крутая футболка
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Спасибо)
Далее
Napoletano Pizza w/ Vincenzo Capuano & @Lionfield
00:39
Как Верстать Макеты Быстрее?
10:55
БЭМ - простыми словами. Часть 1
44:15
Что лучше: Bootstrap или Flexbox?
6:09
Просмотров 24 тыс.
Вёрстка - это просто, если...
5:28