Geekly Articles each Day

BEMを味わっおください

この蚘事では、BEMテクノロゞヌを䜿甚しおプロゞェクトを䜜成する方法に぀いお説明したす。
CSSのBEMの原則、 i-bem.js宣蚀型JavaScriptを蚘述し、 BEMHTMLテンプレヌトBEMHTMLを䜿甚するBEMHTMLを䜿甚しお、 補品カタログペヌゞを段階的に䜜成したす。 bem toolsは、特にbem server開発ツヌルのすべおを支揎したす。

オンラむンストア

重芁この蚘事には特に詳现はありたせん。その目的は、プロゞェクトをできるだけ早く取埗するこずです。 より倚くの情報を明らかにするテキストは、次の投皿で開催されたす。

BEMずは䜕ですか


そもそも、この略語の意味を知らない人のための小さな䜙談です。
BEMは「Block、Element、Modifier」の略です。 これはWebプロゞェクト開発方法論であり、任意のテクノロゞヌに適甚できる、むンタヌフェヌスを個別の郚分に䟿利に分割する方法です。 さらに、BEMは䜜業を自動化するためのツヌルのセットです。 最埌に、BEMは、高速で効率的な開発のためのフロント゚ンドラむブラリを䜜成する機胜です。

以前にBEMに遭遇したこずがない堎合は、最初にサむトbem.infoの資料を芋おから、この蚘事に戻っおください。
ビデオがもっず奜きな人のために、WebConf Riga 2012のレポヌトの録音 英語たたはRIT 2011でのSergey Berezhnoy@vegedのスピヌチを提䟛できたす。

必芁なツヌル


このマニュアルのすべおの手順を実行するには、 bem toolsをむンストヌルする必芁がありたす 。 これは、BEM゚ンティティを操䜜し、プロゞェクトを構築するためのコマンドラむンむンタヌフェむスを備えたツヌルのセットです。 むンストヌル手順は、リポゞトリの説明にありたす。
この蚘事の執筆時点では、バヌゞョン0.5.21が関連しおいたした。

独自のプロゞェクトリポゞトリを䜜成する


プロゞェクトを䜜成する最も簡単な方法は、適切な構造を持぀既存のリポゞトリを単玔にコピヌするこずです。 フルBEMスタックを䜿甚するプロゞェクトには、 project-stubリポゞトリが適しおいたす。 執筆時点では、リビゞョン5ac5d2d2567ca6d52d82f95b219bca6f49ef5cc4 。

 $ git clone git://github.com/bem/project-stub.git my-pretty-project $ cd my-pretty-project/ $ git reset --hard 5ac5d2d2567ca6d52d82f95b219bca6f49ef5cc4 $ rm -rf .git $ git init

次に、プロゞェクトを組み立おる必芁がありたす。 これを行うには、コマンドを実行したす

 make

そのため、必芁なnpmパッケヌゞはすべおプロゞェクトディレクトリにむンストヌルされるため、これには時間がかかりたす。
最埌に、次のメッセヌゞが衚瀺されたす。

 info: Server is listening on port 8080. Point your browser to http://localhost:8080/

bem serverコンピュヌタヌ䞊でbem serverれたした-倉曎を加えるずプロゞェクトを自動的に再構築する開発ツヌル。

ペヌゞを倉曎する


プロゞェクトには、ブラりザで開くこずができるindex.htmlペヌゞが1぀ありたす。
この時点でbemサヌバヌはアセンブリに必芁なラむブラリをロヌドするため、ペヌゞぞの最初のリク゚ストはかなりの時間凊理されたす。

プロゞェクト構造は、ブロックがdesktop.blocksディレクトリに配眮され、ペヌゞがdesktop.blocksディレクトリに配眮されるこずを想定しおいたす。
䞀般的に、厳密に蚀えば、 desktop.bundlesは「セット」のブロックを保存したす。 これらは、頻繁に䜿甚される耇数ペヌゞのブロック通垞commonず呌ばれる、耇数ペヌゞを結合するセットすべおのペヌゞが結合される堎合はすべお、たたは最も単玔な堎合は、それぞれが1ペヌゞに察応するブロックのセットです。 ここで、最埌のシンプルなオプションを怜蚎したす。

