How to use BEM naming CSS in practice? 

Очень развернуто и подробно. Спасибо, Анна😉

Простым и доступным языком всё объяснила. Спасибо тебе большое! Снимай побольше таких полезностей)

Классное видео! Не знаю, почему у тебя его не видел раньше. Попадалась эта тема где-то, но не особо усваивалась почему-то. Теперь всё очень понятно)

Это лучшее описание методологии БЭМ, которое я видел! Анна, огромное спасибо. За шпаргалки отдельное спасибо;)

Большое вам спасибо за видео и подробный рассказ о вёрстке! Узнала много нового для себя. Успехов и продвижения на ютьюб вашему каналу! От меня лайк.

Анна, не важно как правильно произноситься(учитывая комментарий ниже) а важно, что уроки у вас всегда короткие и при этом очень познавательные!СПАСИБО!

отличное видео! грамотный разбор теории для верстки сайта по методологии БЭМ. спасибо

Спасибо вам ! Очень доступно объясняете. Кстати , хорошо подобрана фоновая музыка , не отвлекает , но в то же время немного оживляет процесс прослушивания

Очень занятный и лично для меня полезный ролик, много нужной информации я для себя подчеркнул.

отличный разбор теории и наработка практики по верстке сайта по методологии БЭМ! все понятно и грамотно!

Спасибо за видео- как раз то, что я искала!

Действительно, такой ролик очень долго ждали многие.

Как всегда отличное качественное профессиональное видео! Это пять!

По методологии БЭМ нельзя делать так, как вы это сделали на 23:11. Селекторы тегов *не должны* использоваться. По идее, каждому элементу с тегом нужно было присвоить класс и обращаться к нему уже по имени класса. Иначе тем самым вы повышаете специфичность селектора, что повлечёт сложности при дальнейших изменениях.

Посмотрю на выходных, но чувствую, что видно годное

Узнала много нового для себя. Успехов и продвижения на вашему каналу!

Спасибо большое! Отличная подача, всё доходчиво, если честно всё это я хорошо знаю, но оторваться не смог, да конца досмотрел))

Наконец нашел отличный видео ролик о примере реализации бэм технологии. Спасибо огромное за обучение, как то на примерах учусь быстрее)

Классное видео. Автору респект и отдельное спасибо, за то что делиться своим опытом.

Очень много полезной информации по вёрстке, спасибо автору.

Очень полезное видео, всё подробно и понятно! Спасибо большое!

Анна, я только стал разбираться в БЭМ, адаптивной верстке и во всем, что с этим связано. Ваши видео очень помогают погрузиться в тему и проникнуться, как и что делать в процессе. Основная ценность, что вы неразрывно все делаете в процессе, показывая наглядно, как думаете, что делаете и как меняете код. Спасибо вам огромное, смотрю ваши видео с огромным удовольствием!

Отличное видео, спасибо большое! И голос очень приятный., для видео это просто шикарное дополнение, в нагрузку к содержанию, так сказать.

Так все четко и понятно - просто круто смотреть такое видео.

Всё понятно, осталось закрепить на практике, спасибо!

Спасибо большое, узнал много нового))

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

Спасибо за разбор теории и наработка практики.

Умница, спасибо за четкое разъяснение. И за ссылки.

Хорошее видео, то что нужно

Спасибо. Будем пробовать. Хотя по сути почти до бэма сам додумался. Но нюансы есть) спасибо еще раз. Стало гораздо понятнее что имеет ввиду Яндекс

Спасибо автору за подробную и доходчеву информацию.

Отлично, всё разложено по полочкам, сразу вилна рука мастера.

За шпаргалку по Flexbox отдельное спасибо!

Для тайтла можно было не добавлять дополнительную обертку, а смиксовать с элементом page, сделав классы title как отдельный блок и page__title, как элемент, к которому и применить все отступы. На сайте БЭМ это называется микс

Спасибо! Очень полезное видео!

Сейчас даже на курсы ходить не надо, все есть в интернете. Подробно, размеренно рассказано и показано.

Повторенье мать ученья, в принципе почти все это я уже знал, но было интересно во становить в памяти кое что из материала. Очень доступно и интересно!

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

Отличное видео, просто супер, посмотрела с большим удовольствием класс

Уже 2 месяца пользуюсь Вашим сайтом с шпаргалками. Теперь знаю кому нужно сказать огромное спасибо!)

Очень классный и полезный видос!! Пасиб!

Спасибо Анна. Царский лайк.

Очень познавательный урок и просто и понятно)

Так забавно когда говоришь с "чисто английским" акцентом но маргин и алижн )) и emmet совсем не используешь в целом спасибо за урок

восхитительно, мне понравилось. спасибо огромное)

Топ видео, спасибо 🎉

Троим блогерам смело ставлю лайки и коменты пишу! Анна одна из них! Спасибо за видео

отличное подробное показательное видео достойное непременного внимания каждого заинтересованного зрителя

Спасибо за такое видео

Молодец, просто и доходчиво!

Анна, большое спасибо.

большое спасибо - классное видео!

Ну вот простым и доступным языком всё объяснила. Снимай побольше таких полезностей!!!!!!!

да,очень внятно и понятно))

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

