module.exports = {
levels: {
"components/common.blocks": { default: true },
"components/desktop.blocks": {},
"design/common.blocks": {},
"design/desktop.blocks": {},
},
libs: {
"node_modules/bem-core/common.blocks": {},
"node_modules/bem-core/desktop.blocks": {},
"node_modules/bem-components/common.blocks": {},
"node_modules/bem-components/desktop.blocks": {},
},
modules: {
"bem-tools": {
plugins: {
create: {
techs: [ "post.css", "browser.js", "bemtree.js", "bemhtml.js", "deps.js", "md" ],
templateFolder: ".bem/templates",
levels: {
"components/common.blocks": {
default: true,
techs: [ "browser.js", "bemtree.js", "bemhtml.js", "deps.js", "md" ]
},
"design/common.blocks": {
techs: [ "post.css", "deps.js" ]
},
"design/desktop.blocks": {},
},
}
}
},
}
}.bemrc в корне проекта: https://github.com/bem/bem-sdk/tree/master/package... — соответственно, нужно задать "scheme": "flat".
// Default
block('my-block').elem('my-elem'); // => `my-block__my-elem`
// React-style
block('my-block').elem('my-elem'); // => `MyBlock-MyElem`{
block: 'link',
to: 'article',
params: {
author: 'Realetive',
tags: ['bem']
}
}{
block: 'slider'
items: [ 'flower', 'heaven', 'forest', ].map( item => ({
elem: 'item',
imagePath: 'assets/img/slider/' + item + '.jpg'
}) )
}<div class="site">
<header class="header">
<div class="header__container container">
<div class="header__inner">
<a class="logo header__logo" src="/"><img class="logo__img img" src="images/logo.svg" alt="Likigram" title="Likigram"></a>
<nav class="nav" role="navigation">
<a class="nav__link link" src="#">Buy Instagram Likes</a>
<a class="nav__link link" src="#">Buy Instagram Followers</a>
<a class="nav__link link" src="#">Buy Instagram Views</a>
<a class="nav__link link" src="#">Get Free Likes</a>
<a class="nav__link link" src="#">Instagram Downloader</a>
<a class="nav__link link" src="#">Support</a>
</nav>
</div>
</div>
</header>
<section class="banner">
<div class="banner_container container">
<div class="banner__inner">
<div class="banner__info">
<h1 class="banner__title heading heading_size_l">Get Real Instagram likes, followers and views!</h1>
<p class="banner__paragraph paragraph">Buy instagram likes, instagram followers and instagram views for your account.</p>
<p class="banner__paragraph paragraph">Grow your instagram account quickly with Likigram</p>
</div>
<div class="banner__actions">
<img class="img banner__img" src="images/banner-img-1.png" alt="banner img">
<a class="button button_medium button_background_orange banner__button" src="#price-followers">Grow Your Instagram Account</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer_container container">
<div class="footer__inner">
<div class="footer__info">
<div class="logo footer__logo"><img class="img logo__img" src="images/footer-logo.png" alt="Likigram" title="Likigram"></div>
<div class="copyright footer__copyright">© 2019, Likigram All rights reserved</div>
<div class="payments"><img class="payments__img" src="images/payments.png" title="We accept payments via Visa Mastercard and Paypal" alt="We accept payments via Visa Mastercard and Paypal"></div>
</div>
<div class="footer__menu">
<ul class="footer__nav list nav">
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Contact Us</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Support</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Blog</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Terms and Conditions</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Privacy Policy</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Refund Policy</a></li>
</ul>
<ul class="footer__nav list nav">
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Likes</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Followers</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Views</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Followers</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Likes</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Instagram Downloader</a></li>
<li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">About Likigram</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>bem create my-block.{js,css,pug} -l componentsbem create my-block__{header,content,footer}.{js,css,pug} -l components./components
my-block__content/
my-block__content.js
my-block__content.css
my-block__content.pug
my-block__footer/
my-block__footer.js
my-block__footer.css
my-block__footer.pug
my-block__header/
my-block__header.js
my-block__header.css
my-block__header.pugcontact, например, может обладать какими-то отличительными качествами, которые делают его самостоятельным, например:<address>;
block(select) {
max-width: 100%;
vertical-align: bottom;
.elem(button) {
width: 100%;
vertical-align: top;
text-align: left;
}
block(button).elem(text) {
display: block;
padding-right: 2em;
&:empty:before {
content: '\00a0'
}
}
.elem(tick) {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-image: url('../icon/_symbol/icon_symbol_chevron-down.svg');
transition: transform 0.1s ease-out;
width: 2em;
padding: .5em;
&:empty:after {
content: none
}
}
.mod(opened) .elem(tick) {
transform: rotate(-180deg)
}
.mod(width available) {
width: 100%
}
.mod(has-error) {
block(button) {
border-color: red
}
.elem(tick) {
display: none;
}
}
}<!-- Первый слайдер -->
<div class="slider slider_promo">
<div class="slider__track">
<div class="slider__slide"></div>
</div>
<div class="slider__arrows"></div>
</div>
<!-- Второй слайдер -->
<div class="slider slider_grid">
<div class="slider__meta">
<div class="slider__description"></div>
</div>
<div class="slider__track">
<div class="slider__slide"></div>
</div>
<div class="slider__arrows"></div>
</div>