Методолгия БЭМ за 19 минут / Как правильно называть классы CSS

В этом видео мы поговорим о том, как правильно называть классы CSS по методологии БЭМ.
БЭМ (Блок, элемент, модификатор) - методология разделения конструкции сайта на независимые компоненты.
1. Блок - основной компонент страницы, который может быть использован повторно
2. Элемент - составной компонент блока, который не может быть использован вне этого блока
3. Модификатор - компонент определяет состояние или поведение блока
Буду рад любым пожертвованиям;
Тинькофф - 5536 9137 6324 5442
Сбербанк - 5469 6200 1922 8210
QIWI - 4890 4947 4726 5197
Желаю приятного просмотра!
Если у тебя возникли какие-либо вопросы - обязательно задавай их в комментариях под видео.
Связаться со мной можно по следующим контактам:
verstach
t.me/beleckyweb
/ belecky_web

[@trendsgallery]

Уже фиг знает сколько смотрю роликов по БЭМ. У каждого какая-то своя методология)

[@aharito]

Ппц, я смотрю ради интереса 3-й ролик - люди вообще объяснять не умеют, свое что ли снять, я хоть и не "блохер", но в 100 раз лучше поясню.

[@unknownartistrecords6503]

True

[@momenttv9632]

Давно хотел изучить эту методологию, но на всех каналах сплошная вода, а тут за 19 минут всё по полочкам и доступно! Лайк и подписка

[@verstach]

Рад стараться, спасибо за подписку. Какие ещё уроки хотел бы видеть на канале?

[@rostellagordeeva4375]

За 19 минут понял больше чем если сам копал пару дней Спасибо за уроки

[@verstach]

Ура! Рад это слышать, спасибо!

[@sonexplay509]

Круто, как я раньше тебя не встречал на ютубе делай ещё, лайк подписка

[@verstach]

Надеюсь что будете встречать чаще, спасибо:)

[@dariaikon8911]

Классная объяснение, спасибо 🙌🏽

[@michailpty6302]

Спасибо большое, доступно и понятно 😊

[@jahongirmusayev658]

Спасибо! Отличное объяснение!

[@feniletilamin5197]

Одно из самых понятных объяснений, спасибо

[@verstach]

Рад, что понравилось. Спасибо за просмотр)

[@leonillamoiseeva9268]

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

[@verstach]

По-стараюсь взрываться по-чаще тут :))

[@dimalukashenko4865]

Хороший урок, спасибо за труд

[@hertz3001]

волшебно и полезно как всегда )

[@verstach]

Спасибо! С наступающим!

[@user-db6fv9oy2x]

Благодарю за ролик. Кратко. Доступно. Просто. Понятно.

[@shohjahontv4053]

Блин это просто пушка, настолько всё четко разложил

[@verstach]

Рад, что видео оказалось полезным! Спасибо за отзыв)

[@igordzhenkov5860]

Отлично рассказал. Наконец-то понял 👍

[@user-jk4cn2xh7k]

Спасибо, очень доступно и понятно

[@CATMON_]

Огромное спасибо) быстро и понятно) очень помогло ваше видео))

[@OlegGuitar]

Спасибо! Все очень понятно объяснил)

[@user-sn4ff8ed6e]

Спасибо за доступный туториал

[@verstach]

Спасибо за приятный отзыв!

[@user-qy7kb3xf8r]

Спасибо за полезный урок

[@verstach]

Спасибо за отзыв!)

[@OneLife1144]

Круто и очень доступно Респектос

[@ustinovdionisii3898]

это просто пушка, пили ещё

[@verstach]

Рад что видео оказалось полезным! Спасибо

[@alextopsite]

Спасибо! Хорошее видео и всё рассказано

[@user-wm5xf6np4g]

Спасибо за ролик!

[@denismaltcev3356]

Огромное спасибо за видео ))

[@verstach]

Очень рад, что видео оказалось полезным:) Спасибо

[@user-ij3zp1iu7s]

Очень информативно, спасибо

[@verstach]

Очень рад, что видео оказалось полезным!

[@OneLife1144]

Увидел в рекомендациях, посмотрел видео и незадумываясь подписался

[@verstach]

Очень рад это слышать, спасибо!

[@user-cg6nf3gd8r]

