Хочу задать глупый вопрос. Думаю новичкам можно.
Если есть строго текстовая страница (заголовки, абзацы итд), что будет блоками, элементами? Правильно понимаю, что все h и p это блоки?
Всем привет! У меня вот какой вопрос. Часто бывает что у блок появляется динамический модификатор, по типу _state_active. Как по BEM правильно добавлять изменения в дочерних блоках? Вот 2 вариант, возможно оба не верных по BEM: 1) Файл main.less
.main {
&_state_active {
.menu {
background: blue;
}
}
}
2) Файл menu.less
.menu {
.main_state_active & {
background: blue;
}
}
В данный момент есть проект на Java, в котором используется JSP в качестве шаблонизатора. Проект собирается ANT-ом. В production-mode после сборки JSP шаблоны нельзя редактировать. В качестве веб-сервера используется NGINX. Можно ли внедрить БЭМ в такую архитектуру и какие для этого используются инструменты?
Есть ли возможность задать переменную(класс) var для jQuery, содержащую дефисы, согласно именованию БЭМ blok-compound-name?
Коллеги, наверняка уже сталкивались с задачей по созданию отдельных тем. Скажите как решали?
В моей ситуации необходимо обязательно темы делать отдельными css файлами.
Здравствуйте. Недавно начал изучать БЭМ. Отказ от наследования дается мне тяжело. Нужен совет как лучше обыграть некоторые ситуации. 1) Ситуация с табами. Имеются стили для меню табов по умолчанию.
.tab-nav {}
.tab-nav__list {}
.tab-nav__item {}
.tab-nav__link {}
По дизайну есть несколько видов табов. Как правильно по БЭМ стилизовать табы? Использовать модификаторы для каждого элемена?
.tab-nav--news {}
.tab-nav__list--news {}
.tab-nav__item--news {}
.tab-nav__link--news {}
Или можно обойтись каскадом?
.tab-nav--news {}
.tab-nav--news .tab-nav__list {}
.tab-nav--news .tab-nav__item {}
.tab-nav--news .tab-nav__link {}
Еще ситуация с активным элементов. Плагин ставит свой класс активного элемента. Допускается ли такая каскадная стилизация активного элемента?
.tab-nav__item.ui-tabs-active .tab-nav__link {}
2) Ситуация когда по наведению на один элемент меняются стили соседних/вложенных элементов. Допусти при наведении на ссылку нужно показывать скрытый блок(менять его цвет и т.д.) в соседнем элементе.
<div class="item">
<a class="item__link link-action">link</a>
<div class="item__body">
<div class="item__info">hidden</div>
</div>
</div>
.item__link:hover + .item__body .item__info {}
Допускается ли такая запись по БЭМ? Как записать правильней?
3) Наименование классов.
По БЭМ имя класса пишется так блок__элемент--модификатор-элемента.
Допускается ли такая запись блок--модификатор-блока__элемент?
Подскажите пожалуйста, нормальная ли практика создавать global блок с переменными и миксинами в stylus и просто привязывать в deps к page блоку?
Или глобальные переменные и миксины в БЭМ лучше не использовать?
Добрый день, насколько рационально использовать bem для небольших проектов 1-5 страниц верстки. Очень хотелось бы использовать готовую библиотеку блоков но есть несколько нюансов
Например если у блока переопределить css то в скомпилированном css будет несколько блоков например
.input {
font-size:14px;
}
И в переопределенный стиль
.input {
font-size:30px;
}
Или я неправильно что-то понимаю? Нет ли возможности при использовании блока из библиотеку сразу копировать его в папку проекта а не переопределять его поведение?
И возможно ли собрать проект например так:
js/
script.js
css/
style.css
html/
index.html
innerPage.html
И т.д.
Может немного не в тему.. На главной странице Яндекса, увидел именование блока, которое не соответствует классическому БЭМ. Например: b-regioniconsicon http://i.imgur.com/OnYlwVt.png Процитирую Виталия Харисова: "классы типа blockelemelem___elem говорят о том, что верстальщик ничего не понял."
Кто-нибудь может объяснить этот диссонанс?
Всем привет! Такой у меня вопрос:
Есть блок aside, он располагается сбоку и в общем случае выглядит вот так: ссылка на картинку
Логотип вынесен в отдельный блок logo, у него есть текстовые элементы logo__bold, logo__thin и logo__desc.
У aside есть модификатор --collapsed, который делает его узким: ещё ссылка на картинку
Как тут можно грамотно распространить влияние модификатора aside--collapsed на элементы блока logo?
Как .aside--collapsed .logo__desc { display: none; }, но в контексте БЭМ.
Из описания https://ru.bem.info/method/faq/#Почему-нельзя-делать-общий-сброс-стилей-reset человеку не знакомому с БЭМ непонятно - почему нельзя делать общий сброс (или нормализацию). Впрочем, мне, как знакомому - непонятно тоже. Как я догадываюсь, речь идет о том, что библиотека блоков Яндекса (bem-bl) расчитана на определенные дефолтные стили у html-элементов , а reset собьёт их, поэтому css reset в Яндексе нельзя. Но ведь это личное дело Яндекса какие у него базовые стили? Опять-таки если мы говорим о надежности и универсальности - то в блоке должны быть прописаны все нужные стили, исходя из того что может быть reset. Или, если проще, то только те, которые отличаются от Normalize, который сейчас стандарт де-факто.
Я задавал аналогичный вопрос пару лет назад тут: http://clubs.ya.ru/bem/replies.xml?item_no=1777, мне кажется сказали что у Яндекса просто свой normalize. Увы это сейчас нельзя открыть и найти поиском на новом форуме тоже.
Всем привет! Верстаю проект. Верстаю один. Верстаю статику.
Сложности (недостатки). Не знаю JavaScript, препроцессоры не использую (и не изучены).
Проект длинный, объемный и сложный по функционалу, и вот сейчас, где то по середине появилось опасение, что в ближайшем будущем, то что я делаю, будет понятно только мне, и то не с первого раза.
В этой связи, а так же с учетом недостатков, могу я использовать БЭМ, например модульно, с самого низа и по мере роста своих возможностей приращивать используемый функционал? Если да. Поскольку я ребенок в технологии, могу ли задавать дурацкие вопросы и получать вразумительные ответы? Или же пока пойти подкачаться в html/css и смежных технологиях?
P.S. Читал, читаю, смотрю видео на тему. Пока каша в голове. Может еще особенность восприятия, и мне нужно просто поговорить с живым человеком, в контексте насущных вопросов.
Здравствуйте, пытаюсь разобраться в этой технологии, подскажите пожалуйста, как можно организовать выпадающее меню ? С одноуровневым все понятно, взял из компонентов, затемизировал как нужно, но как тут поступить ?
Коллеги, давненько присматриваюсь к БЭМ методологии. Но никак не могу до конца понять как его интегрировать в проект на django. Может у кого есть опыт, поделитесь?
Ребята, помогите решить задачку, хочется сделать по уму:
У меня есть две страницы в bundles: page1 и page2. Эти страницы очень похожи, разница в том, что page2 немного более расширена ( добавляются информационные блоки). В результате нужно иметь две страницы с чистым исходным кодом ( чтобы дополнительные блоки были только на странице page2).
Так как дизайн дорабатывается, да и для удобства поддержки, не хочется дублировать одинаковые на этих двух страницах вещи. Одинаковый блок, кроме текста, содержит ещё компоненты ( как стандартные из bem-components, так и самописные), да и вообще, представляет собой внушительную портянку.
Как сделать правильнее? Я пока вижу такие варианты:
- создать блок common_page и в bemhtml прописать там всю информацию для общей информации. После этого, подключать этот блок на странице page1 и page2. Отсюда возникают вопросы, правильно ли писать столько html в данном случае ( в bemjson около 1500 строк кода ) и будут ли работать стандартные и самописные компоненты? Ну и, конечно, переписывать 1500 строк кода совсем не хочется.
- придумать что-то типа @import(page1) для страницы page2. Возможно ли такая реализация?
- попытаться решить через модификатор ( расширенная страница - page2 или обычная - page1). Но при этом у меня должно в bundles так и остаться 2 физические страницы с чистым кодом. Как тогда организовать работу модификатора?
Философия "не mvc" ?
- Насколько я понял, методология придерживается идеи 1 страницы. Т.е. у нас нет $layout в котором лежит $content, где $content это какая-то view'ха. Как разрешить этот вопрос в рамках методологии БЭМ? Все что у нас есть это макеты в .bundlers и блоки в .blocks.
- Мы сверстали статику, и получили index.html, index.css, index.js, мы отдали это backend'у, на баке прогреры натыкают переменных которые пришли из контроллеров, и как только появляется необходимость поменять структуру странички, например добавить блок "заявки", то начинается боль. Нам снова надо пересобрать страничку через bem и отдать прогерам перезаписав работу бакендчиков? Как избежать этой боли?
Предположим, что есть 2 блока: .sidebar и .button
В случае если .button находится внутри .sidebar, то внешний вид .button каким-то образом меняется. Следовательно контейнер влияет на своего чайлда. По определенным причинам наши JAVA программисты отказываются вводить модификаторы для .button, мотивируя это тем, что в момент вставки они не знают контейнер в который будет вставлена кнопка. Более того ими предполагается, что если элемент в данном контейнере уникален, то для него не стоит придумывать модификатор, а нужно использовать наследование от родительского блока.
Какой правильный выход из этой ситуации?
Знаю что каскад это не тру в бэм, но У меня в проекте есть блок content. Внутри него есть стандартные теги h1,h2,h3... p ...ul Стили для них я написал каскадом внутри блока контента(это обусловленно тем что контент-менеджеры текст заполнять будут не чего не зная о классах) И есть заголовки которые используются внутри это блока аля contenttitle у которого такой же тег h1. Как можно правильно переопределить стили contenttitle внутри content не используя каскадность. Знаю про файл зависимостей deps.js но он эту проблему не решает так как каскад. Возможно есть способ переопределить элемент content__title, внутри content что бы последующие изменения править только в элементе. А не в нескольких местах. Таких блоков где контент менеджеры правят много и внутри их контекста заголовки отличаются.(Такой уж дизайн)
Здравствуйте, учусь БЭМ. Сейчас в проекте переписал шапку на БЭМ, но не уверен что с названием классов правильно все сделал. Можете что нибудь посоветовать? Прикладываю макет и папку со стилями. Заранее спасибо. https://yadi.sk/d/z1IPnxfRgrr53
есть блок 'someBlock' в нём элемент 'elem1' в нём блок 'image', картинка image.svg
{
block : 'someBlock'
{
elem: 'elem1',
content:
{
block: 'image',
attrs:{src: 'image.svg'}
}
}
}
получается такая вот файловая структура desktop.bundles |-index | |-... |desktop.blocks | |-image | |-someBlock | | |-__elem1
вопрос: куда положить файлик image.svg чтобы всё было по уму? если положить в папку с бандлом то безусловно работает, но что-то мне подсказывает что надо делать как то по другому, логично что картинка должна лежать где-то в /desktop.blocks/someBlock/__elem1, тогда не понятно как обратиться к этой картинке в attrs:{src: 'image.svg'} чтобы она нашлась?
9 years ago
Стоит задача, нужно постараться внедрить BEM- методологию в проект на Zend Framework. С чего начать?
Как известно у ZF своя файловая структура, и поэтому bem-tools нужно адаптировать под эту самую структуру, как?
Приятного дня. Решил использовать в проектах bem. Но думаю мне предстоит пройти ещё долгий путь прежде, чем я начну это делать правильно. Я был бы очень благодаре за ревью и комментарии что сделано плохо, почему и как можно улучшить. А что — хорошо и вообще, руки прочь, не трогать.
https://github.com/SilentImp/VacayKit — репозиторий. http://silentimp.github.io/VacayKit/ — проект собран в gh-pages
Интересуют комментарии по поводу всего. И bem. И сборщика. И скриптов. И бананчика.
С уважением. Антон.
В методологии БЭМ главным краеугольным камнем является то что нету наследования. Я начал пробовать собирать БЭМ, с руковоства -> Собираем статическую страницу на БЭМ Сделав пункт - "Описание страницы в BEMJSON-файле" страничка собралась, запустилась по адресу - http://localhost:8080/desktop.bundles/hello/hello.html Здорово! =) Я открыл инспектор кода, и увидел 0_0 наследование - .input_theme_islands .input__box { position: relative; display: block; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } http://screencast.com/t/wI61OvqVln6F
Подскажите, пожалуйста, не нашел про это ничего. В верстке, как именовать блоки, элементы и модификаторы - все понятно. А что говорит БЭМ на счет именования названий анимаций(keyframes анимаций)? Если не использовать никакой привязки названия анимации к блоку или элементу, в котором анимация должна использоваться, то будет существовать вероятность, что где-то ещё в проекте есть название анимации с таким же именем.
Дорогие разработчики Яндекса, дорогие форумчане. Я недавно знакомился с методологией БЭМ и мне очень понравилось. Сделал небольшую верстку придерживаясь БЭМ - нейминга. Пожалуйста, кому не сложно, хочу услышать Ваше мнение, какие ошибки, а также рекомендации. Спасибо за внимание, сслыки ниже. http://build-yourself.ru/shop/ https://github.com/sergeyamator/Prydbay
Привет!
Сегодня в нашей компании проходил мой мастер-класс по БЭМ. Брали самые азы — CSS и файловую структуру. Задание делали прямо "на сцене", по очереди. Вот слайды, задание там внутри http://varya.me/bem-css-workshop/
В конце смогли сравнить изменения, которые мы сделали без всякого БЭМ https://github.com/varya/bem-css-workshop-source/pull/1/files и то же самое с БЭМ https://github.com/varya/bem-css-workshop-source/pull/2/files Получилось очень наглядно, и вроде бы это "продаёт" идею гораздо лучше презентаций и статей.
Кстати, для многих стало открытием, что SASS и LESS поддерживают БЭМ-селекторы, хотя этой фиче уже больше года.
Как вам мастер-класс? Кстати, можете слайды использовать для себя, конечно же :-)
Разве menu-item используется вне блока menu?
Встретилась на Хабре весьма полезная статья про сложность инструкций. Существующая документация отличная, но когнитивное сопротивление у неё на самом деле очень высокое. Сейчас по терминологии Купера я уже "апологет" и нормально ориентируюсь в документации. Но по ощущениям множество "уцелевших" не могут воспользоваться замечательными инструментами, в первую очередь из-за сложности входа в мир БЭМ. Очень хочется цитировать вторую главу "Психбольницы в руках пациентов", а параграф про "Апологетов и уцелевших" хоть полностью сюда вставляй.