Методолгия БЭМ за 19 минут / Как правильно называть классы CSS
HTML-код
- Опубликовано: 28 дек 2020
- В этом видео мы поговорим о том, как правильно называть классы CSS по методологии БЭМ.
БЭМ (Блок, элемент, модификатор) - методология разделения конструкции сайта на независимые компоненты.
1. Блок - основной компонент страницы, который может быть использован повторно
2. Элемент - составной компонент блока, который не может быть использован вне этого блока
3. Модификатор - компонент определяет состояние или поведение блока
Буду рад любым пожертвованиям;
Тинькофф - 5536 9137 6324 5442
Сбербанк - 5469 6200 1922 8210
QIWI - 4890 4947 4726 5197
Желаю приятного просмотра!
Если у тебя возникли какие-либо вопросы - обязательно задавай их в комментариях под видео.
Связаться со мной можно по следующим контактам:
verstach
t.me/beleckyweb
/ belecky_web
Уже фиг знает сколько смотрю роликов по БЭМ. У каждого какая-то своя методология)
Ппц, я смотрю ради интереса 3-й ролик - люди вообще объяснять не умеют, свое что ли снять, я хоть и не "блохер", но в 100 раз лучше поясню.
True
Давно хотел изучить эту методологию, но на всех каналах сплошная вода, а тут за 19 минут всё по полочкам и доступно! Лайк и подписка
Рад стараться, спасибо за подписку. Какие ещё уроки хотел бы видеть на канале?
Классная объяснение, спасибо 🙌🏽
Спасибо! Отличное объяснение!
Круто, как я раньше тебя не встречал на ютубе делай ещё, лайк подписка
Надеюсь что будете встречать чаще, спасибо:)
Спасибо большое, доступно и понятно 😊
волшебно и полезно как всегда )
Спасибо! С наступающим!
Очень уверенно и доступно, бомба!!!
По-стараюсь взрываться по-чаще тут :))
Благодарю за ролик. Кратко. Доступно. Просто. Понятно.
Одно из самых понятных объяснений, спасибо
Рад, что понравилось. Спасибо за просмотр)
Спасибо, очень доступно и понятно
Модификатор пишется как: block__element_modify, согласно оф. документации.
Он так и писал
@@dimondimonov6417 нет, он в ролике писал модификатор так: block_element_modify
@@MrLutor прочитай, что ты написал)
@@yadreyy прочитал, и в чем проблема?
@@MrLutor я не заметил разницы между _ и __. Вы ведете себя как-то очень странно. Какой-то тип по своей прихоти придумал дурацкое правило, а вы в комментах глотки грызете друг другу из-за этого. «__» это как висячий предлог - яйца выеденного не стоит, а люди баталии из-за этого устраивают в комментах)
За 19 минут понял больше чем если сам копал пару дней Спасибо за уроки
Ура! Рад это слышать, спасибо!
Хороший урок, спасибо за труд
Огромное спасибо) быстро и понятно) очень помогло ваше видео))
Блин это просто пушка, настолько всё четко разложил
Рад, что видео оказалось полезным! Спасибо за отзыв)
Спасибо! Все очень понятно объяснил)
Отлично рассказал. Наконец-то понял 👍
Огромное спасибо за видео ))
Очень рад, что видео оказалось полезным:) Спасибо
Спасибо за ролик!
Спасибо за полезный урок
Спасибо за отзыв!)
Круто и очень доступно Респектос
Очень информативно, спасибо
Очень рад, что видео оказалось полезным!
Спасибо за доступный туториал
Спасибо за приятный отзыв!
это просто пушка, пили ещё
Рад что видео оказалось полезным! Спасибо
Спасибо! Хорошее видео и всё рассказано
Лучший просто Подписка
Буду стараться ещё больше, спасибо!
Супер Хочется ещё больше лайфхаков по верстке
Спасибо! Дальше - больше) Подписывайтесь, чтобы не пропустить новые видео.
блииин! как боженька объяснил!
Это бомба это уже не первый канал но понял как это работает только сейчас. Конечно совру если скажу что раньше не доходило но сейчас прям не просто дошло а прям зашло. Круто подпишусь
круто!!! спасибо
Очень круто
Рад, что видео оказалось полезным)
Увидел в рекомендациях, посмотрел видео и незадумываясь подписался
Очень рад это слышать, спасибо!
Мощно!
Спасибо! Стараюсь не допускать, чтобы было иначе:)
интересно рассказываешь
Главное чтобы было доступно и понятно:) Спасибо!
Очень хорошо объясняеешь.
Спасибо, рад стараться)
Интересно рассказываешь
Спасибо за оценку, рад стараться)
Блеаха, спасибо дружище! Наконец я все расставил по местам в своей голове, с твоей помощью. Не курю (бросил), но сча схожу дуну. Очень быстро говоришь, голова слегка увеличилась.:)) Спасибо еще раз, искал я именно это судя по всему.
Очень рад, что было полезно)
@@verstach да, канабис полезный
Дружище) Спасибо тебе человеческое) Я настолько запутался с этими классами (только учусь разработке), вроде классы прописал, все работает, но понимаю, что код кривой) Благодаря тебе разобрался)
Очень приятно видеть что контент приносит пользу ❤️ Спасибо)
@@verstach могу ли я задать где-то в личке ещё пару вопросов которые у меня остались, есть ли возможность у тебя помочь?
я в шоке, однозначно подписка
Очень рад, что видео оказалось полезным!:)
спасибо
Лови подписочку, лайкосик и колокольчик Порекомендовал друзьям
Спасибо! Рад что видео оказалось полезным)
Верстач как обычно сделал пушку респект
Очень рад тому, что видео оказалось полезным! Спасибо
Я редко ставлю кому то лайки, но за твой видос поставлю даже 2
Спасибо, очень понятное объяснение 👏
Сделайте ещё по бэму ролики, например для форм, для всяких флексов и гридов. Спасибо.
Хорошая идея, сделаю)
Верстач ты крут
Спасибо большое!
это самое лучше объяснение среди всего хлама на ютубе
Рад это слышать, спасибо!
Всё понятно, спасибо!) Надеюсь это всё ещё актуально. Но я так понял модификаторы можно по-разному называть. Например footer__menu--item--active можно назвать?
Здравствуйте! Пожалуйста, подскажите, при назначении класса для элемента обязательно между словами ставить двойное "нижнее подчеркивание"?
Это один из приёмов БЭМ называемой микс по крайне мере дойдя до 5:25 минуты и лучше об этом сказать так как ещё больше запутанности возникло из-за разнообразных объяснений каждого автора
Информация не доведена до конца. Вот мы написали 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.
Нужно пересмотреть видео, возможно чуть позже отвечу, благодарю за комментарий
Спасибо.
А какой синтаксис является правильным?
.block__element--modificator
Или же тот который используете вы:
.block__element_modificator ?
.block__element--modificator --- тут element--modificator - это единый элемент из двух слов (просто вместо пробела -),
.block__element_modificator --- тут element_modificator - element является елементом, а modificator - модификатор элемента element
Хорошее объяснение, но лучше еще и показывать что происходит в браузере во время изменения кода так намного интереснее смотреть и понятнее
footer__logo - это элемент, а значит и в названии модификатора у него должно присутствовать тоже самое - footer__logo_active (footer и logo разделяются двойным подчёркиванием). Именно так гласит документация БЭМ
Active в данном случае должен указываться как модификатор
@@verstach а я говорю не про active(с ним и так всё понятно), а про двойное подчёркивание. Вот примеры:
footer_active - модификатор блока;
footer__logo_active - модификатор элемента;
footer_logo_active - так не правильно. Про это я говорил 😉
@@u-kob да, автор забыл второй нижний слеш. А в идеале ещё отделять модификатор двойными тире --)
Т.е мы делаем блок с элементами внутри( т.е шаблон) потом применяем этот шаблон где хотим и изменяем этот шаблон с помощью модификатора или я не понял чёто ?(4 часа утра писаль )
Всë чëтко и понятно) А есть ссылка на этот сайт, чтоб на примере посмотреть как там всë сделано?
Рад, что видео оказалось полезным) Макет из видео используется в моём курсе по вёрстке сайтов. Это первый макет, который верстают ученика в рамках курса
Прочитал комментарии, увидел что нуууу блин наконец-то что-то годное. НО нет. Человек тараторит, говорит быстро так, что хрен что разберёшь и не покатывает лайвкода, нафиг оно надо.
Ну, думаю 90% тех, кто смотрел, поняли о чем речь. А если делать для 10%, остальным это будет скучно и неинтересно. Так что извини :)
Привет, спасибо за урок Можно инфу по вордпрессу побольше?
Рад помочь! В скором времени будет множество уроков по wp, включая отдельный марафон по интеграции сайта с wp
Сделай пж туториял, как несколько страниц на wp натягивать
Уже совсем скоро выйдет, готовлю ролики по этой теме
@@verstach Спасибо!!
Вопрос, только такой а позиционирование внутри блока, можно блоку прорисовать, допустим как дисплей flex или gred?
Допустим header
Внутри контейнера? Можно, но не желательно. Просто представляй принцип собранности, сможешь ли ты в будущем например взять этот элемент и переместить в совершенно другое место на сайте. При этом если всё сделано правильно - никаких косяков не будет при переносе
А где можно взять этот макет из видео? или верстку?
Данный макет мы верстаем в рамках курса по вёрстке сайта. Если нужно больше информации - пишите по любым контактам в описании к видео
Верстач а будет продолжение видео по wp?
По wp будет отдельный марафон
Когда выйдет 3 видео марафона верстки?
Уже готово и готовится к выходу:) На днях опубликую
Видео супер, но один непонятный момент. Размеры элемента относятся к стилям или позиционированию?
размеры прописываются в стиле, и если ты вставляешь этот же блок в другой блок, то делаешь второй класс, где он элемент уже второго блока и перезаписываешь размер
Как редактор лучше использовать?
Я пользуюсь Sublime Text 3, но тут дело вкуса. Для вёрстки особо нет разницы какой редактор использовать. Какой более по-душе)
Большое спасибо! А вы ещё берёте учеников?
Сейчас только менторством занимаюсь, под конкретные запросы студентов занимаемся по индивидуальной программе)
@@verstach А как и на каких условиях проводится менторство?;)
@@galusham1 напишите в телеграмм, beleckyweb. Все зависит от объёма обучения и ваших текущих навыков)
Можно ли задавать отступы к блоку?
Отступы можно задавать от класса элемента, как и любое позиционирование
Добрый день, куда можно обратиться за помощью?
Доброго времени суток!
Связаться со мной можно по следующим контактам:
vk.com/verstach
t.me/beleckyweb
instagram.com/belecky_web/
Все вместе рассказывает. С хедера в футер. С футера в Нальчик,а оттуда в Барселону
Не плохо тебя понесло)
Это наверное единственное видео про БЭМ под которым я поставил лайк, ибо рассказал ты очень много тонкостей. Спасибо. Но почему ты торопишься?
Рад стараться, спасибо! Да у меня стиль разговора такой :( Стараюсь медленнее, но не всегда выходит
Ниразу не накрученные комениты))
Я нигде такой накрутки не видел)
Где брать заказы на верстку?
Есть множество вариантов получать заказы на вёрстку, среди которых могут быть и входящие обращения, и исходящие. Обо всём этом я говорю на моём курсе по вёрстке сайтов
Как будто на 1.25 посмотрел ролик)
У тебя можно заказать сайт?
У меня можно заказать как вёрстку, так и сайт под ключ. Обращайтесь по контактам под видео
А как записаться к вам на курс?
Свяжитесь со мной по любым контактам из под видео)
Logo Header__logo Header__logo_active:
Так, у меня только один вопрос, это блок? Элемент? Или модификатор? Как я знаю ЭЛЕМЕНТ и МОДИФИКАТОР должны быть внытри БЛОКА.. В этом случаем получается, последняя имеет приоритет, значит "Logo Header__logo Header__logo_active" модификатор?????
Хочу марафон по вёрстке
На моём канале в данный момент есть марафон по вёрстке. На днях выходит 3 часть. А в скором времени выходит ещё более интересный марафон с другим макетом и большим колличеством информации. Следите за новостями)
Сколько идёт твой курс?
В среднем при обычном темпе студента курс проходит 3 месяца.
Зачем писать div.logo это ведь дольше чем.logo? Почему для меню не использовать nav?
А где используется div.logo? И для меню мы всегда в рамках курса всё делаем по seo friendly, заварачивая его в тег nav. В видео демонстрируется работа одного из учеников, и возможно вы про неё говорите) Но акцент на описанные селекторы я насколько помню не ставил в этом видео
@@verstach 2.37 emmet сокращение идёт div.logo
@@alexey_kadochnikov а это моё визуальное сопровождение моих текущих действий, как-то на автомате получается)
Владислав, здравствуйте, я жду ответа
Слабо понятно, быстро рассказываешь. И с модификаторами ошибка: header_logo_active. Между header и logo, хоть и это класс для модификации, всё равно нужно ставить два подчёркивания: header__logo_active
Так он и ставит... Слепой что ли?
@@user-mw4um7vo4q может ты слепой?
@@user-mw4um7vo4q Что такой злой, иди выпей пивка
Да, согласен. Но можно и так как он пишет. Хотя я предпочитаю с двумя подчеркиваниями тоже.
Как будто на скорости 1.5 посмотрел
Если кажется быстро - поставьте 0.75, некоторым подписчикам удобнее на такой скорости смотреть.
Лукос ставьте кто пришел сюда после фрилансера по жизни
А где там упоминался этот канал?
После просмотра автора, у меня вопрос ты успел, ТЫ НЕ ОБОССССАЛСЯ.........
Быстро говорю?)
Слишком быстро говоришь. Поставил 0,75. Стало более менее...как будь то бы подбухнул и объясняешь)
Нифига непонятно : (
ты быстрей говори, а то чет слишком медленно
Это естественная скорость речи для меня. Если быстро, в настройках плеера можно поставить 0.75
@@verstach на 0.75 артефактов звука так много, что не получается сконцентрироваться на содержимом. Не обращай внимания.
Чёт какое то мутное объяснение миксов
Душновато
Информативненько
@@verstach Согласен
Слишком быстро говоришь. Нельзя по медленнее
Вроде комфортная скорость, но можете сделать 0.75 в настройках плеера
Модификатор элемента прописывается вот так: footer__logo_active. Это вариант написания по Яндексу (они являются создателями методологии). Общемировое написание вот такое: footer__logo--active
такое ощущение как будто какие то скороговорки одну за другой услышал. Поначалу понятно, потом хрен соберешься с мыслями после такого спидрана.
Это был Фаст флоу для ценителей
@@verstach походу я в пролёте. Хотя по сути про бэм одно из лучших объяснений.
Очень уверенно и доступно, бомба!!!
Рад, что видео оказалось полезным)
Круто, как я раньше тебя не встречал на ютубе делай ещё, лайк подписка
Лучше поздно - чем никогда, спасибо!)
Давно хотел изучить эту методологию, но на всех каналах сплошная вода, а тут за 19 минут всё по полочкам и доступно! Лайк и подписка
Рад, что видео оказалось полезным и доступным!
Спасибо за доступный туториал
Рад, что он оказался доступным)
Очень информативно, спасибо
Спасибо! Рад что видео оказалось полезным)
это просто пушка, пили ещё
Спасибо, в запасе уже много контента, подписывайтесь и ожидайте, в скором времени будет много интересного
Круто и очень доступно Респектос
Очень рад, что видео оказалось полезным