Супер Хочется ещё больше лайфхаков по верстке

[@verstach]

Спасибо! Дальше - больше) Подписывайтесь, чтобы не пропустить новые видео.

[@Aleksandr_Kvadrat]

блииин! как боженька объяснил!

[@4ITTonik]

Модификатор пишется как: block__element_modify, согласно оф. документации.

[@dimondimonov6417]

Он так и писал

[@MrLutor]

@@dimondimonov6417 нет, он в ролике писал модификатор так: block_element_modify

[@yadreyy]

@@MrLutor прочитай, что ты написал)

[@MrLutor]

@@yadreyy прочитал, и в чем проблема?

[@yadreyy]

@@MrLutor я не заметил разницы между _ и __. Вы ведете себя как-то очень странно. Какой-то тип по своей прихоти придумал дурацкое правило, а вы в комментах глотки грызете друг другу из-за этого. «__» это как висячий предлог - яйца выеденного не стоит, а люди баталии из-за этого устраивают в комментах)

[@sevastyanavoroncova4553]

Лучший просто Подписка

[@verstach]

Буду стараться ещё больше, спасибо!

[@katerinakaterina3398]

круто!!! спасибо

[@suvilehamir9847]

Очень круто

[@verstach]

Рад, что видео оказалось полезным)

[@user-pm4fz1rn5q]

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

[@jonimonik6575]

Блеаха, спасибо дружище! Наконец я все расставил по местам в своей голове, с твоей помощью. Не курю (бросил), но сча схожу дуну. Очень быстро говоришь, голова слегка увеличилась.:)) Спасибо еще раз, искал я именно это судя по всему.

[@verstach]

Очень рад, что было полезно)

[@TheZver63]

@@verstach да, канабис полезный

[@user-rb9ue4gz6q]

Мощно!

[@verstach]

Спасибо! Стараюсь не допускать, чтобы было иначе:)

[@prognoz_absolut1519]

Интересно рассказываешь

[@verstach]

Спасибо за оценку, рад стараться)

[@UserUser-ik9fx]

Я редко ставлю кому то лайки, но за твой видос поставлю даже 2

[@user-hx7ev3bm9x]

Верстач как обычно сделал пушку респект

[@verstach]

Спасибо, буду стрелять чаще :)

[@opencartpro2595]

Очень хорошо объясняеешь.

[@verstach]

Спасибо, рад стараться)

[@shohjahontv4053]

я в шоке, однозначно подписка

[@verstach]

Очень рад, что видео оказалось полезным!:)

[@cvetamoiseeva8854]

интересно рассказываешь

[@verstach]

Главное чтобы было доступно и понятно:) Спасибо!

[@dyachkovputimir9722]

это самое лучше объяснение среди всего хлама на ютубе

[@verstach]

Рад это слышать, спасибо!

[@L0list]

Дружище) Спасибо тебе человеческое) Я настолько запутался с этими классами (только учусь разработке), вроде классы прописал, все работает, но понимаю, что код кривой) Благодаря тебе разобрался)

[@verstach]

Очень приятно видеть что контент приносит пользу ❤️ Спасибо)

[@L0list]

@@verstach могу ли я задать где-то в личке ещё пару вопросов которые у меня остались, есть ли возможность у тебя помочь?

[@moscowstanislav]

Здравствуйте! Пожалуйста, подскажите, при назначении класса для элемента обязательно между словами ставить двойное "нижнее подчеркивание"?

[@user-hl9xd5ro7u]

Лови подписочку, лайкосик и колокольчик Порекомендовал друзьям

[@verstach]

Спасибо! Рад что видео оказалось полезным)

[@AynaOracle]

Сделайте ещё по бэму ролики, например для форм, для всяких флексов и гридов. Спасибо.

[@verstach]

Хорошая идея, сделаю)

[@StonHenge]

Всё понятно, спасибо!) Надеюсь это всё ещё актуально. Но я так понял модификаторы можно по-разному называть. Например footer__menu--item--active можно назвать?

[@sharomet]

Спасибо. А какой синтаксис является правильным? .block__element--modificator Или же тот который используете вы: .block__element_modificator ?

[@user-xv5bt2fy2z]

