«Пишем БЭМ правильно» - Игорь Зенич, iDeus
HTML-код
- Опубликовано: 18 сен 2024
- Как сверстать сайт вручную «по-БЭМ» без классов "block__element__element", и на реальном примере со всеми его проблемами, а не меню-пункт_меню-ссылочка, как вы видели раньше. Без BEMJSON, BEM Tools, но с миксованием, модификаторами и разбором ошибок.
Я знаком с БЭМ давно, и все эти годы встречался с множеством заблуждений и стереотипов в использовании. В докладе постарался развеять популярные мифы и рассказал о своём трехлетнем опыте внедрения и использования БЭМ и связанным с этим наступании на грабли.
WebCamp: Front-end Developers Day
Одесса
4 июля 2015
#WebCampOdessa
#OIW2015
#WebCamp2015
Слайды: ihorzenich.gith...
(вы можете подглядеть текст доклада, если откроете его исходный код - там в комментах html написаны тезисы)
* Обновлённые слайды с последней версии доклада: Ihorzenich.gith...
* Объединённые слайды всех моих докладов про БЭМ: ihorzenich.gith...
Продолжение, доклад про то как разные компании и люди используют БЭМ, как именно реализуют его у себя: • Web Standards Days в К...
Игорь, большое спасибо вам за доклад, очень все круто
Спасибо за доклад. Кратко и по делу.
Спасибо!
Официальная запись этого доклада:
ruclips.net/video/kBgHdSOj33A/видео.html
Спасибо за доклад! БЭМ пока что изучаю, на практике не доводилось использовать, но хочется. Хотел бы узнать вот такую штуку: не идут ли вразрез философии БЭМ и бутстрап? Ведь, допустим, насколько я имею опыт работы с бутстрапом там все построено таким образом, что характерные изменения элемента (позиционные, стилистические) применяются посредством добавления классов. В итоге имеем классы типа ".col-md-6 .col-xs-12 .text-center .font-italic", т.е. в класс какого-то одного элемента засунуто все - и стиль, и позиционирование и какие-то функциональные классы, на которые цепляются события. Или в рамках такого инструмента как css-фреймворк БЭМ вообще не имеет смысла?
БЭМ прекрасно сочетается с бутстрапом. Классы сетки можно смело использовать "как есть" (смотрите в слайдах к этому докладу обсуждаются варианты "как делать wrapper-блоки", как их именовать). А презентационные классы бутстрапа отлично прячутся внутрь Sass, смотрите мой доклад про Bootstrap 4 - ruclips.net/video/zJJka2Z9r5I/видео.html
Спасибо за ответ, Игорь! Будем изучать и пробовать применять
Вот тут в обновленных слайдах про то как делать сетку: ihorzenich.github.io/talks/bem-frontendweekend/?full#84 , и а вот тут обсуждают это же на форуме БЭМ: ru.bem.info/forum/656/
При наличии grid и flexbox точно нужен bootstrap?
Пиратская запись доклада «Пишем #b_ правильно» с #WebCampOdessa #OIW2015 #WebCamp2015
Привет, спасибо за видео. На 34:35 плохо слышно название того, что яндекс собирается выкатить. Можешь плз дать ссылочку.
Ros Ivanov BEM project-stub HTML edition: github.com/tadatuta/bem-project-stub-he и ru.bem.info/forum/469/
Когда миксуешь на большом проекте, где гарантия, что не продублируешь название блока? Ведь суть БЭМ в том, чтобы не было дублей.
Такая проблема есть, ее можно решить с помощью namespa'ов - просто префиксов в имени класса блока. Также можно перейти на CSS Modules.
Стили вне блоков - плохо. Не спорю.
Но часто необходимо использовать различные js библиотеки, задача которых подменять стандартные элементы на нестандартные. Например стилизация селектов или слайдеры для инпутов.
Проблема их использования в том, что они содержат некий предопределённый набор генерируемых классов. И конечно про бэмом там и не пахнет.
Например пишем мы мултьтиселект:
pastebin.com/m4XhEvDL
Подключаем к нему js библиотеку и видим страшное:
pastebin.com/My0nm0Fu
Может я слишком ленив и мне нужно отказаться от проверенных временем библиотек в пользу нестабильного и долгопишущегося собственного кода?
Roman Fov не нужно отказываться от стороннего кода.
Если есть возможность переопределить какие-то классы (например мы fancybox вызываем как class="fancybox") - то хорошо, нет - тоже ничего страшного.
Именно поэтому я и пропагандирую использовать префиксы, чтоб у вас было своё пространство имён и вы не пересекались именами классов с чужим/legacy-кодом.
бля ору топ чел ухааха вадим макеев говорит говорил про бездушных машин, так это я был ))))) ахаха
Вопросы нифига не слышно.. Микрофон включать не пробовали?
Сергей Мезенцев Первый вопрос был «как указывать разное позиционирование для одного и того же блока, когда он на разных страницах расположен по разному». Автор вопроса пробовал использовать моификаторы, но это оказалось неудобно. Ответ был - использовать блоки-холстеры = доп. блоки выше по DOM, на которые будут навешиваться разные стили позиционирования.
Кстати ещё можно использовать абстрактные блоки - когда есть базовые стили (абстрактный блок) а к ним добавляются миксованием нужные.
Второй вопрос - это разработчик с Яндекса подтвердил, что да, таки надо использовать блоки-холстеры.
Третий - в чём выгода использования БЭМ, насколько тяжело его внедрять. Ответ был - чтоб полностью въехать нужно много времени, но начать можно сразу уже на существующем проекте и это не усложнит, а облегчит работу.
Четвертый - уже без микрофона девушка спрашивала как писать БЭМ-синтакис в SASS, показал примеры из слайдов.
Igor Zenich спасибо