Eсли БЭМ блоки самостоятелен и независим, то использование в нем переменных цвета или размера шрифта нарушает его концепцию, ведь значения буду хранится отдельно в variables.scss? Вывод - отказаться от глобальных переменных?
Пытаюсь верстать по BEM (приоритет именно на методологию).
Сделал адаптивное меню. Для блока menu создал модификаторы _mobile и _desktop. Не знаю правильно ли это, поэтому не хватает критики.
Ссылка на Plunker. Жаль песочница не поддерживает препроцессоры, было бы удобнее.
P.S.: на счет сетки, то мне удобнее использовать отдельные классы и миксовать их с конкретным блоком, чем использовать миксины.
Буду чрезмерно благодарен за помощь.
Изучаю вёрстку с БЭМ-именованием классов. Решил посмотреть как свёрстана главная страница яндекса. И увидел такую ситуацию:
<div class="container headline">
<div class="row">
<div class="col headline__item headline__leftcorner"> ... </div>
<div class="col headline__item headline__center"> </div>
<div class="col headline__item headline__bar"> ... </div>
</div>
</div>
В блок row вложены элементы блока headline. Не противоречит ли это тому, что элементы одного блока не могут быть элементами другого блока?
На PiterJS рассказал о стеке технологий БЭМ.
Было мало времени на подготовку, но я старался.
Видео: http://bit.ly/bem-full__video Доклад: http://bit.ly/bem-full
Буду рад вашим вопросам и предложениям!
Пишите: https://github.com/alexbaumgertner/presentation-bem-stack/issues
Спасибо!
Подскажите, пожалуйста, то что я верстаю это БЭМ? )) Уж как то классы жирные получаются ((
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Some title here</title>
<meta name="description" content="">
<meta name="viewport" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
</head>
<body class='body'>
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<div id='pagewrap' >
<header class='header'>
</header><!-- End of class header -->
<div class='logo'>
<div class='logo__block1' >
</div> <!-- End of class logo__block1 -->
<div class='logo__block2' >
</div> <!-- End of class logo__block2 -->
</div><!-- End of class logo -->
<nav class='nav'>
</nav><!-- End of class logo -->
</header><!-- End of class header -->
<section class='mainSection'>
<div class='mainSection__block1' >
</div> <!-- End of class mainSection__block1 -->
<div class='mainSection__block2' >
<div class='mainSection__block3' >
</div><!--End of class mainSection__block3-->
<div class='mainSection__block4' >
</div><!--End of class mainSection__block4-->
</div> <!-- End of class mainSection__block2 -->
</section><!-- End of class mainSection -->
<section class='BreackingNewsSection'>
<div class='BreackingNewsSection__header'>
<p class='BreackingNewsSection__header --center'> BREACKING NEWS </p>
</div><!-- End of class BreackingNewsSection__header -->
<div class='BreackingNewsSection__body'>
<div class='BreackingNewsSection__oneNews --marginleft'>
</div><!-- End of class BreackingNewsSection__oneNews -->
<div class='BreackingNewsSection__oneNews'>
</div><!-- End of class BreackingNewsSection__oneNews -->
<div class='BreackingNewsSection__oneNews'>
</div><!-- End of class BreackingNewsSection__oneNews -->
<div class='BreackingNewsSection__oneNews --marginRight'>
</div><!-- End of class BreackingNewsSection__oneNews -->
</div><!-- End of class BreackingNewsSection__body -->
</section><!-- End of class BreackingNewsSection -->
<section class='LatestStoriesSection'>
<div class='LatestStoriesSection__header'>
<p class='LatestStoriesSection__header --center'> LATEST STORIES </p>
</div><!-- End of class LatestStoriesSection__header -->
<div class='LatestStoriesSection__block1'>
<div class='LatestStoriesSection__oneNews'>
<div class='LatestStoriesSection__oneNews__Img' >
</div><!-- End of class LatestStoriesSection__oneNews__Img -->
<div class='LatestStoriesSection__oneNews__text'>
<p class='LatestStoriesSection__oneNews__header'>
Neque porro quisquam est
</p>
<p class='LatestStoriesSection__oneNews__body'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div><!-- End of class LatestStoriesSection__oneNews__text -->
</div><!-- End of class LatestStoriesSection__oneNews -->
<div class='LatestStoriesSection__oneNews'>
<div class='LatestStoriesSection__oneNews__Img' >
</div><!-- End of class LatestStoriesSection__oneNews__Img -->
<div class='LatestStoriesSection__oneNews__text'>
<p class='LatestStoriesSection__oneNews__header'>
Neque porro quisquam est
</p>
<p class='LatestStoriesSection__oneNews__body'>
Lorem Ipsum has been the industry's standard dummy text
</p>
</div><!-- End of class LatestStoriesSection__oneNews__text -->
</div><!-- End of class LatestStoriesSection__oneNews -->
</div><!-- End of class LatestStoriesSection__block1 -->
<div class='LatestStoriesSection__block2'>
</div><!-- End of class LatestStoriesSection__block2 -->
<div class='LatestStoriesSection__block3'>
<ul class='gorizontalMenu' >
<li class='gorizontalMenu__li' > <a>Previous</a> </li>
<li class='gorizontalMenu__li --chosen' > <a>1</a> </li>
<li class='gorizontalMenu__li' > <a>2</a> </li>
<li class='gorizontalMenu__li' > <a>3</a> </li>
<li class='gorizontalMenu__li' > <a>4</a> </li>
<li class='gorizontalMenu__li' > <a>5</a> </li>
<li class='gorizontalMenu__li' > <a>Next</a> </li>
</ul>
</div>
</section><!-- End of class LatestStoriesSection -->
<article class='article'>
</article> <!-- End of class article -->
<footer class='footer'>
</footer><!-- End of class footer -->
</div> <!-- End of id pagewrap -->
<script src="scripts/app.js"></script>
</body>
</html>
Здравствуйте! Возник такой вопрос: допустим, есть единый css-файл, есть у сайта часть для неавторзованных пользователей, есть для авторизованных, и там, и там, например, есть header, но он выглядит абсолютно по-разному. Как в таком случае лучше быть?
Использовать общий для них .header и частные .header--front / .header--back, но в таком случае у нас просто .header будет без стилей. Или сделать родителя .front и .back, а затем - .frontheader и .backheader, но это добавит лишнюю вложенность, от которой мы как раз-таки стараемся избавиться.
Ну и, конечно же, у каждого из хэдеров есть свои внутренние блоки, которые тоже отличаются, т.е. еще вложенности. Т.е. просто .headeruser, .headerlogo сделать не получится, т.к. на front и back они должны выглядеть по-разному, т.е. опять же возвращаемся к вопросу, который я озвучил выше.
Как следует поступать в таком случае?
Всем привет, подскажите, кто как определяет стили для тэгов h1, h2, h3 .....? В блоке page? И второй вопрос. Где Вы подключаете шрифты?
Всем привет. Подскажите, пожалуйста, как переопределить стили блока select через модификатор или киньте пример, в документации ничего не нашел, кроме общего описания, что это возможно https://ru.bem.info/method/key-concepts/#Переопределение-блока .
мне нужно переопределить два свойства: Первое:
.menu-item_theme_islands.menu-item_checked {
/* background: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%…h d%3D%22M13.5.5l-8 12L1.7 8l-1 1.6L5.6 15l9.1-13.4z%22%2F%3E%3C%2Fsvg%3E") 0 50% no-repeat; */
}
заменить на
.menu-item_theme_islands.menu-item_checked {
background-color: #fc0;
}
Второе:
.menu_size_m .menu__group-title~.menu-item_theme_islands, .menu_size_m[class*=menu_mode] .menu-item_theme_islands {
padding: 0 30px;
}
заменить на
.menu_size_m .menu__group-title~.menu-item_theme_islands, .menu_size_m[class*=menu_mode] .menu-item_theme_islands {
padding: 0;
}
В итоге, вместо http://i.imgur.com/HYTWPsN.jpg должно получиться так: http://i.imgur.com/hxGDcse.jpg
Что я сделал:
Добавил модификатор к блоку select ( without : 'tick' )
mods : { mode : 'radio-check', theme : 'islands', size : 'm', without : 'tick' },
- В папке common.blocks/select/_without создал файл select_without_tick.deps.js
({
})mustDeps : { block: 'menu-item', mods: { without: 'tick' } } В папке common.blocks/menu-item/_without создал файл menu-item_without_tick.styl
.menu-item_without_tick { padding: 0;&.menu-item_checked {
background: none; background-color: #fc0; } }
Где у меня ошибка?
Есть БЭМ-проект, который постоянно дополняется новыми страницами. Стилистика дизайна выдерживается более-менее,
т. к. есть некоторое количество стандартизованных решений (например, по виду заголовков, ссылок, списков и т.п.).
Доступ к собранным на одной странице стандартизованным блокам у дизайнера есть.
Но при создании нового макета каждый раз выскакивают отличия от стандарта
(например, различается типографика (line-height, font-size), несмотря на то, что есть .content__title_size_m, в кот. указаны line-height, font-size и т.п.).
Для примера возьмём .content__title. Я вижу только три способа для верстки новых страниц, получаемых от дизайнера:
- доопределение этого блока модификаторами под КОНКРЕТНУЮ страницу ( МИНУС: разрастание блока в принципе ненужным функционалом)
- создание блоков под КОНКРЕТНУЮ страницу (например,
.start-business__title) и миксование их к.content__title( МИНУС: разрастание количества дополнительных блоков в проекте) - доопределение стандартных блоков модификаторами и жесткое указание дизайнеру использовать только эти варианты на ВСЕХ новых страницах, чтобы избежать предыдущих двух пунктов.
Очень не хочется разрастания проекта, которое происходит в 1-ом и 2-ом вариантах. С подобной проблемой, думаю, многие сталкивались. Хотелось бы услышать, как другие справляются или что делают в подобных ситуациях.
Здравствуйте, скажите а префиксы b-, i-, c- всё еще используются? Или это уже устарело? Просто в туториалах на bem.info про префиксы ничего не сказано вроде. Если они уже не используются, то как выделять классы предназначенные только для js?
Недавно начал изучать вёрстку и решил, в именованиях классов, применять БЭМ. Столкнулся с ситуацией, когда есть несколько функционально одинаковых блоков(блок-ссылки на посты) с небольшими визуальными отличиями - это, как я понимаю, решается с помощью модификаторов. Но у этих блоков есть элементы, а запись, вида: block_mod__elem , в "Соглашение по именованию" или "FAQ", я не нашел - ни в описании, ни в примерах. Возникает вопрос: корректна ли запись block_mod__elem ? Если - нет, то почему?
Привет всем!
Дано: использование CSS по методологии БЭМ без bem-tools или enb.
Вчера наткнулся на статью про миксы и на комментарий Виталия про использование каскадов для вложенных блоков:
Вложенные селекторы могут быть при: 1) определении стилей одних блоков/элементов внутри других для изменения их вида. Например, если надо изменить блок link при вхождении его в элемент tab блока head:
.head__tab .link { color: blue }2) изменении вида элементов блока в зависимости от его модификатора:.head_size_big .head__tab { font-size: 150%; }
У меня по этому поводу несколько вопросов:
- Нормально ли что мы всё таки используем каскад для вложенных блоков? Тут конечно не реализация стилей от контекста, но тем не менее мы повышаем специфичность в данном случае.
- Если таким образом использовать каскад, то можно модифицировать только лишь блок? Или же таким образом можно модифицировать и элементы блока, тем самым вмешиваясь в его реализацию извне?
- Такая ситуация: допустим я миксую два блока, либо миксую блок и элемент другого блока на одной ноде. a. В идеальном случае при миксе блоки должны взаимодополнять друг друга? т.е. не может быть перекрывающихся CSS-свойств? b. Если же миксовать блоки с перекрывающимися css свойствами тут уже играет роль порядок следования блоков. Что если мне нужно чтобы одно из свойство моего блока преобладало и не зависело от порядка? Ну или ситуация - мне нужно вообще поменять свойство на совершенно иное, если блоки находятся именно в такой связке (миксе). Допустимо ли писать .link.pseudo-link в реализации одного из блоков? Т.е. описывать замиксованное поведение в одном из блоков?
Надеюсь не слишком запутанно спросил :) Заранее благодарю за ответы.
Всем привет!
Долгое время используем БЭМ в качестве CSS методологии. Очень удобно. Возникло пару вопросов:
- Есть ситуация, когда нужно скрывать/показывать элементы блока или сам блок. Для этого пишется класс утилита, например d-none. Так же есть небольшое количество других утилит. Утилита как вы знаете представляет собой что-то вида:
.d-none {
display: none !important;
}
т.е. выполняют одну единственную функцию, но при этом используют некрасивый прием с !important. Отчасти, это похоже на использование глобальных переменных, которые затирают основное поведение блока. Хотелось бы узнать, что делать если есть много блоков, состояние которых нужно как-то одинаково менять (ну тот же display: none). Создавать для этого у каждого блока отдельный модификатор типа block_hidden? Какие правильные практики для этого использовать?
- Где-то читал, что в методологии БЭМ не очень приветствуется создание адаптивных блоков. Хотя не очень пойму почему. Ведь можно просто реализовывать адаптивную составляющую через media-queries. Что можно на этот счет почитать? И какие есть на этот счет рекомендации?
Заранее благодарю за ответы.
Здравствуйте. Начал разрабатывать проект, используя методологию БЭМ (именование, организация ФС; full bem stack не использую) - встал вопрос: для каждой страницы и для каждого блока нужно подключать свои стили/js (10 блоков на странице - подключаем 10 css файлов /blocks/blockname/blockname.css, /blocks/blockname2/blockname2.css, 10 js файлов итп ), или же собираем все блоки в один большой css/js, и подключаем его один раз на всех страницах? Есть какие то best practices, кто вообще как это делает? В примерах на github (которые смог найти) по одной странице (бандлу), и , соответственно, разумно собрать все блоки в 1 css и 1 js файл. А для многостраничного сайта, где на разных страницах используются разные комбинации блоков? То же самое касается js,не совсем ясен этот вопрос, в документации, к сожалению, ответов не нашел.
В блок refill (desktop.blocks > refill) хочу вложить блок booblock (desktop.blocks > refill > booblock ). Потом в блок booblock вложить блок item (desktop.blocks > refill > booblock > item), а в в папке блока item создать файл .bemhtml ( desktop.blocks > refill > booblock > desktop.blocks.refill.booblock.bemhtml )
Так можно делать?
P/S: Собирается куча блоков, которые оч хочется распределить по папкам...
Есть проект, в common.blocks скопилось уже довольно большое количество блоков. Каким образом можно все это распределить на группы, чтобы в последствии удобнее ориентироваться. На ум только приходит создавать уровни переопределения.
Здравствуйте.
Нахожусь в начале пути освоения методологии БЭМ, разбираюсь с именованием блоков и не могу понять:
Есть меню
<ul class="menu">
<li class="menu__item">1</li>
<li class="menu__item">2</li>
</ul>
Если меню находиться в блоке, например, aside, я хочу добавить микс для изменения стандартного представления меню и его пунктов. Если с наименованием класса самого меню все более-менее понятно — aside__menu, но как должен называться класс пункта меню, aside__item?
<div class="aside">
<ul class="menu aside__menu">
<li class="menu__item aside__item">1</li>
<li class="menu__item aside__item">2</li>
</ul>
</div>
Сделал свою первую небольшую страницу на основе generator-bem-stub блоки описывал в bemjson и прописывал правила css в common-blocks. Страница задумывалась как адаптивная. Поэтому нужно сделать для планшетов и телефонов. В папках touch-pad.bundles и touch-phone.bundles имеются bemjson с минимальным контентом.
Я так понимаю нужно скопировать содержимое desktop.bundles в папки touch-pad.bundles и touch-phone.bundles и прописать нужные css для них. Или как то по другому надо делать?
Ребят как правильно переопределить свойство блока (на файловой системе, как это делает Дмитрий Белицкий в вебинаре https://github.com/bem-events/beminar-3 или же установить модификатор)? Лично мне симпатичен способ Дмитрия, потому что легко найти на какой странице какое свойство переопределяем и общие блоки при этом не захламляются модификаторами. Просто если проект 100 страниц я представляю на что может быть похожа папка общего блока.Что на это говорит методология БЭМ?
Всем привет. Стоит такая задача. Выделить общий css который используют все бандлы. То есть те блоки которые лежат в common.blocks необходимо выделить в common.css, а блоки которые лежат в бандлах выделить в отдельный для каждой страницы css например: index.css. Скажите пожалуйста как правильно это сделать
Добрый день коллеги по цеху. Разрабатываю архитектуру крупного e-commerce проекта. Мне очень нравится декларативный подход БЭМ как идея, методология и подход к проектированию фронтенда со своей системой сборки. Вообще считаю что фронтенд должен быть полностью отделен от бэкенда, роль которого только заниматься доставкой "сырых" данных. А общаться фронт и бэк между собой должны по API. Следовательно получаем следующую архитектуру:
Все запросы через балансер распределяются на фронтенд кластер из nodejs серверов, которые в свою очередь являются неким прокси к кластеру из backend серверов, которые формируют bemjson-дерево из исходных данных в БД и отдает html
Но в реальном мире все немного по-другому. На бекенде будет использоваться готовая e-commerce платформа внутри которой тяжелое java enterprise приложение. Оно уже из коробки имеет свой встроенный шаблонизатор jsp. Его, конечно можно не использовать, но с одной стороны у бизнеса есть четкие сроки запуска проекта, с другой стороны у подрядчика есть опыт классического внедрения этой платформы с использованием шаблонизатора jsp и нет опыта проектов на БЭМ.
Собственно вопросы следующие:
1) Похвалите/раскритикуйте следующий план внедрения: На первом этапе сделать верстку и сборку бандлов по БЭМу и запихнуть все это в шаблонизатор jsp На втором этапе уже разделить полностью фронт и бэк, т.е. перейти на full stack bem
2) Как вы решаете вопросы хранения и обмена пользовательских сессий между фронтом и бэком? Например по адресу mysite.ru/catalog я хочу получить персонализированный список товаров и цен для конкретного авторизованного пользователя. В этом случае нода должна либо хранить сессию пользователя, либо каждый раз опрашивать бэк?
3) Вы делаете несколько репозиториев .git ? Один отдельно для фронта и второй для бекенда? Однако некоторые фичи требуют одновременно изменений фронта и бэка и следовательно должны релизится одновременно. В этом случае удобно все хранить в одном репо.
спасибо, всем b_
Где правильнее писать стили для тега html при необходимости? Для себя пока решил написать их в common.blocks/page/page.styl Для сборки использую enb.
Доброго времени суток! Начала писать первый проект по БЭМ, использую методологию (соглашение по наименованию и структуру фауйлов). Прошу помогите пожалуйста проверить, правильно ли я начинаю использование блоков и элементов по методологии. Задача такая, что навигационная панель будет на главной странице будет сначала отличаться по стилю чем на остальных страницах()без фона). При скроле меню фиксируется и будет приобретать такой вид как на других страницах(с фоном)
<body class="b-page b-main-page">
<div class="l-wrapper">
<header class="l-page-header j-page-header">
<nav class="l-navigation l-navigation--main">
<ul class="b-menu b-menu-main">
<li>
<button class="b-button-toggle" type="button" data-toggle="toggle">
<span class="b-button-toggle__sr-only">navigation</span>
<span class="b-button-toggle__icon-bar"></span>
<span class="b-button-toggle__icon-bar"></span>
<span class="b-button-toggle__icon-bar"></span>
</button>
<ul class="b-dropdown-menu b-dropdown-menu-main">
<li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">О компании</a></li>
<li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Блог</a></li>
<li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Полезные статьи</a></li>
<li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Помощь</a></li>
</ul>
</li>
<li class="b-menu__item b-menu-main-item"><a class="b-menu__link b-menu__link--active b-link" href="">Рекламодателям</a></li>
<li class="b-menu__item b-menu-main-item"><a href="">Владельцам сайтов</a></li>
<li class="b-menu__item b-menu-main-item"><a href="">Обмен трафиком</a></li>
<li class="b-menu__item b-menu-main-item"><a href="">Агентам</a></li>
</ul>
<ul class="b-login">
<li class="b-login__item">
<a class="b-login__signin" href="#">Вход</a>
<a class="b-login__signup" href="#">Регистрация</a>
</li>
<li class="b-login__item i-hide">
<a class="b-login__accaunt-user" href="#">alexander.starodumov@gmail.com</a>
<a class="b-login__signout" href="#">Регистрация</a>
</li>
</ul>
</nav>
</header>
<div class="b-promo-header">
<div class="l-container">
<div class="l-promo-logo b-promo__logo">
<a class="b-promo-header-link">
<img class="b-siteLogo__icon" src="http://net-craft.com/wp-content/themes/netcraft/img/siteLogo__icon.png" alt="Net-Craft.com" title="Net-Craft.com" itemprop="logo" />
</a>
<h3 class="b-promo-header-text b-promo-header--text-middle">logo text</h3>
<h1 class="b-promo-header-text b-promo-header-text--big">logo text</h1>
</div>
</div>
</div>
<div class="b-page__section">
<div class="l-container">
<div class="l-row">
<div class="l-row__col_6">
<div class="b-page__text-block">
</div>
</div>
<div class="l-row__col_6">
<div class="b-page__image-block">
</div>
</div>
</div>
</div>
</div>
<div class="l-footer-push"></div>
</div>
<footer class="l-footer ">
<div class="b-page-footer">
<div class="l-container">
<ul class="b-menu b-footer-menu">
<li class="b-footer-menu__item b-menu-item__item"><a class="b-footer-menu__link b-menu__link b-link" href="">О компании</a></li>
<li class="b-footer-menu__item b-menu-item__itemn"><a class="b-footer-menu__link b-menu__link b-link" href="">Блог</a></li>
<li class="b-footer-menu__item b-menu-item__item"><a class="b-footer-menu__link b-menu__link b-link" href="">Помощь</a></li>
</ul>
</div>
</div>
</footer>
Спасибо большое заранее за помощь.
Обертки бывают двух типов:
- Про расположение блока относительно других блоков
- Про лейаут внутри блока
Когда сталкиваетесь с первым случаем, чаще всего подойдет микс (либо с элементом родителя, либо с элементом сетки). Например:
<div class="some-parent">
<div class="my-something some-parent__something">...</div>
</div>
либо
<div class="grid">
<div class="my-something grid__col">...</div>
</div>
Еще можно не экономить на лишних DOM-узлах и делать так:
<div class="grid">
<div class="grid__col">
<div class="my-something">...</div>
</div>
</div>
Примером из реальной жизни для этого случая будет позиционирование универсальной кнопки, которая ничего не должна знать об отступах от границ какой-нибудь конкретной шапки.
Как делать не стоит: создавать модификаторы для кнопки, задающие margin и т.п. свойства. Такое позиционирование по смыслу не является частью универсального блока, а лишь его конкретного места использования. Да и модификаторов на всех не напасешься.
Если же обертка относится именно к данному блоку (скажем, позиционирование иконки внутри той самой универсальной кнопки или ограничитель по max-width для контента страницы), то это будет внутренний элемент inner:
<button class="button">
<span class="button__inner">
<span class="button__icon"></span>
</span>
</button>
Блок или элемент с названием wrap не имеет особого смысла, потому что на самом деле примерно никогда не нужно заворачивать конкретный блок в абстрактную обертку.
Здравствуйте. Начал познавать методологию БЭМ, и буквально сразу возник вопрос, касаемо места классов сетки (не использую полный стэк, только методология). Что из этого более верный путь: примешивать класс размера блока к самому блоку в верстке:
<div class="block grid__col_3">
или примешивать миксином непосредственно в css (пример на less):
.block {
color: red;
.grid__col_3;
}
С одной стороны - блок должен быть Абсолютно Независимым, то есть его отображение не должно зависеть от того, какой класс сетки мы ему примешали - он должен выглядеть так, как описан в стиле - аргумент ЗА миксин в css. С другой - блок становится более транспортабельным, мы его можем таскать куда и как угодно, и задавать размер непосредственно в верстке - благодаря миксину в html классе блока мы можем растянуть его как угодно без вмешательства в стили - аргумент ЗА миксин в html классе.
Чутье подсказывает третий вариант: создание модификатора элемента блока. "Семантичненько", и все такое. Но тогда такой модификатор нужно создать для каждого элемента блока - этот оверхэд не окупится, в случае, если нужно изменить размер "контейнера" самого блока, и не более того.
Если я что то дико путаю - прошу поправить, и наставить на верный путь, поделиться своим опытом. Благодарю.
Возможно ли обычное наследование (через baseBlock) от нескольких блоков? Похоже нет, но может есть workaround?
Что будет, если блоку унаследованному от базового, указать свой baseBlock в модификаторе? Например:
{block: 'link', baseBlock: 'control'},
{block: 'link', modName: 'overrided', modVal: 'custom', baseBlock: 'another-base-block'}
Как правильно с точки зрения синтаксиса Sass записать стили для элементов что модифицируются каскадом от модификатора блока? Я не нашёл варианта лучше чем:
.b-block {
$rootParent: &;
// …
&.-modificator {
// block with modificator styles…
#{$rootParent}__element {
// element styles…
}
}
}
Это компилируется в:
.block {}
.block.-modificator {}
.block.-modificator .block__element {}
Пришла идея, реорганизовать структуру проекта. Сейчас, все как обычно. есть уровни
admin.pages
desktop.pages
mobile.pages
каждый бандл соответствует определенной странице.
Хочется добавить промежуточное звено - уровни bundles. Чтобы хранить повторяющиеся части страниц. например. header который на всех страницах одинаковый. И, соответственно, в *.pages из нескольких бандлов собирать bemjson полной страницы.
Хотелось бы узнать, стоит ли хотеть так сделать, или даже крупные блоки должны оставаться блоками?
Добрый день.
Я недавно начал изучать БЭМ, и один вопрос не дает мне покоя.
В FAQ написано, что:
- Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы, необходимо создавать блок.
- Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока), в большинстве случаев создается элемент.
Допустим, есть три разных блока, но у них есть заголовки с одинаковым внешним видом. С одной стороны, эти заголовки встречаются в нескольких местах, и, возможно, на нескольких страницах. Это наводит на мысль, что они независимы, и их следует делать вложенными блоками:
http://plnkr.co/edit/rCWCk3yGJJzAWpHqzpHa?p=preview
С другой стороны, эти заголовки всегда находятся внутри своего родителя в определенном месте, что наводит на мысль, что это элементы.
http://plnkr.co/edit/nxh0ObqXDSRKg3N4zAKc?p=preview
Есть ли более развернутые и подробные рекомендации по поводу того, что считать блоком, а что - элементом, и что значит "независимость" в БЭМ?
В базовой верстке по клику надо сменить во всех блоках цвет фона, размер шрифта и т.д. Первое, что приходит в голову это куча модификаторов для каждого блока, но не выглядит рационально. Второе это отдельный css, но это в разрез методологии.
Как грамотно сменить в этом случае отображение сразу у большого количества блоков?