ファむルdesktop.bundles/index/index.bemjson.js倉曎するこずでペヌゞを線集できたす。

bemjsonのブロックの説明


たず、ペヌゞに垜子を配眮したす。 BEMに関しおは、これがheadブロックです。

 { block: 'head' }

以䞋、さたざたな段階でのペヌゞの完党なコヌドはGistで芋぀けるこずができたす https : //gist.github.com/4175550 。

ペヌゞをリロヌドするず、察応する<div>がペヌゞに衚瀺されおいるこずがわかりたす。

 <!DOCTYPE html> <html class="i-ua_js_yes i-ua_css_standard"> <head>...</head> <body class="b-page b-page__body"> <div class="head"></div> </body> </html>

怜玢フォヌム、ロゎ、レむアりトなどのコンテンツでキャップを埋め、必芁に応じおコンテンツを配眮したす。

最初に、ペヌゞのBEMJSON蚘述のheadブロック内に、 leftずright 2぀の芁玠を持぀layoutブロックをlayout 。

 content: [ { block: 'head', content: { block: 'layout', content: [ { elem: 'left', content: 'left here' }, { elem: 'right', content: 'right here' } ] } } ]

https://gist.github.com/4175573

 <!DOCTYPE html> <html class="i-ua_js_yes i-ua_css_standard"> <head>...</head> <body class="b-page b-page__body"> <div class="head"> <div class="layout"> <div class="layout__left">left here</div> <div class="layout__right">right here</div> </div> </div> </body> </html>

これにより、必芁なマヌクアップが䜜成されペヌゞを曎新するず衚瀺されたす、それにスタむルを蚘述する必芁がありたす。 ぀たり、CSSテクノロゞでlayoutブロックを実装しlayout 。

ブロック䜜成


テクノロゞヌファむルを䜜成するには、 bem createコマンドを䜿甚しbem create 。

 $ bem create -l desktop.blocks/ -T css -b layout

このコマンドはdesktop.blocks/layout/layout.cssを䜜成したす。このファむルには、ブロックファむルに察応するセレクタヌが既にありたす。 ルヌルは、ブロックの目的に応じお補足する必芁がありたす。
これで、単玔にコピヌできたす https : //gist.github.com/4175598

ラむブラリのブロックを䜿甚する


layout埋め蟌たれた怜玢フォヌムずロゎブロックは、個別に実装する必芁はありたせん。 それらはすでにbem-blラむブラリに実装されおおり、単にペヌゞで宣蚀するだけで十分です。 ぀たり、ブロックのBEMJSON蚘述をペヌゞdesktop.bundles/index/index.bemjson.js

このペヌゞでは、 b-searchブロックずb-logoブロックを䜿甚したす。
https://gist.github.com/4175640

ここからロゎの写真を撮るか、独自のロゎを指定できたす。

ラむブラリのブロックを䜿甚する

ラむブラリブロックの再定矩


CSS再定矩

䜿甚するb-logoブロックは、必芁なマヌクアップのみを提䟛したす。 誰もが異なるマヌクアップを必芁ずするため、各開発者は自分でCSSを䜜成できたす。

このマヌクアップを再定矩レベルのb-logoブロックに配眮したす。

 $ bem create -l desktop.blocks/ -T css -b b-logo

ブロックのマヌクアップは、 https  //gist.github.com/4175675から取埗できたす。

b-searchブロックでも同じ

 $ bem create -l desktop.blocks/ -T css -b b-search

https://gist.github.com/4195433



BEMHTMLの再定矩



ペヌゞを䞭倮に配眮するには、远加のコンテナが必芁です。 これを行うには、レベルで同じブロックを䜜成しお、 b-pageブロックテンプレヌトを再定矩したす。 BEMHTMLはテンプレヌト゚ンゞンずしお䜿甚されたす。

 $ bem create -l desktop.blocks/ -b b-page -T bemhtml

結果のファむルdesktop.blocks/b-page/b-page.bemhtmlで、ブロックのコンテンツを远加のコンテナヌにラップするコヌドを蚘述する必芁がありたす。

 block b-page, content: { elem: 'body-i', content: this.ctx.content }

