Огромное спасибо за видос) Помог разобраться) У меня остался один вопрос, почему ты в стилях дублировал название блока и его элемент, а не просто прописывал стили к элементу? Например .main-content .main-content__left и т.д., во всех стилях у тебя так) Заранее благодарю за ответ
здравствуйте,разве правильно писать css в виде .header .header-menu {...} вместо .header-menu , ведь бэм против вложенности и мы увеличиваем вес селектора
В видео от БЭМ только именование стилей. В БЭМ не может быть вложенности в стилях. Делать такую вложенность не удобно, если использовать препроцесоры CSS. Единственное, то что выводится в админке, можно сделать исключение.
Не нужно слов "должно именоваться", "неверное именование". БЭМ - это методология, главное понятие в которой блок->элемент->модификатор, а как именовать дело каждого. Из доков "Описанные выше правила формирования имен - это классическая схема именования БЭМ-сущностей.", "....Существуют альтернативные схемы именования"
О. И еще. Зачем использовать вложенность в Css если мы используем БЭМ? Про первое правило сказал - не использовать тэги в стилях, а про второе забыл - никакого каскада не должно быть
Вопрос. Есть блок ширина которого 100%, внутри обертка .container чтобы позиционировать его по центру страницы с фиксированной шириной: lorem lorem ... .content{ width: 100%; background: red; } .container { max-width: 1200px; margin: 0; padding: 0; background: blue; } Внутренние элементы по сути являются дочерними от content, но фактически от container. Как по БЭМ назвать внутренние элементы .item ? Написать .content__item по бэм будет неверно тк родитель у них .container
Вопрос и замечание. Как при таком способе миксования выделять блоки в отдельные файлы шаблоны, например pug. Ведь там присутствует кусок класса блока родителя? Элемент у которого класс banner зарежется AD блокером, не советовал бы использовать такие классы: ad, promo. banner и т.п.
А почему вы модификатор записывает через двойное тире "--" ? когда в официальной документации, модификаторы записываются через одиночное нижнее подчеркивание "_" .... вот сколько ни смотрю видео по БЭМ, все по своему его делаю, такое чувство, что никто до конца не понимает как правильно его применять )) И ещё следуя методологии, не понятно зачем мы оборачивали button в дополнительный блок, если вы говорите, что сам баттон является блоком, тогда получается можно было просто записать: Заказать звонок без всяких лишних оберток. Так ведь?
@@ДенисБулыга-э4т не будет, так как у float элементов родитель должен протирать задницу дочерних элементов :after{ clear: both;}, это означает что теперь мы каждому блоку должны задать очистку на псевдокласс after, это еще не всё flaot элементов нельзя центрировать и горизонтально и вертикально, в добавок float элемент не может находится в одной строке если у соседного блока не задан свойства float, ну короче НЕ БУДЕТ РАБОТАТЬ, никак
Не совсем понимаю честно говоря этих нагромождений лишними знаками. 500 подчеркивай, 300 дефисов. Что бы визуально отличить? Ну и одно подчеркивание на это способно. Не вижу преимуществ модификатора перед банальным .is-active. Модификаторы в основном добавляются ведь посредством JS и добавить .is-active легче чем портянку из .categories__item--active. Легче просто в плане ориентира и запоминания. Ты конкретно знаешь что класс .is-active он переводит элемент в активное состояние и тебе не нужно вспоминать а какая там была длиннющая приставка к этому элементу. А в CSS уже для каждого элемента свой active. Ну короче очень сомнительно как по мне и лишнее это
Каждый сам выбирает стиль, как писать свой код. Я же просто хотел вкратце рассказать о методологии БЭМ. Если вам интересно, можете почитать более детально ru.bem.info
@@ДенисБулыга-э4т это понятно. К вам вообще никаких претензий, все очень доступно и доходчиво. Я про саму концепцию написания. Она мне кажется странной
как и любая договоренность это распространяется только на яндекс и тех кто этим пользуется. Да и не всегда возможно использовать эту методологию. Чем им id'ишники не угодили?
![Hunxho - Ball Forever [Official Video]](http://i.ytimg.com/vi/nki9ZTF9Uls/mqdefault.jpg)
Пожалуй лучше что я видел на ютубе по БЭМ
на 7й минуте все понял, спасибо!
офигел когда страница не рушится при вставке нового элемента (или блока), вот это уровень - вот это мастерство, все точка! Буду учить БЭМ
Все ясно и доходчиво объяснено. Спасибо за полезную инфу!
Пожалуйста
отличное видео , спасибо!
и вообще не стоит задавать классы. и совершенно не важно это бэм или что еще там.
чего так?
это полезно если на sass или scss писать, а обычный css замучаешься копировать туда сюда
Почему бы тогда не писать на sass или scss? :)
Огромное спасибо за видос) Помог разобраться) У меня остался один вопрос, почему ты в стилях дублировал название блока и его элемент, а не просто прописывал стили к элементу? Например .main-content .main-content__left и т.д., во всех стилях у тебя так) Заранее благодарю за ответ
здравствуйте,разве правильно писать css в виде .header .header-menu {...} вместо .header-menu , ведь бэм против вложенности и мы увеличиваем вес селектора
Почему вы где "Главная" использовали модификатор, объясните мне пожалуйста. Немного не понимаю просто
В видео от БЭМ только именование стилей. В БЭМ не может быть вложенности в стилях. Делать такую вложенность не удобно, если использовать препроцесоры CSS. Единственное, то что выводится в админке, можно сделать исключение.
Не нужно слов "должно именоваться", "неверное именование". БЭМ - это методология, главное понятие в которой блок->элемент->модификатор, а как именовать дело каждого. Из доков "Описанные выше правила формирования имен - это классическая схема именования БЭМ-сущностей.", "....Существуют альтернативные схемы именования"
О. И еще. Зачем использовать вложенность в Css если мы используем БЭМ? Про первое правило сказал - не использовать тэги в стилях, а про второе забыл - никакого каскада не должно быть
тут чтоб 100500 классов не придумывать )) когда освоишь БЭМ, самое сложное будет придумывать классы )) если проект супер большой )
Вопрос. Есть блок ширина которого 100%, внутри обертка .container чтобы позиционировать его по центру страницы с фиксированной шириной:
lorem
lorem
...
.content{
width: 100%;
background: red;
}
.container {
max-width: 1200px;
margin: 0;
padding: 0;
background: blue;
}
Внутренние элементы по сути являются дочерними от content, но фактически от container. Как по БЭМ назвать внутренние элементы .item ? Написать .content__item по бэм будет неверно тк родитель у них .container
@@Nomikama не правильно , надо делать микс
Вопрос и замечание.
Как при таком способе миксования выделять блоки в отдельные файлы шаблоны, например pug. Ведь там присутствует кусок класса блока родителя?
Элемент у которого класс banner зарежется AD блокером, не советовал бы использовать такие классы: ad, promo. banner и т.п.
Разве модификаторы отделяются не одним нижним подчёркиванием? Например, "имя-блока__имя-элемента_имя-модитификатора"?
это одна из разновидностей именования классов - ru.bem.info/methodology/naming-convention/#%D0%A1%D1%82%D0%B8%D0%BB%D1%8C-two-dashes
а как переносить на внутренную страницу блок.... к чему привязываться?
А почему вы модификатор записывает через двойное тире "--" ? когда в официальной документации, модификаторы записываются через одиночное нижнее подчеркивание "_" .... вот сколько ни смотрю видео по БЭМ, все по своему его делаю, такое чувство, что никто до конца не понимает как правильно его применять )) И ещё следуя методологии, не понятно зачем мы оборачивали button в дополнительный блок, если вы говорите, что сам баттон является блоком, тогда получается можно было просто записать: Заказать звонок без всяких лишних оберток. Так ведь?
в официальной документации есть правила на счет двойного тире, можно и почитать...и если на то пошло, то это БЭМ - это рекомендации, а не правила
Теперь ясно) а то до этого одна теория и примеры в отрыве от реальности...
Интересно, на float(ах) будет работать?
Будет
@@ДенисБулыга-э4т не будет, так как у float элементов родитель должен протирать задницу дочерних элементов :after{ clear: both;}, это означает что теперь мы каждому блоку должны задать очистку на псевдокласс after, это еще не всё flaot элементов нельзя центрировать и горизонтально и вертикально, в добавок float элемент не может находится в одной строке если у соседного блока не задан свойства float, ну короче НЕ БУДЕТ РАБОТАТЬ, никак
Не совсем понимаю честно говоря этих нагромождений лишними знаками. 500 подчеркивай, 300 дефисов. Что бы визуально отличить? Ну и одно подчеркивание на это способно. Не вижу преимуществ модификатора перед банальным .is-active. Модификаторы в основном добавляются ведь посредством JS и добавить .is-active легче чем портянку из .categories__item--active. Легче просто в плане ориентира и запоминания. Ты конкретно знаешь что класс .is-active он переводит элемент в активное состояние и тебе не нужно вспоминать а какая там была длиннющая приставка к этому элементу. А в CSS уже для каждого элемента свой active. Ну короче очень сомнительно как по мне и лишнее это
Каждый сам выбирает стиль, как писать свой код. Я же просто хотел вкратце рассказать о методологии БЭМ.
Если вам интересно, можете почитать более детально ru.bem.info
@@ДенисБулыга-э4т это понятно. К вам вообще никаких претензий, все очень доступно и доходчиво. Я про саму концепцию написания. Она мне кажется странной
как и любая договоренность это распространяется только на яндекс и тех кто этим пользуется. Да и не всегда возможно использовать эту методологию. Чем им id'ишники не угодили?
типа id должен быть уникальный и только один