Очень нравятся твои уроки

Спасибо большое!

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

4:07 - на примере один блок, внутри которого 2 строчных элемента, а вы говорили про необязательность наличия элементов в блоке. Пример нерелевантен? Или имеется ввиду то, что у вложенных элементов названия классов не соотносятся с названием класса блока?

чуть-ли не лучшее, что я вообще видел на ютубе по теме верстки, огромное спасибо:3

Когда планируете сделать курс по word press? Хотелось бы чтоб вы рассказали для чего нужен вордпресс и подобные системы и тд, спасибо

Отличный гайд, спасибо! Но хотел бы сделать небольшое замечание: Не многовато ли div? Многие div можно сделать списком. некоторые - section. Я бы block-number сделал таблицей или списком. По больше бы семантики)

В видео изложен материал простым и доступным языком...Информацию буду использовать и для себя.

Спасибо полезно

Прекрасная работа

Очень развернуто и подробно. Спасибо, Анна! Но с названиями классов, я запутался 22:42.. Какие из них является блоками, а какие сами по себе, и если размеры нельзя задавать, то почему задается ширина в %?. в 28:43 (используются паддинги), то есть внутренние отступы можно?

Спасибо за урок) есть возможность бросить материалы урока? Верстка и psd, в целях обучения. Очень стильный дизайн

Плагин Live Server для VSC отменяет необходимость постоянной перезагрузки браузера

Привет Анна 1) Почему для блоков нельзя создавать объёртку? 2) Wrapper (wrap) это одно и тоже что и container?

Да мы тут сделаем span или strong - доступность к "чертям", что такого важного в этих цифрах, чтобы делать на них акцент ?

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

Все просто и ясно и столько нюансов. Хорошее объяснение и столько информации.

устроился в офис и требуют от меня верстку по БЭМ, видео во время вышло хех

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

Хорошее видео. За ссылку названия классов отдельное спасибо!

Спасибо)))

Не нужно ли для block-skills прописать flex-wrap: wrap? т.к в дальнейшем будет несколько таких блоков и для того что-бы следующие блоки шли вниз нужно прописать flex-wrap: wrap Если без него тогда все внутрение блоки будут ити в строку

Спасибо! Лайфрелоада не хватает. Каждый раз обновлять страницу вручную наверное заморочно.

29:15 объясните почему необходимо было создавать .page-block-portfolio? разве одним блоком .block-portfolio было не обойтись?

Как быть со стилями для шрифтов (жирность, размер, начертание и т.д)? Стоит ли использовать общие классы(.title-14px, descr-20px) для них или использовать перечисление через точку (.block-1__title, .block-2__descr ...) ???

Макет, показанный в видео - бомбический, мне нравится. Вы его внедрили куда-то на рабочий сайт? Можно посмотреть? спасибо!

Здравствуйте. У вас есть блок "block-skills", который включает другие блоки "box-skills". Собственно вопрос: почему не использовать элементы вместо внутренних блоков, если они не будут использоваться вне блока "block-skills"? Хочу понять методологию. Спасибо.

Спасибо вам! Не могли бы вы снять видео «настройка вебпака для верстки»?

Блоку не указывается внутренние и внешние отступы. Блоки можно вкладывать друг в друга. Wrap это разве не блок? Если это блок то почему ему указываем padding? 11:55 . Я предполагал что если хочешь позиционировать то используй это элементами. wrap__text задавать margin.

Слушай там column, col есть ошибка "стрлбца"

Все отлично кроме слова "align". Это не "элижин" это "элайн". Очень прям бьет по ушам

Анна, а вы сами пользуетесь этой методологией?

Благодарность , отличное видео, однако чуток не ясно идея модификаторов в контексте данного видео, кто может поясните !?

когда пишешь паддинги в контейнере - оно же сьедает ширину? нужно ведь 1200 написать, чтоб рабочего пространства осталось 1170 как заявлено ( если паддинг 15рх)? подскажите пожалуйста.

как вы сделали такую анимацию появления блоков? какой-то плагин?

Не очень понял про служебные блоки, которыми оборачиваются обычные для того, чтобы последним задать отступы. Как понятие "служебный блок" относится к методологии БЭМ? Вроде бы нет таких. Не будет ли правильнее в этом случае использовать модификатор? Это не критика, я правда интересуюсь, т.к. не понял. Если кому не лень - объясните плз.

Не понял, причем тут БЭМ и Ваше видео. От того, что вы сделали название классов как в БЭМ, БЭМ оно не стало. В чем отличие от обычной верстки? Все так же в куче навалено в одном файлике html и в одном файлике css.

есть расширение css peek для vscode - которое помогает менять css по комбинации клавиш, не переключая мышкой/тачпадом

Для page-block-portfolio задали внешний отступ, хотя в начале видео говорили, что для блоков это недопустимо.

Анна, а можете ссылочку или приложить данный шаблон, чтобы по ходу видео самому верстать?

вообще, БЭМ это не только методология именования классов, это гораздо больше, лично я использую только именования

А не удобнее модификатор 2 дефисами обозначать?

А для чого писати width 100% і вказувати ще max-width:1100? Щоб фон був на всю сторінку,а текст на 1100?

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