https://varya.me/component---src-templates-post-js-content-file-pa…bundles-index-ru-md-cae29410e50f4213753f.js

1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[7973],{2131:function(e,t,n){n.r(t),n.d(t,{default:function(){return f}});var l=n(8453),a=n(6540);function s(e){const t=Object.assign({p:"p",a:"a",span:"span",img:"img",em:"em"},(0,l.RP)(),e.components);return a.createElement(a.Fragment,null,a.createElement(t.p,null,"Некотрое время назад мой знакомый, который делает проект на полном стеке БЭМ\n(BEM-CSS, i-bem.js и BEMHTML-шаблоны),\nзадал мне несколько вопросов об использовании\n",a.createElement(t.a,{href:"https://github.com/bem/project-stub/tree/14e24fd17ba66a357a2f6fcdce045065b4eb5d6c"},"BEM project\nstub"),".\nОтвечая на вопрос, я пообещала опубликовать ответ в виде текста, потому что\nмногие вещи вокруг БЭМ не проговариваются, считаясь слишком простыми — и\nошибочно!",a.createElement("excerpt")),"\n",a.createElement(t.p,null,"Вопрос был о конфигурационном файле ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.bem/make.js</code>'}}),", который нужен при\nиспользовании\n",a.createElement(t.a,{href:"http://bem.info/tools/bem/bem-tools/"},"bem tools"),"\nдля сборки страниц.\n",a.createElement(t.a,{href:"https://github.com/bem/project-stub/blob/14e24fd17ba66a357a2f6fcdce045065b4eb5d6c/.bem/make.js#L12"},"Строчки 12 и\n13"),"\nописывают регулярные выражения для ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">blocks</code>'}})," и ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">bundles</code>'}}),". Не сразу понятно,\nчто это значит."),"\n",a.createElement(t.p,null,"Вообще эти выражения нужны, чтобы распознать папки на файловой системе. Те,\nкоторые заканчиваются на ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.blocks</code>'}})," — для блоков, а те, что заканчиваются на\n",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.bundles</code>'}})," — для бандлов (страниц). Под эти выражения, например, подходят папки\n",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">desktop.blocks</code>'}})," и ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">desktop.bundles</code>'}})," из project-stub."),"\n",a.createElement(t.p,null,"Для чего нужна папка ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">desktop.blocks</code>'}}),", должно быть понятно. Поскольку БЭМ —\nмодульный паттерн, необходимо место для хранения модулей, то есть блоков. Каждый\nблок — это директория, содержащая все файлы, нужные для каждого конкретного\nинтерфейсного модуля."),"\n",a.createElement(t.p,null,"Вот, например, ",a.createElement(t.a,{href:"https://github.com/varya/online-shop-dummy/tree/master/desktop.blocks"},"набор блоков одного\nпроекта"),"."),"\n",a.createElement(t.p,null,"Папка ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">desktop.bundles</code>'}})," нуждается в пояснении. Она содержит страницы – результат\nиспользования блоков. Каждая страница помещена в отдельную директорию, внутри\nкоторой располагаются все файлы, нужные для страницы.\nМожно снова посмотреть\n",a.createElement(t.a,{href:"https://github.com/varya/online-shop-dummy/tree/gh-pages/desktop.bundles"},"пример из предыдущего\nпроекта"),"."),"\n",a.createElement(t.p,null,"Разница в том, что файлы блоков созданы разработчиком, а файлы бандлов созданы\nbem tools. Для блоков это знакомые нам CSS, JavaScript и иногда шаблоны."),"\n",a.createElement("pre",null,a.createElement("code",null,"├── desktop.blocks/\n│   ├── goods/\n│   │   ├── ",a.createElement("a",{href:"https://github.com/varya/online-shop-dummy/blob/master/desktop.blocks/goods/goods.bemhtml"},"goods.bemhtml"),"\n│   │   ├── ",a.createElement("a",{href:"https://github.com/varya/online-shop-dummy/blob/master/desktop.blocks/goods/goods.css"},"goods.css"),"\n│   │   ├── ",a.createElement("a",{href:"https://github.com/varya/online-shop-dummy/blob/master/desktop.blocks/goods/goods.deps.js"},"goods.deps.js"),"\n│   │   └── ",a.createElement("a",{href:"https://github.com/varya/online-shop-dummy/blob/master/desktop.blocks/goods/goods.ie.css"},"goods.ie.css"))),"\n",a.createElement(t.p,null,"Проводя параллели для БЭМ (и любого другого модульного паттерна) в реальном\nмире, можно сказать, что блок — это кирпичик."),"\n",a.createElement(t.img,{src:"http://img-fotki.yandex.ru/get/6730/14441195.30/0_7e0f8_33c1c86c_L.jpg",alt:""}),"\n",a.createElement(t.p,null,"Файлы бандлов — это тоже файлы, нужные для браузера: CSS, JavaScript, HTML. ",a.createElement(t.em,null,"Ни\nодин из них не написан разработчиком, они созданы bem tools"),'. Можете посмотреть\nвнутрь файлов и убедиться, что код абсолютно "роботный".'),"\n",a.createElement("pre",null,a.createElement("code",null,"├── desktop.bundles/\n│   ├── index/\n│   │   ├── ",a.createElement("a",{href:"https://github.com/varya/online-shop-dummy/blob/gh-pages/desktop.bundles/index/_index.css"},"_index.css"),"\n│   │   ├── ",a.createElement("a",{href:"https://github.com/varya/online-shop-dummy/blob/gh-pages/desktop.bundles/index/_index.js"},"_index.js"),"\n│   │   ├── ",a.createElement("a",{href:"https://github.com/varya/online-shop-dummy/blob/gh-pages/desktop.bundles/index/index.bemjson.js"},"index.bemjson.js"),"\n│   │   └── ",a.createElement("a",{href:"https://github.com/varya/online-shop-dummy/blob/gh-pages/desktop.bundles/index/index.html"},"index.html"))),"\n",a.createElement(t.p,null,"Для понимания bem tools представьте, что это строительный кран. Он берет\nстроительные блоки и возводит из них дом."),"\n",a.createElement(t.img,{src:"http://img-fotki.yandex.ru/get/9058/14441195.30/0_7e0f3_ff76f66a_L.jpg",alt:""}),"\n",a.createElement(t.p,null,"Хотя, кроме _.js, _.css и *.html файлов, всё-таки есть один файл, написанный\nразрабочиком.\nЭто\n",a.createElement(t.a,{href:"https://github.com/varya/online-shop-dummy/blob/gh-pages/desktop.bundles/index/index.bemjson.js"},"index.bemjson.js"),"\n— JSON описание того, что за блоки нужны на странице и какова их древовидная\nструктура. Звучит логично, ведь только человек знает, что нужно показать на\nстранице. Всё остальное делают bem tools. Получив информацию о том, какие блоки\nнужны для страницы, они берут их код из ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">desktop.blocks</code>'}})," и формируют с их\nпомощью страницу."),"\n",a.createElement(t.p,null,"Продолжая пример со строительством дома, можно сказать что ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">page.bemjson.js</code>'}})," —\nэто чертеж."),"\n",a.createElement(t.img,{src:"http://img-fotki.yandex.ru/get/6704/14441195.30/0_7e1ba_9dacd537_L.jpg",alt:""}),"\n",a.createElement(t.p,null,"Но почему же ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">bem tools</code>'}})," нужно регулярное выражение в настройках?"),"\n",a.createElement(t.p,null,"Это несложно. Все папки, которыми оперирует ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">bem tools</code>'}})," — это ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">уровни переопределения</code>'}}),". Должно быть легче, если представлять уровень как набор\nсущностей. Уровень блоков представлен папкой ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">desktop.blocks</code>'}}),", а уровень страниц\n— папкой ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">desktop.pages</code>'}}),". В конфигурационной папке\n",a.createElement(t.a,{href:"https://github.com/bem/project-stub/tree/14e24fd17ba66a357a2f6fcdce045065b4eb5d6c/.bem/levels"},".bem/levels/"),"\nесть инструкции, по которым bem tools понимают, что делать с уровнями разных\nтипов."),"\n",a.createElement(t.p,null,"Выделяя в проекте блоки и бандлы, можно делать разные наборы блоков и разные\nбандлы, собранные из этих наборов. Например, блоки для desktop и touch версий\nсайта могут храниться в одном репозитории. И страницы, собранные из таких блоков\n— тоже."),"\n",a.createElement("pre",null,a.createElement("code",null,"├── desktop.blocks/\n├── desktop.bundles/\n├── touch.blocks/\n└── touch.bundles/")),"\n",a.createElement(t.p,null,"Возвращаясь к примерам из реального мира, не только кирпичики могут быть\nмодулями, но и детальки LEGO."),"\n",a.createElement(t.img,{src:"http://img-fotki.yandex.ru/get/6704/14441195.30/0_7e0f6_f69c7d44_L.jpg",alt:""}),"\n",a.createElement(t.p,null,"Из них также можно построить дом. Немножечко другой, конечно."),"\n",a.createElement(t.img,{src:"http://img-fotki.yandex.ru/get/9326/14441195.30/0_7e0f4_3d999550_L.jpg",alt:""}),"\n",a.createElement(t.p,null,"Если пойти дальше, вы можете выделить код блоков, общий для всех платформ, и\nхранить его отдельно."),"\n",a.createElement("pre",null,a.createElement("code",null,"├── common.blocks/\n├── desktop.blocks/\n├── desktop.bundles/\n├── touch.blocks/\n└── touch.bundles/")),"\n",a.createElement(t.p,null,"С такой структурой desktop версия формируется из кода блоков уровней\n",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">common.blocks</code>'}})," и ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">desktop.blocks</code>'}}),", а touch версия — из уровней ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">common.blocks</code>'}}

1),"\nи ",a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">touch.blocks</code>'}}),"."),"\n",a.createElement(t.img,{src:"http://img-fotki.yandex.ru/get/6725/14441195.30/0_7e0f5_3e107fd4_L.jpg",alt:""}),"\n",a.createElement(t.p,null,"И в заключении, я не перестаю радоваться идее проекта\n",a.createElement(t.a,{href:"https://github.com/bem/project-stub/"},"BEM project\nstub"),". Сама постоянно использую его,\nначиная новые проекты. Туториал о\n",a.createElement(t.a,{href:"http://ru.bem.info/articles/start-with-project-stub/"},"старте проекта на полном стеке\nБЭМ")," показывает, как именно.\nТак же БЭМ использует и знакомый, задавший мне вопрос. Я никогда раньше не\nподозревала, что project stub позволяет начать работы с БЭМ без знания всего\nтого, что описано выше. :-)"),"\n",a.createElement(t.p,null,"Кстати, написав все это, я поняла, что описание основ БЭМ для меня несложно и\nзанимает разумное время. При этом (я надеюсь!), это очень полезно для других.\nТак что спрашивайте всё, что вы хотите знать."))}var o=function(e={}){const{wrapper:t}=Object.assign({},(0,l.RP)(),e.components);return t?a.createElement(t,e,a.createElement(s,e)):s(e)},r=n(5556),c=n.n(r),m=n(3433),d=n(9868),u=n(7037),p=n(3928),g=n(4449);const i={Box:m.a,Button:d.$,Text:u.E,Heading:p.DZ,Paragraph:p.fz,PatternJourney:p.Rl,PureHtml:p.Qi,Section:p.wn,Hero:p.lq,Widget:p.x0,PatternJourney:p.Rl,WidgetContainer:p.uM,Workshop:p.cR,ProjectRoles:p.JV,DsAspects:p.nD,Link:p.N_,Image:p._V,ImageBlock:p.Dq,Map:p.T5,YandexImage:p.zX,Instagram:p.pd},b=e=>({children:t})=>a.createElement(p.DZ,{level:e},t),h={h1:b(1),h2:b(2),h3:b(3),h4:b(4),h5:b(5),h6:b(6),p:({children:e})=>a.createElement(p.fz,{standout:!0},e),a:p.N_,ul:p.Ul,ol:p.Ol,div:({"data-excerpt":e,children:t,...n})=>e?a.createElement(p.fz,{as:"div",lead:!0},t):a.createElement("div",n,t)};h.h1.propTypes={children:c().node};const E=({data:{mdx:e,site:{siteMetadata:{siteUrl:t}}},children:n,pageContext:{next:s,prev:o,fileSourceUrl:r}})=>{const{readingTime:c,slug:d,disqusIdentifier:u}=e.fields,{date:b,title:E,subTitle:f,cover:_,tumblr:k}=e.frontmatter,x=e.frontmatter.tags&&e.frontmatter.tags.split(","),y=d.startsWith("blog/");return e?a.createElement(p.PE,null,a.createElement(p.I0,{imageUrl:_&&_.childImageSharp.gatsbyImageData.images.fallback.src,tags:x,date:b,readingTime:y&&parseInt(c.minutes)>0?`${Math.round(c.minutes).toFixed(1)} min read`:null,title:E,subTitle:f}),a.createElement(p.G$,{data:e}),a.createElement(m.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},a.createElement(l.xA,{components:{...h,...i}},n),a.createElement(m.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},x&&x.length>0&&x.map(e=>a.createElement(p.vw,{key:e,name:e.trim(),slug:(0,g.fX)(e),margin:"xsmall"}))),y&&a.createElement(a.Fragment,null,a.createElement(p.WB,{flex:!1,prevSlug:o&&`/${o.fields.slug}`,nextSlug:s&&`/${s.fields.slug}`,prevTitle:o&&o.frontmatter.title,nextTitle:s&&s.frontmatter.title,pad:{vertical:"medium"}}),a.createElement(p.Sn,{link:r}),a.createElement(p.Hw,{slug:d,title:E,disqusIdentifier:u,tumblr:k,siteUrl:t})))):null};function f(e){return a.createElement(E,e,a.createElement(o,e))}},8453:function(e,t,n){n.d(t,{RP:function(){return s},xA:function(){return r}});

1var l=n(6540);const a=l.createContext({});function s(e){const t=l.useContext(a);return l.useMemo(()=>"function"==typeof e?e(t):{...t,...e},[t,e])}const o={};function r({components:e,children:t,disableParentContext:n}){let r;return r=n?"function"==typeof e?e({}):e||o:s(e),l.createElement(a.Provider,{value:r},t)}}}]);
2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-posts-blocks-and-bundles-index-ru-md-cae29410e50f4213753f.js.map