.block__element--modificator --- тут element--modificator - это единый элемент из двух слов (просто вместо пробела -), .block__element_modificator --- тут element_modificator - element является елементом, а modificator - модификатор элемента element

[@elmarburov9867]

Верстач ты крут

[@verstach]

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

[@AnnaZnamova]

Спасибо, очень понятное объяснение 👏

[@fron5455]

Т.е мы делаем блок с элементами внутри( т.е шаблон) потом применяем этот шаблон где хотим и изменяем этот шаблон с помощью модификатора или я не понял чёто ?(4 часа утра писаль )

[@Metotron0]

Информация не доведена до конца. Вот мы написали footer_button_size, и нам нужен такой же размер шрифта в другом месте, что мы там напишем, тоже footer_button_size? Но это не логично, ведь элемент больше не находится в футере. Если уж речь о переиспользовании, значит классы должны перетаскиваться туда-сюда, а у нас уже есть условие, что имена классов должны содержать в себе имя родителя. Значит нам придётся писать в стилях что-то типа .footer_button_size, .title_button_size {font-size: 16px}, а это не добавляет переиспользуемости. Тогда больше подошёл бы подход тейлвинда - класс font-16, хотя я и не люблю такие извороты, но зато это действительно переиспользуемость. А в этом видео показано антипереиспользуемость - каждый специфичный класс используется только в том месте, где он написан. Только классы .logo и .contacts более-менее универсальные, а если нужен более крупный текст, и он уже где-то реализован, то придётся писать новое имя класса, так как то имя уже привязано к своему родителю. А вообще, я сюда пришёл, чтобы узнать, как писать имена классов, когда они, условно, "main-section__right-column__advantages-list__advantage main-section__advantages-list__advantage-alone". По-любому же нужно как-то короче это делать. Я обычно использую scss, и у меня имена классов не вытекают за родителя, внутри которого они описаны, но надо доделывать проект, где уже начали использовать что-то типа БЭМ, вот изучаю. Только у меня смутные сомнения, что не БЭМ здесь, а просто длинные имена. А мне надо лишь узнать, где писать подчёркивания, а где дефисы, где два, а где один. Почему верхнее меню не в ? HTML5 завезли уже чёрте когда. Хорошо хоть, что не ul>li>a.

[@verstach]

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

[@user-we6cb7yq7r]

А где можно взять этот макет из видео? или верстку?

[@verstach]

Данный макет мы верстаем в рамках курса по вёрстке сайта. Если нужно больше информации - пишите по любым контактам в описании к видео

[@user-er3dw9oo2f]

Прочитал комментарии, увидел что нуууу блин наконец-то что-то годное. НО нет. Человек тараторит, говорит быстро так, что хрен что разберёшь и не покатывает лайвкода, нафиг оно надо.

[@verstach]

Ну, думаю 90% тех, кто смотрел, поняли о чем речь. А если делать для 10%, остальным это будет скучно и неинтересно. Так что извини :)

[@user-pf6jf9oz2t]

спасибо

[@WhiteHeterosexualMenHere]

Это один из приёмов БЭМ называемой микс по крайне мере дойдя до 5:25 минуты и лучше об этом сказать так как ещё больше запутанности возникло из-за разнообразных объяснений каждого автора

[@user-zw7tc6lv9z]

Хорошее объяснение, но лучше еще и показывать что происходит в браузере во время изменения кода так намного интереснее смотреть и понятнее

[@f1nd_a_vvay]

Верстач а будет продолжение видео по wp?

[@verstach]

Будет новая линейка видосов по wp

[@bebroy254]

Ниразу не накрученные комениты))

[@davidkachor1778]

Я нигде такой накрутки не видел)

[@user-kl2gm5zc7q]

Когда выйдет 3 видео марафона верстки?

[@verstach]

Уже готово, на днях будет выпуск

[@user-kl2gm5zc7q]

Добрый день, куда можно обратиться за помощью?

[@verstach]

Привет! Все контакты указаны под видео

[@user-cw6yh2hz5h]

Logo Header__logo Header__logo_active: Так, у меня только один вопрос, это блок? Элемент? Или модификатор? Как я знаю ЭЛЕМЕНТ и МОДИФИКАТОР должны быть внытри БЛОКА.. В этом случаем получается, последняя имеет приоритет, значит "Logo Header__logo Header__logo_active" модификатор?????