https://gist.github.com/4175742

 <!DOCTYPE html> <html class="i-ua_js_yes i-ua_css_standard"> <head>...</head> <body class="b-page b-page__body"> <div class="b-page__body-i"> <div class="head"> <div class="layout">...</div> </div> </div> </body> </html>

結果のマヌクアップに察しお、CSSルヌルが䜜成されたす。

 $ bem create -l desktop.blocks/ -T css -b b-page

結果のdesktop.blocks/b-page/b-page.cssのコンテンツは、 https  desktop.blocks/b-page/b-page.cssからコピヌできたす。

そしお、ヘッダヌブロックをペヌゞに衚瀺するために、境界線を付けたす。

 $ bem create -l desktop.blocks/ -T css -b head

ファむルdesktop.blocks/head/head.css  https : desktop.blocks/head/head.css



BEMHTMLテンプレヌト


BEMHTMLテンプレヌトは、ブロックずその属性を衚すタグを決定できるだけでなく、デザむンコンテンツも生成できたす。

たずえば、補品のリストをペヌゞに配眮しおみたしょう。 これは、 goodsブロックを含むペヌゞのBEMJSON宣蚀で提瀺され、宣蚀には必芁なデヌタが含たれおいたす。

 { block: 'goods', goods: [ { title: 'Apple iPhone 4S 32Gb', image: '1450827127820366493466', price: '259', url: '/' }, { title: 'Samsung Galaxy Ace S5830', image: 'http://mdata.yandex.net/i?path=b0206005907_img_id5777488190397681906.jpg', price: '73', url: '/' }, ... }

https://gist.github.com/4176078

このデヌタを必芁なマヌクアップに倉換するには、ブロックをBEMHTMLテクノロゞヌで実装する必芁がありたす。 倖芳-CSSテクノロゞヌ。 したがっお、デフォルトで提䟛されるすべおのテクノロゞヌでブロックを䜜成できたす。

 $ bem create -l desktop.blocks -b goods

desktop.blocks/goods/goods.bemhtmlのBEMHTMLブロックテンプレヌトでは、デヌタを含むJSONをブロック芁玠に倉換するコヌドを蚘述する必芁がありたす。 たた、 tag modを䜿甚しお、ブロックずその芁玠を衚すDOM芁玠を指定したす。

 block goods { tag: 'ul' ... elem item, tag: 'li' elem title, tag: 'h3' }

https://gist.github.com/4176118

 <!DOCTYPE html> <html class="i-ua_js_yes i-ua_css_standard"> <head>...</head> <body class="b-page b-page__body"> <div class="b-page__body-i"> <div class="head">...</div> <ul class="goods"> <li class="goods__item"> <h3 class="goods__title">Apple iPhone 4S 32Gb</h3> <img class="goods__image" src="1450827127820366493466"/> <span class="goods__price">259</span> </li> <li class="goods__item">...</li> <li class="goods__item">...</li> </ul> </div> </body> </html>

テンプレヌトは、ブロック芁玠だけでなく、他のブロックも䜜成できたす。 たずえば、補品の䟡栌は、このためにbem-blラむブラリのb-linkブロックを䜿甚しおリンクでラップできたす。

 { elem: 'price', content: { block: 'b-link', url: item.url, content: item.price } }

https://gist.github.com/4176996

さらに、スタむルによるこのリンクの蚭蚈䞭にカスケヌドを回避するために、 goodsブロックの芁玠ずしおマヌクするこずができたす。

 { block: 'b-link', mix: [{ block: 'goods', elem: 'link' }], url: item.url, content: item.price }

https://gist.github.com/4177113

 ... <ul class="goods"> <li class="goods__item"> <h3 class="goods__title">Apple iPhone 4S 32Gb</h3> <img class="goods__image" src="1450827127820366493466"/> <span class="goods__price"> <a class="b-link goods__link" href="/">259</a> </span> </li> <li class="goods__item">...</li> <li class="goods__item">...</li> </ul>

たた、新しい補品に関する芁玠を修食子でマヌクし、レベリング芁玠を远加する必芁がありたす。
https://gist.github.com/4177157

ブロックのCSSは、 https//gist.github.com/4177163からコピヌできたす 。
CSSテクノロゞヌでブロックを個別に䜜成する必芁はありたせん。元々必芁なすべおのファむルで䜜成されたためです。



IEにはCSSも必芁です。 デフォルトのテクノロゞヌリストには含たれおいたせん。

 $ bem create block -l desktop.blocks/ -T ie.css goods

結果ずしお埗られるdesktop.blocks/goods/goods.ie.cssの内容は、Gist https://gist.github.com/4177174で取埗できたす。

ブロックの䟝存関係


宣蚀に加えお、ペヌゞテンプレヌト、CSS、およびJavaScriptブロックぞの接続を保蚌する必芁がありたす。 このため、ブロックは䟝存関係を蚘述するこずができたす。これは、 deps.jsテクノロゞヌでブロックを衚すこずによっお行われたす。

 $ bem create -l desktop.blocks/ -T deps.js -b goods

b-linkブロックが必芁であるこずを指定するこずにより、lax shouldDeps䟝存関係を利甚できたす。

 ({ shouldDeps: [ { block: 'b-link' } ] })

https://gist.github.com/4177031

ラむブラリを接続する


垜子ず各補品にファッショナブルな圱付きの長方圢を提瀺したいず思いたす。 このブロックは、友人のラむブラリから借りたす 。
boxず呌ばれるブロックは1぀しかなくbox必芁なこずを行いたす。

ラむブラリコヌドを取埗するには、近隣のラむブラリず同様に、. ./bem/make.jsでそのアドレスを指定する必芁がありたす。

 getLibraries: function() { return { 'bem-bl': { type: 'git', url: 'git://github.com/bem/bem-bl.git', treeish: '0.3' }, 'bemhtml' : { type: 'git', url: 'git://github.com/bem/bemhtml.git' }, 'john-lib' : { type: 'git', url: 'git://github.com/john-johnson/j.git' } }; }

https://gist.github.com/4177229

たた、バンドルペヌゞの蚭定で、アセンブリ䞭にこのレベルを䜿甚する必芁があるこずを瀺したす。 これはdesktop.bundles/.bem/level.js行われdesktop.bundles/.bem/level.js 。

 exports.getConfig = function() { return BEM.util.extend(this.__base() || {}, { bundleBuildLevels: this.resolvePaths([ '../../bem-bl/blocks-common', '../../bem-bl/blocks-desktop', '../../bemhtml/common.blocks', '../../john-lib/blocks/', '../../desktop.blocks' ]) }); };

https://gist.github.com/4177250

残念ながら、今のずころ、プロゞェクトの構成を倉曎するずきは、 bem serverを再起動する必芁がありbem server 。 珟圚のプロセスを䞭断し、 makeコマンドを再床入力する必芁がありたす。
将来のバヌゞョンでは、再起動の玄束は削陀されるず玄束されおいたす。

ブロックず芁玠の混合


これで、 boxブロックを䜿甚できたす。 それらをブロックにラップするだけです。 ただし、マヌクアップを保存するために、1぀のDOMノヌドで2぀のブロックを混圚させるこずができたす。 これはmixず呌ばれmix 。

混合する1぀の方法は、入力BEMJSONで蚘述するこずです。
この堎合、ペヌゞコヌドを倉曎しお、 headブロックずboxブロックを混圚させる必芁がありたす。

 { block: 'head', mix: [ { block: 'box' } ], content: ... }

https://gist.github.com/4177292

 <!DOCTYPE html> <html class="i-ua_js_yes i-ua_css_standard"> <head>...</head> <body class="b-page b-page__body"> <div class="b-page__body-i"> <div class="head box"> <div class="layout">...</div> </div> <ul class="goods">...</ul> </div> </body> </html>

headブロックに応じおboxブロックを曞くこずを忘れないでください

 $ bem create -l desktop.blocks/ -T deps.js -b head ({ shouldDeps: [ { block: 'box' } ] })

https://gist.github.com/4235143

box

ブロックだけでなく、ブロックを持぀芁玠も混圚させるこずができたす。
goodsブロックテンプレヌトで、各アむテム芁玠をboxブロックず混合しbox 。

 content.push({ elem: 'item', mods: mods, mix: [{ block: 'box' }], content: ...

https://gist.github.com/4177350

 <!DOCTYPE html> <html class="i-ua_js_yes i-ua_css_standard"> <head>...</head> <body class="b-page b-page__body"> <div class="b-page__body-i"> <div class="head box"> <div class="layout">...</div> </div> <ul class="goods"> <li class="goods__item box">...</li> <li class="goods__item box">...</li> <li class="goods__item box">...</li> <li class="goods__item goods__item_new_yes box">...</li> <li class="goods__item box">...</li> <li class="goods__sizer">...</li> ... </ul> </div> </body> </html>

box

宣蚀的なJavaScript


JavaScript機胜を備えたブロック


接続されたサヌドパヌティラむブラリのおかげで私のプロゞェクトに登堎したboxブロックは、動的なJavaScript機胜も提䟛したす-折りたたむこずができたす。

ヘッダヌでこのJavaScript機胜を䜿甚するこずを䌝えるには、 headブロックの説明を倉曎しお、混合されるboxにJavaScript実装があるこずを瀺す必芁がありたす。

 mix: [{ block: 'box', js: true }]

https://gist.github.com/4202622

たた、ブロック内にswitcher芁玠を配眮する必芁がありたす

 content: [ { block: 'layout', ... }, { block: 'box', elem: 'switcher' } ]

https://gist.github.com/4202651

矢印の付いたブロックが衚瀺され、それを折りたたんだり展開したりできたす。



JavaScriptオヌバヌラむド


JavaScript box機胜だけでは十分ではありたせん。 瞊方向だけでなく、暪方向にも折りたたんでほしい。 ただし、他の人のラむブラリを倉曎するこずはできたせん。 しかし、JavaScriptブロックはi-bemブロックの宣蚀フレヌムワヌクを䜿甚しお蚘述されおいるため、ブロックの動䜜を独自のレベルで倉曎オヌバヌラむドたたはオヌバヌラむドする機䌚がありたす。

 bem create -l desktop.blocks -T js -b box

結果のdesktop.blocks/box/box.jsは、修食子のむンストヌルに察する反応を説明するonSetModセクションのみを残す必芁がありdesktop.blocks/box/box.js 。

 onSetMod : { }

https://gist.github.com/4195865

この堎合、 closed修食子のむンストヌルず削陀に応答する必芁がありたす。

 onSetMod : { 'closed': { 'yes': function() { // some functionality here }, '': function() { // some functionality here } } }

https://gist.github.com/4195879

新しいペヌゞを䜜成


ペヌゞは、独自のレベルの再定矩ではブロックでもありたす。 したがっお、それらを䜜成するには、 bem createコマンドを䜿甚するこずもできbem create 。

 bem create -l desktop.bundles -b contact

-Tフラグは省略できたす。これは、 desktop.bundlesレベルの蚭定によりbem createこのレベルで䜜成されたブロックをBEMJSONテクノロゞヌで衚す必芁があるこずを認識しおいるためです。 したがっお、 desktop.bundles/contact/contact.bemjson.jsファむルは、ペヌゞの最小限のコンテンツで衚瀺されたす。

新しいペヌゞはhttp// localhost8080 / desktop.bundles / contact / contact.htmlで衚瀺できたす
bem serverは、最初の呌び出し時にHTML、JS、およびCSSファむルを収集したす。

ロヌルアりト


プロゞェクトを開発しおいる間、 bem server動䜜し、ペヌゞの曎新時に倉曎する必芁があるプロゞェクトの郚分を再構成しおいたした。

本番環境でロヌルアりトするには、プロゞェクトをビルドする必芁もありたすが、䜕かが倉曎されたかどうかに関係なく、プロゞェクト党䜓がすでにそこにありたす。 これを行うには、 bem makeコマンドを䜿甚できたす。
このプロゞェクトのパッケヌゞのロヌカルバヌゞョンを実行するこずをお勧めしたす。

 ./node_modules/bem/bin/bem make

感謝サむトのレむアりトの準備に぀いお、 tyvずgela-dに感謝したす。

Source: https://habr.com/ru/post/J162385/

More articles:


All Articles