How to use BEM naming CSS in practice?
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- Services:
1) Naming HTML/CSS - tpverstak.ru/c...
2) Flexbox CSS Сheatsheet - tpverstak.ru/f...
______________
Website - tpverstak.ru
VK - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak и t.me/annbloknote
Telegram Chat - t.me/tpverstak...
Очень развернуто и подробно. Спасибо, Анна😉
Анна, не важно как правильно произноситься(учитывая комментарий ниже) а важно, что уроки у вас всегда короткие и при этом очень познавательные!СПАСИБО!
Спасибо 😊
По методологии БЭМ нельзя делать так, как вы это сделали на 23:11. Селекторы тегов *не должны* использоваться. По идее, каждому элементу с тегом нужно было присвоить класс и обращаться к нему уже по имени класса. Иначе тем самым вы повышаете специфичность селектора, что повлечёт сложности при дальнейших изменениях.
Это лучшее описание методологии БЭМ, которое я видел! Анна, огромное спасибо. За шпаргалки отдельное спасибо;)
☺️☺️☺️
Анна, я только стал разбираться в БЭМ, адаптивной верстке и во всем, что с этим связано. Ваши видео очень помогают погрузиться в тему и проникнуться, как и что делать в процессе. Основная ценность, что вы неразрывно все делаете в процессе, показывая наглядно, как думаете, что делаете и как меняете код. Спасибо вам огромное, смотрю ваши видео с огромным удовольствием!
какие успехи сейчас?
Простым и доступным языком всё объяснила. Спасибо тебе большое! Снимай побольше таких полезностей)
Классное видео. Автору респект и отдельное спасибо, за то что делиться своим опытом.
Спасибо ☺️
Так забавно когда говоришь с "чисто английским" акцентом
но маргин и алижн ))
и emmet совсем не используешь
в целом спасибо за урок
Сейчас даже на курсы ходить не надо, все есть в интернете. Подробно, размеренно рассказано и показано.
Да и очень удобно и достаточно понятно объясняют
единственное что нужно под рукой иметь план обучения, последовательность тем.
Троим блогерам смело ставлю лайки и коменты пишу! Анна одна из них! Спасибо за видео
🤗🤗🤗
Как всегда отличное качественное профессиональное видео! Это пять!
Очень классный и полезный видос!!
Пасиб!
Наконец нашел отличный видео ролик о примере реализации бэм технологии. Спасибо огромное за обучение, как то на примерах учусь быстрее)
Действительно, такой ролик очень долго ждали многие.
Уже 2 месяца пользуюсь Вашим сайтом с шпаргалками. Теперь знаю кому нужно сказать огромное спасибо!)
Рада, что вы пользуетесь ими 🤗
отличный разбор теории и наработка практики по верстке сайта по методологии БЭМ! все понятно и грамотно!
озвучка на высоте))) приятно слушать, нету агрессивной музыки, а приятная))) и само БЭМ понятно и без лишней воды)))
отличное видео! грамотный разбор теории для верстки сайта по методологии БЭМ. спасибо
Очень много полезной информации по вёрстке, спасибо автору.
Посмотрю на выходных, но чувствую, что видно годное
Для тайтла можно было не добавлять дополнительную обертку, а смиксовать с элементом page, сделав классы title как отдельный блок и page__title, как элемент, к которому и применить все отступы. На сайте БЭМ это называется микс
Thenks
Спс
Узнала много нового для себя. Успехов и продвижения на вашему каналу!
Спасибо большое! Отличная подача, всё доходчиво, если честно всё это я хорошо знаю, но оторваться не смог, да конца досмотрел))
😊😊😊
Очень занятный и лично для меня полезный ролик, много нужной информации я для себя подчеркнул.
Вау! Просто вау! Проделанная работа выше всяческих похвал, после данного видео даже мой кот перешел на БЭМ )))
з.ы. Очень бы хотелось увидеть в будущем полную реализацию БЭМ-верстки макета, который использовался в видео.
чуть-ли не лучшее, что я вообще видел на ютубе по теме верстки, огромное спасибо:3
Спасибо :)
Так все четко и понятно - просто круто смотреть такое видео.
Ну вот простым и доступным языком всё объяснила. Снимай побольше таких полезностей!!!!!!!
Очень полезное видео, всё подробно и понятно! Спасибо большое!
Всё понятно, осталось закрепить на практике, спасибо!
даже и не подозревала о таких возможностях,отличный ролик,спасибо за науку.
Отлично, всё разложено по полочкам, сразу вилна рука мастера.
отличное подробное показательное видео достойное непременного внимания каждого заинтересованного зрителя
Повторенье мать ученья, в принципе почти все это я уже знал, но было интересно во становить в памяти кое что из материала. Очень доступно и интересно!
Отличное видео, спасибо большое! И голос очень приятный., для видео это просто шикарное дополнение, в нагрузку к содержанию, так сказать.
Умница, спасибо за четкое разъяснение. И за ссылки.
В определении блока, написано, что он не должен влиять на своё окружение и стили не должны содержать описание, размеров, границы, отступы. Тогда вопрос, почему во время стилизации блокам спокойно были присвоены свойства типа margin, padding, width, max-width? Это я что-то не понял, или всё же блоки могут иметь свойства описывающие их размеры.
Чтобы не быть голословным, вот на 11:30 БЛОК wrap получает свойства width, max-width, padding... А потом говорится, что т.к. нельзя присвоить стили для размеров и отступов, надо сделать обертку, и она делается уже на другой элемент...
И так было сделано далее и ещё для нескольких блоков, например box-skills, меня одного это смутило?
Как сказал ранее Андрей Мошков, если смотреть документацию от создателей, то там для задания размеров и отступов надо использовать миксование.
Спасибо автору за подробную и доходчеву информацию.
Не понял, причем тут БЭМ и Ваше видео. От того, что вы сделали название классов как в БЭМ, БЭМ оно не стало. В чем отличие от обычной верстки? Все так же в куче навалено в одном файлике html и в одном файлике css.
объясните пожалуйста как правильно
@@AshKod-sj1rt судя с сообщения, автор комментария слабо понимает что такое верстка, не говоря уже про методы...
@@AshKod-sj1rt он наверное имел ввиду порезать index на отдельные компоненты, а потом собирать их через pug, так же и с css, у bootstrap например все компоненты css разделены и собираются через import так же есть файл настройки variable где можно глобально настраивать цветовую схему и т.д ну или хз
Отличное видео, просто супер, посмотрела с большим удовольствием класс
Плагин Live Server для VSC отменяет необходимость постоянной перезагрузки браузера
возможно это сделано для лучшего понимания изменений
Спасибо за разбор теории и наработка практики.
За шпаргалку по Flexbox отдельное спасибо!
восхитительно, мне понравилось. спасибо огромное)
я рада, что видео вам понравилось :)
Очень познавательный урок и просто и понятно)
Все отлично кроме слова "align". Это не "элижин" это "элайн". Очень прям бьет по ушам
И не «ма́ргин», а «ма́рджин».
Syreon514 : парень ты уверен? align звучит как "элайн", если погуглишь найдешь как это звучит , а то что ты "алижин", у всех своя личная жизнь.. а тут про html, css...
@@МаркСоловьёв-ц3м она говорит как пишется, очень хорошая техника запоминать как писать английский, так что пусть продолжает, тут же не урок английского, тем более судя по коммментам тут в нем никто и не шарит, но все делают замечания.
@@lisafox9026 Align звучит как Элайн)) чё там гуглить, заходишь на гугл транслейт и слушаешь)
@@lisafox9026 что ответили?)
29:15
объясните почему необходимо было создавать .page-block-portfolio? разве одним блоком .block-portfolio было не обойтись?
Мне тоже это интересно. Притом к классу .block-portfolio, вроде как, вообще никакие стили не применялись. Марджин-ботом, вполне можно было и к этому диву применить.
Блоку не указывается внутренние и внешние отступы. Блоки можно вкладывать друг в друга. Wrap это разве не блок? Если это блок то почему ему указываем padding? 11:55 . Я предполагал что если хочешь позиционировать то используй это элементами. wrap__text задавать margin.
Да мы тут сделаем span или strong - доступность к "чертям", что такого важного в этих цифрах, чтобы делать на них акцент ?
В видео изложен материал простым и доступным языком...Информацию буду использовать и для себя.
Что можете сказать о полученной информации, как у вас успехи с версткой сайтов, поделитесь вашими достижениями.
Хорошее видео, то что нужно
Топ видео, спасибо 🎉
Спасибо! Очень полезное видео!
какое видео смотрю много полезной информации но как можно учить если ты сам не владеешь полностью всей информацией? что за модификатор page_gray? если цвет потом поменяешь то класс тоже будешь менять? зачем плохому то учишь? на крайний случай page_bg, page_dark и тд.
В CSS у .page_gray всегда будет цвет gray. Если нужно поменять цвет блока, прописываешь ему новый класс с нужным цветом. На примере кнопок это понять проще: например, на сайте есть кнопки красного и зелёного цвета. Html кнопки будет всегда один: Text, а модификатором указываешь её цвет: Text. На практике так проще и правильнее, чем для каждой кнопки по отдельности прописывать стили.
@@ovasendin Неправильно мыслишь. Ты захотел поменять цвет кнопки с красного на фиолетовый, после чего кнопка с btn_red будет фиолетовой, а не красной. Поэтому btn_color1.
@@ИльяМ-ь1ж bnt_color1 - ни о чём не говорит. "Color1? Hmm..." Если хочешь поменять цвет кнопки на фиолетовый, пропиши ей btn_violet
@@ИльяМ-ь1ж уточню. Смысл этого подхода в том, чтобы бегло осматривая исходный код, понимать, что тут происходит. Разных кнопок может быть 10, если у каждой будет прописан ColorN, то надо будет искать его дополнительно в стилях. А если ColorN будут перезаписываться, это ещё больше усложнит поддержку. Кому это надо, если можно явно указать цвет? Также, можно использовать названия btn_error или btn_success, например, если не привязываться к цветам. Тогда можно будет легко менять цвет, и код по-прежнему останется легко читаемым при беглом осмотре.
@@ovasendin с твоим подходом проще писать style="color: red" :) (сарказм, если что) color1 говорит о том, что это какой-то цвет с индексом 1 - самое главное преимущество, что когда решишь поменять цвет, не нужно будет менять классы по всем макетам страниц, как предлагаешь ты, а увидеть, какой же цвет соответствует color1 совсем не проблема, надеюсь, ты понимаешь как это сделать :)
Спасибо большое, узнал много нового))
Очень нравятся твои уроки
В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов -> ru.bem.info/methodology/css/
это про .box-numbers-text span на 23:16
Кроме того, каскад тоже не используется. Видимо автору было влом переделывать структуру.
Все просто и ясно и столько нюансов. Хорошее объяснение и столько информации.
Вполне с вами согласна.Информация полезная и актуальная. Думаю многим пригодится.
4:07 - на примере один блок, внутри которого 2 строчных элемента, а вы говорили про необязательность наличия элементов в блоке. Пример нерелевантен? Или имеется ввиду то, что у вложенных элементов названия классов не соотносятся с названием класса блока?
К сожалению, могу только 1 лайк поставить, а то поставил бы 10 не глядя. Отличное видео, спасибо)
Спасибо вам ! Очень доступно объясняете.
Кстати , хорошо подобрана фоновая музыка , не отвлекает , но в то же время немного оживляет процесс прослушивания
Отличный гайд, спасибо!
Но хотел бы сделать небольшое замечание: Не многовато ли div? Многие div можно сделать списком. некоторые - section. Я бы block-number сделал таблицей или списком.
По больше бы семантики)
Молодец, просто и доходчиво!
устроился в офис и требуют от меня верстку по БЭМ, видео во время вышло хех
как успехи работы в офисе? :)
Тоже самое, но это звучит дико удобным.
Привет Анна
1) Почему для блоков нельзя создавать объёртку?
2) Wrapper (wrap) это одно и тоже что и container?
Анна, большое спасибо.
Спасибо Анна. Царский лайк.
вообще, БЭМ это не только методология именования классов, это гораздо больше, лично я использую только именования
как для начинающих - очень полезно и обучающе, понравилось произношение английсских слов автора.
Не пойму названия и смысла этого видео. От методологии БЭМ тут только названия классов..и то, сомнительное, "page__block", не даёт мне никакого описания, здесь может быть все что угодно. Ну и бутстрап, когда уже есть и так ванильный CSS
Просмотрел от и до. Когда на живом примере намного понятнее чем я читал документацию. Спасибо за проделанную работу!!! И сразу вопрос - я правильно понял что в каждом случае мы создаем блок который никак не стилизуем, а наполняем его контентом и этот блок сам принимает нужный размер? То есть мы можем стилизовать все блоки внутри но внешний не трогаем вообще.
На заметку: не копируйте текст «КАПСОМ», при натяжке на CMS могут быть проблемы, т.к. клиент будет вводить без КАПСА, отсюда и отличие от дизайн-макета. Да, клиент может заметив набрать текст «КАПСОМ», но это уже гемор...
В общем вводите текст и стилизуйте уже через CSS.
P.S. Урок полезный, а всё что выше (комментарий), предназначено для новичков. И это ни в коем случае не камень в огород автору видео. :)
она же сказала, смысл не в стилизации, да, не спорю важно что бы текст в html документе не был прописан капсом, но этот урок явно не об этом
@@fmleglrmglrml Этот урок смотрят новички, а новички обычно делают всё в точности по видео.
@@Shakhrom-b7d новичок здесь)
Хорошее видео. За ссылку названия классов отдельное спасибо!
...и за шпаргалку по Flexbox CSS тоже.
А для чого писати width 100% і вказувати ще max-width:1100?
Щоб фон був на всю сторінку,а текст на 1100?
Спасибо за видео! НО, я так и не понял зачем делать скил отдельным блоком, вы же сначала сказали что блоки создают тогда если нам еще надо будет их где нибуть на страничке испольщовать, но мы же их использовать будем в одном месте всегда, добавляя новый елемент скила, тоесть его можно делать елементом типа block-skills__item так как мы будем его использовать только в блоке со скилами, да и класс box-skills для одного скила как то вводит в заблуждение, скил то один а в классе сказано что много)
Солидарен с вами. Если больше нигде не используется такой блок, кроме как внутри блока, то делаю элементами. Смысла нет в блок выделять.
Когда планируете сделать курс по word press? Хотелось бы чтоб вы рассказали для чего нужен вордпресс и подобные системы и тд, спасибо
Курс выйдет ближе к лету
Спасибо за такое видео
Благодарю Вас, Анна. Зарабатываю хорошие деньги используя Ваши советы
Спасибо за видео
Алигн, маргин, видтх, пздц...
Элайн, маржин, вэдф
Первый раз вижу чтобы чтобы верстак ходил куда-то копировал свойства флексов. Я понимаю ещё генераторы шаблонов в гридах, но Флекс из шпаргалки это уже перебор.
Сетка такая подходит только для простых лендосов. Если верстать интернет магазин или сервис с кучей кнопок, то нужен грид темплейт для блоков
А так видео хорошее
большое спасибо - классное видео!
Для page-block-portfolio задали внешний отступ, хотя в начале видео говорили, что для блоков это недопустимо.
Странно , но БЭМ как бы намекает что они преследуют цель уменьшить копипаст, о всё видео мы этим и занимаемся , в чем же смысл? Если делать все блоки примерно похожими то копипаст будет в любом случае, но если делать дизайн чуть сложнее чем то что в примере то вся теория сливается в унитаз
Ну хоть кто то с головой)) а то всем и так "полезно")
Значит вы не поняли методологию. Лично я при помощи БЭМ верстал сайты, состоящие из 30+ макетов, были сайты с крайне сложным дизайном или огромным количеством различных элементов вложенных друг в друга. При этом никаких серьёзных проблем я не испытывал, не было вот этого, что где-то что-то поехало и непонятно почему, нет этой вечной борьбы с CSS селекторами. При желании каждый из этих проектов можно увеличить в 2+ раза без превращения их в кашу. Не представляю, как этого можно добиться без БЭМ.
@@r45her если юзать препроцессоры и делать всё модульно то срать на копипаст
@@fmleglrmglrml да, разумеется модульность и инструменты разработки это мастхев. Одно другому не мешает.
Макет, показанный в видео - бомбический, мне нравится. Вы его внедрили куда-то на рабочий сайт? Можно посмотреть? спасибо!
Нет, он будет использоваться на курсе по Wordpress
Ну почему же вы показываете пример бэм без какого-либо css препроцессора, дающего возможность вложенности? Имхо, данную методологию стоит рассматривать только на примере синтаксиса less, sass, scss
еще бы это все на галпе каком-нибудь с sass'ом каким-нибудь, чтобы у обучаемых возникло понимание иерархичности БЭМ
Очень развернуто и подробно. Спасибо, Анна! Но с названиями классов, я запутался 22:42.. Какие из них является блоками, а какие сами по себе, и если размеры нельзя задавать, то почему задается ширина в %?. в 28:43 (используются паддинги), то есть внутренние отступы можно?
интеграция, а не "натяжка"
БЭМ не рекомендует селекторы по тегам
Спасибо вам! Не могли бы вы снять видео «настройка вебпака для верстки»?
Юра Крацер могла бы
Жду с нетерпением:)
После гласных е, i, y в английском g произносится как джи а в остальных случаях г. А так видео топ, все понятно! Спасибо.
не верно. тут "г" , вообще не звучит, загуглите сначала,!! при чем тут английский? тут про верстку
@@lisafox9026 про то, что в слове "margin" - "г", вообще не звучит - он и говорит.
@@ДмитрийРайдак он сказал а в остальных случаях г. поэтому я написала
Не понял... а где модификаторы? Зачем делать div для отступа если это для модификаторов задача? или нет
да,очень внятно и понятно))
Не очень понял про служебные блоки, которыми оборачиваются обычные для того, чтобы последним задать отступы. Как понятие "служебный блок" относится к методологии БЭМ? Вроде бы нет таких. Не будет ли правильнее в этом случае использовать модификатор? Это не критика, я правда интересуюсь, т.к. не понял. Если кому не лень - объясните плз.
Честно говоря, ненавижу такую систему имен, потому что во-первых - увеличивается размер кода, что не очень хорошо (особенно когда код большой), а во-вторых - читабельность падает.
Что характерно, при таком подходе на обслуживание кода в процессе его написания может уйти времени не меньше, чем требуется для того, чтобы потом разобраться в чужом коде аналогичного объема для макета аналогичной сложности, написанном без этой БЭМ-лапши. Но есть ньюанс: к сожалению, работодатели в СНГ требуют все модное (а БЭМ модный) в обязательном порядке. По слухам, даже на фрилансе заказчики иногда выпендриваются (вот это вообще смешно).
Забавно было бы посмотреть, как эти адепты БЭМ клепали свою лапшу в макетах с большим кол-вом заезжающих друг на друга блоков. Ах да, в рафинированных условиях с карманными дизайнерами с таким не сталкиваются...
Как быть со стилями для шрифтов (жирность, размер, начертание и т.д)?
Стоит ли использовать общие классы(.title-14px, descr-20px) для них или использовать перечисление через точку (.block-1__title, .block-2__descr ...) ???
Анна, а вы сами пользуетесь этой методологией?
Все замечательно, но нет никакого смысла давать названия блочные заголовкам типа
В данном случае есть смысл использовать наследование такого плана .родительский-блок h2{color%#...;} . В итоге вам кода прийдется писать меньше и упростит привязку макета к cms.
2:09 - так не понял, нельзя позиционирование делать?
есть расширение css peek для vscode - которое помогает менять css по комбинации клавиш, не переключая мышкой/тачпадом
когда пишешь паддинги в контейнере - оно же сьедает ширину? нужно ведь 1200 написать, чтоб рабочего пространства осталось 1170 как заявлено ( если паддинг 15рх)? подскажите пожалуйста.
Спасибо)))