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

[@trendsgallery]

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

[@aharito]

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

[@unknownartistrecords6503]

True

[@4ITTonik]

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

[@dimondimonov6417]

Он так и писал

[@MrLutor]

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

[@MrLutor]

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

[@MrLutor]

@drey711 да, согласен с тобой, это попахивает душниловом)) Но если много использовать этот подход, то нюансы видны, особенно если хочешь писать код, который будет одинаково восприниматься целой командой. Я раньше до этого треда в комментах использовал везде двойной слэш, но визуально модификатор выглядел уже как-то громоздко, и как перепровелил, понял, что ошибался раньше

[@MrLutor]

@drey711 и кстати, посмотри внимательней, разница в одинароном и в двойном слэше)) то есть _ и __

[@Юрец1993]

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

[@sonexplay509]

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

[@verstach]

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

[@daxio-w2k]

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

[@anakonda3841]

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

[@verstach]

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

[@rostellagordeeva4375]

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

[@verstach]

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

[@Aleksandr_Kvadrat]

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

[@OneLife1144]

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

[@verstach]

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

[@jonimonik6575]

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

[@verstach]

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

[@TheZver63]

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

[@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]

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

[@СергейПапков-и9о]

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

[@verstach]

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

[@shohjahontv4053]

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

[@verstach]

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

[@sevastyanavoroncova4553]

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

[@verstach]

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

[@ЛарисаЗуева-ъ4в]

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

[@verstach]

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

[@tbilisicrusaders8438]

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

[@verstach]

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

[@СемёнУшаков-д6ц]

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

[@verstach]

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

[@feniletilamin5197]

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

[@verstach]

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

[@ВалерийФилин-р3ь]

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

[@verstach]

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

[@CATMON_]

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

[@igordzhenkov5860]

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

[@f1nd_a_vvay]

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

[@verstach]

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

[@ИмяФамилия-ю5з6м]

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

[@UserUser-ik9fx]

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

[@L0list]

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

[@verstach]

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

[@L0list]

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

[@МаксимГалкин-ф8н]

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

[@verstach]

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

[@tsariizhenya7076]

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

[@verstach]

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

[@denismaltcev3356]

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

[@verstach]

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

[@shohjahontv4053]

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

[@verstach]

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

[@OlegGuitar]

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

[@АдамЭкажев]

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

[@dyachkovputimir9722]

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

[@verstach]

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

[@suvilehamir9847]

Очень круто

[@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 да, автор забыл второй нижний слеш. А в идеале ещё отделять модификатор двойными тире --)

[@ВладиславБолтасов]

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

[@verstach]

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

[@user-we99r7xc2h]

@@verstach пример нужно с css

[@alextopsite]

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

[@приколыиРжака-к1д]

Мощно!

[@verstach]

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

[@AynaOracle]

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

[@verstach]

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

[@hertz3001]

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

[@verstach]

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

[@dimalukashenko4865]

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

[@fron5455]

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

[@prognoz_absolut1519]

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

[@verstach]

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

[@ФёдорЗиновьев-ш1ю]

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

[@verstach]

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

[@ПавелГончаров-х2ш]

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

[@Арнольд-м2й]

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

[@verstach]

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

[@dariaikon8911]

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

[@jahongirmusayev658]

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

[@StonHenge]

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

[@AnnaZnamova]

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

[@cvetamoiseeva8854]

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

[@verstach]

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

[@приколыиРжака-к1д]

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

[@verstach]

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

[@РомаЖолудь-м5о]

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

[@verstach]

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

[@katerinakaterina3398]

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

[@f1nd_a_vvay]

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

[@verstach]

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

[@АлександрКузнецов-ю7ф8м]

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

[@АлександрКузнецов-ю7ф8м]

Допустим header

[@verstach]

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

[@opencartpro2595]

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

[@verstach]

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

[@moscowstanislav]

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

[@artemdemidov1031]

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

[@verstach]

Это один из макетов, который мы верстаем в рамках курса по вёрстке сайтов. Если нужны подробности - пишите по любым контактам из под видео

[@miasuntopropio]

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

[@verstach]

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

[@miasuntopropio]

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

[@verstach]

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

[@lilpumgs4887]

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

[@verstach]

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

[@sharomet]

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

[@ВладимирСтавинчук]

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

[@HUNTERM7]

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

[@БайИнхол]

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

[@verstach]

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

[@РомаЖолудь-м5о]

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

[@verstach]

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

[@МихаилСитников-й3й]

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

[@verstach]

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

[@Арнольд-м2й]

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

[@verstach]

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

[@vovamaistruc9105]

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

[@verstach]

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

[@vovamaistruc9105]

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

[@НикИванов-б4ы]

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

[@verstach]

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

[@shinkoren4ik]

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

[@verstach]

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

[@alexey_kadochnikov]

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

[@verstach]

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

[@alexey_kadochnikov]

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

[@verstach]

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

[@ИгОрЁк-л2з]

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

[@bebroy254]

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

[@davidkachor1778]

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

[@mt5243]

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

[@verstach]

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

[@aIis_ka]

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

[@verstach]

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

[@anfd2447]

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

[@verstach]

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

[@delux1k]

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

[@verstach]

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

[@МихаилИванов-ч9о9м]

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

[@verstach]

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

[@ilnard]

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

[@ДмитрийПешнин-з7у]

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

[@ilnard]

@@ДмитрийПешнин-з7у может ты слепой?

[@emil4647]

@@ДмитрийПешнин-з7у Что такой злой, иди выпей пивка

[@igordzhenkov5860]

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

[@mt5243]

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

[@verstach]

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

[@максим-м9ж5э]

спасибо

[@stenmacintosh1417]

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

[@verstach]

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

[@ВладиславПолняков-у8ъ]

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

[@LLuKKen]

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

[@АнатолеВасерман-ж1й]

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

[@soprano6806]

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

[@verstach]

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

[@soprano6806]

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

[@dushaev_dev325]

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

[@verstach]

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

[@anyayujnaya]

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

[@ДенисАхвердов-ю6в]

Душновато

[@verstach]

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

[@ДенисАхвердов-ю6в]

@@verstach Согласен

[@revina8868]

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

[@АндрейПлотников-т2х]

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

[@verstach]

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

[@АндрейПлотников-т2х]

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

[@shamilkonovalov8998]

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

[@verstach]

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

[@ustinovdionisii3898]

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

[@verstach]

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

[@sidok6477]

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

[@verstach]

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

[@lenarsobolev1347]

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

[@verstach]

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

[@leonillamoiseeva9268]

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

[@verstach]

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

[@НиколайВоронов-щ1з]

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

[@verstach]

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

[@michailpty6302]

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

[@OneLife1144]

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

[@Павитосик]

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

[@verstach]

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

[@ilonashilova7226]

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

[@verstach]

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