[@user-ym9mk3se3q]

Вопрос, только такой а позиционирование внутри блока, можно блоку прорисовать, допустим как дисплей flex или gred?

[@user-ym9mk3se3q]

Допустим header

[@verstach]

Внутри контейнера? Можно, но не желательно. Просто представляй принцип собранности, сможешь ли ты в будущем например взять этот элемент и переместить в совершенно другое место на сайте. При этом если всё сделано правильно - никаких косяков не будет при переносе

[@tbilisicrusaders8438]

Все вместе рассказывает. С хедера в футер. С футера в Нальчик,а оттуда в Барселону

[@verstach]

Не плохо тебя понесло)

[@user-yq2fs9pn3t]

Всë чëтко и понятно) А есть ссылка на этот сайт, чтоб на примере посмотреть как там всë сделано?

[@verstach]

Рад, что видео оказалось полезным) Макет из видео используется в моём курсе по вёрстке сайтов. Это первый макет, который верстают ученика в рамках курса

[@user-qy7kb3xf8r]

Привет, спасибо за урок Можно инфу по вордпрессу побольше?

[@verstach]

Рад помочь! В скором времени будет множество уроков по wp, включая отдельный марафон по интеграции сайта с wp

[@velz5607]

У тебя можно заказать сайт?

[@verstach]

У меня можно заказать как вёрстку, так и сайт под ключ. Обращайтесь по контактам под видео

[@user-lc6bg6sr6y]

Где брать заказы на верстку?

[@verstach]

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

[@u-kob]

footer__logo - это элемент, а значит и в названии модификатора у него должно присутствовать тоже самое - footer__logo_active (footer и logo разделяются двойным подчёркиванием). Именно так гласит документация БЭМ

[@verstach]

Active в данном случае должен указываться как модификатор

[@u-kob]

@@verstach а я говорю не про active(с ним и так всё понятно), а про двойное подчёркивание. Вот примеры: footer_active - модификатор блока; footer__logo_active - модификатор элемента; footer_logo_active - так не правильно. Про это я говорил 😉

[@happy7944]

@@u-kob да, автор забыл второй нижний слеш. А в идеале ещё отделять модификатор двойными тире --)

[@lilpumgs4887]

Как редактор лучше использовать?

[@verstach]

Я пользуюсь Sublime Text 3, но тут дело вкуса. Для вёрстки особо нет разницы какой редактор использовать. Какой более по-душе)

[@vovamaistruc9105]

Сделай пж туториял, как несколько страниц на wp натягивать

[@verstach]

Уже совсем скоро выйдет, готовлю ролики по этой теме

[@vovamaistruc9105]

@@verstach Спасибо!!

[@user-xv6yn7iq3y]

А как записаться к вам на курс?

[@verstach]

Свяжитесь со мной по любым контактам из под видео)

[@user-pm2gw6ld9y]

Можно ли задавать отступы к блоку?

[@verstach]

Для класса блока - нет, позиционирование задаётся к классу элемента

[@user-vi3ur8bw8k]

Видео супер, но один непонятный момент. Размеры элемента относятся к стилям или позиционированию?

[@emilgerz]

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

[@mt5243]

Лукос ставьте кто пришел сюда после фрилансера по жизни

[@verstach]

А где там упоминался этот канал?

[@galusham1]

Большое спасибо! А вы ещё берёте учеников?

[@verstach]

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

[@galusham1]

@@verstach А как и на каких условиях проводится менторство?;)

[@verstach]

@@galusham1 напишите в телеграмм, beleckyweb. Все зависит от объёма обучения и ваших текущих навыков)

[@HUNTERM7]

Как будто на 1.25 посмотрел ролик)

[@alexey_kadochnikov]

Зачем писать div.logo это ведь дольше чем.logo? Почему для меню не использовать nav?

[@verstach]

А где используется div.logo? И для меню мы всегда в рамках курса всё делаем по seo friendly, заварачивая его в тег nav. В видео демонстрируется работа одного из учеников, и возможно вы про неё говорите) Но акцент на описанные селекторы я насколько помню не ставил в этом видео

[@alexey_kadochnikov]

@@verstach 2.37 emmet сокращение идёт div.logo

