Clever Geek Handbook

BEM on Rails





こんにちは<％= habrauser％>！



私はRuby On Railsフレームワークが大好きです。本当にとてもクールです。 これにより、アイデアをすばやく実現できます。 以前は多くのことを書いていましたが、今日はフロントエンドの開発者です。 私がBEM方法論について知ったとき、私は喜んでいた。どういうわけかあなた自身がそのようなことをするからだ。 zenプロセスが大幅に縮小されると便利です。 こことここで読むことができるBEMについて。 最近のBEMupは、最終的にすべてをその場所に配置しました。 Ruby on Railsのプロジェクトの一部としてBEMを操作するためのツールが必要でした。 具体的な解決策はなく、bem-toolsは以下に説明する明白な理由で機能しませんでした。 bem-toolsをRubyで書くことにしました。



なんで？



多くの人がレールでBEMを使用する方法のアイデアを表明したことがありますが、CSSでクラスに正しく名前を付けることに加えて、有用なことは何も学びませんでした。 さらに、私はそのようなクラスをペンでまったく書きたくありません。 特定のツールは提案されていません。 そして、BEMはcssとjavascriptだけではありません。 レール内にBEMHTMLテンプレートエンジンに似たものが欲しかった。 これを使用するには、V8レールにプラグインしてテンプレートをコンパイルします。 しかし、レールの残りはほとんどなく、これはRubyの方法とはほど遠いです。 私は、HAMLテンプレートの作成とSASSプリプロセッサーの使用に慣れています。 レールでのBEMの使用が、理解に深刻な困難をもたらし、開発者に異常な手順を踏ませるのを本当に望まなかった。 さらに、レールにはパイプラインがあり、アセットを収集してコンパイルするため、フロアはすでに完了しています。 よく考えた結果、ツールの形で必要なものには明確な要件があります。



  1. すべてのRuby on Railsプロジェクト用のブロックを含む1つのディレクトリ。 理想的には、RoRだけではありません。
  2. ビューでのブロックと要素のレンダリング。
  3. ブロック/要素/修飾子の便利な作成/削除/表示。
  4. パイプラインとの統合。
  5. bem-toolsとの最大の類似点。




なぜbem-toolsでないのか


まず、railsアプリケーションでbem-toolsを使用すると、あなたはJavascriptの開発者ではなく、あなたのやり方に従わない部分を手に入れますか？ 第二に、bem-toolsはnpmを介してまだ多くのツールを取得しますが、これは制御できません。 そして、レール開発者にはバンドラーとGemfileがあります。 なぜもっとパッケージマネージャーが必要なのですか？ bundlerを使用すると、いつもの方法でさまざまなプロジェクトのgemsetをいつでも作成できます。 すべての依存関係は、通常の方法でプロジェクトに付属しています。 余分なものは必要ありません。 gemをインストールすると、すべてが機能します。 ブロックのライブラリを除き、プロジェクトのルートに追加のディレクトリはありません。 第三に、レールの組み立てプロセスは多少異なります。すでに実装されているので、変更したくありません。 bem-toolsはファイルシステムでの作業にのみ使用できますが、これはレンダリング用の独立したコードの記述を廃止しません。 また、区画にテンプレートを使用することはできません。 説明したツールは、レールアプリケーションで区画を整理する方法と考えることができます。



どうやって？



作成/削除/表示


ブロックを作成/削除/表示するために、多数のThorタスクを作成しました。 また、ブロックをグループに分散できると便利だと思いました。 ペンではなく、コンソールから、目的のグループのブロックをレンダリングします。 

thor bem:create -b filter -G search


そして今、あなたはこのようなブロック/要素/修飾子を作成することができ、修飾子は値の有無にかかわらずすることができます： 

 thor bem:create -b test thor bem:create -b test -e icon thor bem:create -b test -m large thor bem:create -b test -m color -v red thor bem:create -b test -e icon -m file thor bem:create -b test -e icon -m size -v small thor bem:create -b test -e icon -m size -v small -T sass


削除は同じ方法で行われます。 

 thor bem:remove -b test ...


既存のブロックを表示： 

 thor bem:list thor bem:list -G search thor bem:list -b test ...