[@verstach]

@@alexey_kadochnikov а это моё визуальное сопровождение моих текущих действий, как-то на автомате получается)

[@anfd2447]

Сколько идёт твой курс?

[@verstach]

В среднем при обычном темпе студента курс проходит 3 месяца.

[@delux1k]

Хочу марафон по вёрстке

[@verstach]

На моём канале в данный момент есть марафон по вёрстке. На днях выходит 3 часть. А в скором времени выходит ещё более интересный марафон с другим макетом и большим колличеством информации. Следите за новостями)

[@mt5243]

Как будто на скорости 1.5 посмотрел

[@verstach]

Если кажется быстро - поставьте 0.75, некоторым подписчикам удобнее на такой скорости смотреть.

[@alsi_k]

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

[@verstach]

Рад стараться, спасибо! Да у меня стиль разговора такой :( Стараюсь медленнее, но не всегда выходит

[@ilnard]

Слабо понятно, быстро рассказываешь. И с модификаторами ошибка: header_logo_active. Между header и logo, хоть и это класс для модификации, всё равно нужно ставить два подчёркивания: header__logo_active

[@user-mw4um7vo4q]

Так он и ставит... Слепой что ли?

[@ilnard]

@@user-mw4um7vo4q может ты слепой?

[@emil4647]

@@user-mw4um7vo4q Что такой злой, иди выпей пивка

[@igordzhenkov5860]

Да, согласен. Но можно и так как он пишет. Хотя я предпочитаю с двумя подчеркиваниями тоже.

[@stenmacintosh1417]

После просмотра автора, у меня вопрос ты успел, ТЫ НЕ ОБОССССАЛСЯ.........

[@verstach]

Быстро говорю?)

[@user-tf1tq8wo8p]

Владислав, здравствуйте, я жду ответа

[@LLuKKen]

Слишком быстро говоришь. Поставил 0,75. Стало более менее...как будь то бы подбухнул и объясняешь)

[@soprano6806]

ты быстрей говори, а то чет слишком медленно

[@verstach]

Это естественная скорость речи для меня. Если быстро, в настройках плеера можно поставить 0.75

[@soprano6806]

@@verstach на 0.75 артефактов звука так много, что не получается сконцентрироваться на содержимом. Не обращай внимания.

[@anyayujnaya]

Нифига непонятно : (

[@dushaev_dev325]

Слишком быстро говоришь. Нельзя по медленнее

[@verstach]

Вроде комфортная скорость, но можете сделать 0.75 в настройках плеера

[@user-ey4wc4nm4f]

Чёт какое то мутное объяснение миксов

[@user-bs9ct8nf4h]

Душновато

[@verstach]

Информативненько

[@user-bs9ct8nf4h]

@@verstach Согласен

[@revina8868]

Модификатор элемента прописывается вот так: footer__logo_active. Это вариант написания по Яндексу (они являются создателями методологии). Общемировое написание вот такое: footer__logo--active

[@user-jv9mk7vu5z]

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

[@verstach]

Это был Фаст флоу для ценителей

[@user-jv9mk7vu5z]

@@verstach походу я в пролёте. Хотя по сути про бэм одно из лучших объяснений.

[@user-pe4od8ks1j]

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

[@verstach]

Рад, что видео оказалось полезным)

[@f1nd_a_vvay]

Спасибо за доступный туториал

[@verstach]

Рад, что он оказался доступным)

[@shamilkonovalov8998]

Круто, как я раньше тебя не встречал на ютубе делай ещё, лайк подписка

[@verstach]

Лучше поздно - чем никогда, спасибо!)

[@user-ov2rm8yo1d]

Очень информативно, спасибо

[@verstach]

Спасибо! Рад что видео оказалось полезным)

[@lenarsobolev1347]

Увидел в рекомендациях, посмотрел видео и незадумываясь подписался

[@verstach]

Отлично, буду стараться больше! Спасибо:)

[@user-xg8pi3mn6g]

это просто пушка, пили ещё

[@verstach]

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

[@anakonda3841]

Давно хотел изучить эту методологию, но на всех каналах сплошная вода, а тут за 19 минут всё по полочкам и доступно! Лайк и подписка

[@verstach]

Рад, что видео оказалось полезным и доступным!