私自身は、ブロックのファイル構造をわずかに変更することにしました。 ブロック要素を/ elementsディレクトリに、修飾子を/ modsに入れることにしました。 すべてを1つのディレクトリに保存するよりも便利なように思えました。 いつでも戻ることができます。 これで、ブロックを含むディレクトリがRailsアプリケーションのルートに自動的に作成され、次のようになります。

ファイル構造
ブロック

  • block_name

    • 要素

      • __element_name

        • __element_name.html.haml
        • __element_name.css.sass
        • __element_name.coffee
        • __element_name.md




    • 改造

      • _mod_name

        • _mod_name.css.sass
        • _mod_name.coffee
        • _mod_name.md






    • block_name.html.haml
    • block_name.css.sass
    • block_name.coffee
    • block_name.md


  • group_name

    • block_name






また、各ブロック/要素/修飾子の説明があり、通常のマークダウンであるのも悪くありません。 私が個人的に使用している技術に関係なく、あなたはあなた自身のもの、長い間慣れ親しんでいるものを使用することができます。 これを行うために、すべてのBEM設定を定義するイニシャライザーを作成しました。 そこでは、ブロック/要素/修飾子の接頭辞を含め、自分ですべてを編集できます。



レンダリング


幸いなことに、レールにはヘルパーがいます。 それらとハッシュのおかげで、HAMLビューのレンダリングブロックは次のように実行できます。 

 = b "test", mods: [{color: "red"}], content: [{ elem: "icon", elemMods: [{size: "small"}] }] = b "test", mods: [{color: "red"}], content: [{ block: "yeah", content: ["Hello, BEM!"] }] = b "test", group: "name", mods: [:large, {color: "red"}], content: [] = b "test", cls: "custom", attrs: {"data-toggle": "modal"}, content: [] = b "test", tag: "article", content: []


私の意見では、BEMHTMLのように見えますが、これは朗報です。 slim、haml、sass、coffee、mdテクノロジー用に、テンプレートを作成しました。 ブロックを作成した後、たとえば、hamlテンプレートはhamlテクノロジーを使用したブロックの実装になります。 画像と似顔絵では、興味のあるすべてのテクノロジーのテンプレートを作成できます。



資産はどうですか？


アセットを使用すると、すべてが非常に簡単に決定されます。 スタイルファイルとスクリプトが検索されるスコープに任意のディレクトリを追加できます。 ブロック/要素/修飾子を作成すると、定義付きの行がapplication.css.sassおよびapplication.jsファイルに追加されます。次に例を示します。 

 //= require test/elements/__field/__field.coffee


残りの作業はスプロケットによって行われます。 すべてが正常に機能するためには、application.css.sassおよびapplication.jsファイルにスタイルとスクリプトを記述しないことを強くお勧めします。 使用されるもののリストのためだけに、それらを設定として使用します。 便利で、BEMがありません。 このアプローチにより、原則として使用済みブロック/要素/修飾子の宣言を忘れることができます。 すべてが自動的に行われます。 deps.jsについて忘れることができます。 試してみてください！



生産



このツールキットを今すぐ使用してみてください。 それらをgemの形で設計しました。これをプロジェクトにインストールして、今日BEMを使用できます。 githubへのリンク：bem -on-rails 。

計画


  1. フラグbemおよびjs。
  2. ブロックと要素の混合。
  3. ブロックの構造が変更された修飾子。 これまでのところ、スタイルとjavascriptのみです。
  4. コマンドラインからBem。 Thorを介したタスクの実行には欠点があります。




利益


ブロックを含むディレクトリをgitリポジトリとして使用すると、ブロックを任意のプロジェクトに接続できます。 ブロック/要素/修飾子の実装は、レールに馴染みのあるテクノロジーとPHPに馴染みのあるテクノロジーの両方で実現できます。 すべてのRuby on Railsプロジェクト（これが本当に欲しい）と、BEMの使用を伴う他のプロジェクトの両方で、同じブロックリポジトリを使用できます。 このツールキットは、Ruby on Railsなどのすばらしいフレームワークに対するBEMの影響範囲を拡大するように設計されています。



どんなコメントや助けも喜んでいます。 ご清聴ありがとうございました！



BEMedを維持！


More articles:


All Articles