Ruby on RailsのBEMレイアウト

はじめに

この記事では、鉄道プロジェクトのBEMレイアウト手法についてお話したいと思います。 私はまだこのようなマニュアルを見ていません（多分これを除きますが、ガイドとしてはあまり機能しないので、後で詳しく説明します）。この記事を書くことにしました。 さらに、BEMとレールの統合を簡素化するgemを作成しました。これについては後で説明します。

準備する

まず、実際の摩擦とレールを取り付ける必要があります。 私はrvmが好きです 。 rvmのインストール手順に従い、コマンドを使用してレールをインストールします。

gem install rails
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、Windowsをお持ちの場合は、ここからレールをインストールできます。



次に、コマンドを使用して新しいプロジェクトを作成します。

 rails new some_cool_project
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、新しく作成されたプロジェクトのルートにあるGemfileファイルに「bem」gemを追加します。 また、 high_voltageおよびslim-rails gemを追加することをお勧めします。 1つ目は、レールとハックに関する特別な知識がなくても、レイアウト設計者向けの標準ページを作成できます。2つ目は、レイアウトを大幅に高速化し、出力HTMLを縮小できる優れたテンプレートエンジンです。



次のコマンドを使用して、bem gemに必要なファイルをインストールします。

 rails g bem:install
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

config / initializers / bem.rb configがインストールされます。ここでは、テクノロジー（元々はscssとjs）と、テクノロジーごとのファイルを生成するためのテンプレートを変更できますlib / bem / templates / scss.ttとlib / bem / templates / js.tt 。 プロジェクトであまり使用したくない場合、このテクノロジーはscssではなくconfig / initializers / bem.rb configで記述する必要があります：

 BEM.configure do |config| config.technologies = [ { :group => 'stylesheets', :extension => '.less', :name => 'less', :css_directive => '@import', :css_prefix => "'", :css_postfix => "';" }, { :group => 'javascripts', :extension => '.js', :name => 'js' } ] end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のコマンドを使用して、 springの設定をインストールすることも強くお勧めします。

 rails g bem:spring
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このライブラリを使用すると、バックグラウンドで環境をロードでき、ブロックをすばやく生成できます。



springの構成をインストールした場合、次のコマンドを実行します。

 spring stop
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコマンドは、Springを後で再起動するために必要です。



これで、レイアウトを開始できます。

レイアウト

レイアウトの例として、 この記事からレイアウトを選択しました。



ブロック、レベル、およびマニフェストは、bem createコマンドを使用して作成されます。 このコマンドは、次のフラグを入力として受け入れます（フラグの値は、それらの後にスペースを介して指定する必要があります）。

• -bは、ブロックを作成または使用します。
• -eは、要素を作成または使用します。
• -mは修飾子を作成します。
• -v修飾子の値。
• -lはレベルを作成または使用します。
• -aマニフェストを作成または使用します。
• JavaScriptテクノロジーファイルを作成するための-jsフラグ。
• スタイルシートテクノロジーファイルを作成するための-cssフラグ。

コマンドを実行して、フラグとその使用に関する情報を読み取ることもできます。

 bem help create
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

createコマンドは、同じファイル構造を作成します（ こちらと同じ）。



次に、ブロックとマニフェストがコマンドを介して接続される将来のレベルを作成します。

 spring bem create -l shared -a application
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ばねなしでも可能です。

 bem create -l shared -a application
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、私が言ったように、春は環境をバックグラウンドに保ち、後続のコマンドの実行を高速化します。



このコマンドを実行すると、使用されている各テクノロジーに対してレベルとマニフェストが作成されたというメッセージがターミナルに表示されます。 この場合、共有はブロックが配置されるレベルであり、アプリケーションはマニフェストです。



マニフェストファイルを見ると、共有レベルが文字列で接続されていることがわかります。

 @import 'shared/shared';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

単純なルールが適用されます-レベルはマニフェストで接続され、ブロックはレベルで接続されます。



マニフェストアプリ/資産/application.lessを使用するため、以前のマニフェストアプリ/資産/application.cssを削除します。



次に、同様のコマンドで必要なブロック|要素|修飾子を作成します。

 spring bem create -l shared -b clear --no-js spring bem create -l shared -b page --no-js spring bem create -l shared -b page -e head-line --no-js spring bem create -l shared -b page -e line --no-js spring bem create -l shared -b link -m menu -v active --no-js ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、jsファイルはこれらのブロックには使用されないため、ブロックが配置される共有レベルと--no-jsフラグを示します。



これらのコマンドを実行すると、必要なcssクラスが既に登録されているテンプレートが作成され、必要なことは適切なプロパティを入力するだけです。



間違えて間違ったクラスを書いたり、間違ったレベル/マニフェストにブロックを含めたりした場合は、リバースコマンドを実行して、bem destroyコマンドでブロック|要素|修飾子|レベルを削除することでいつでもロールバックできます。 --jsおよび--cssを除くすべての同じフラグを受け入れます。



次に、必要なブロック|要素|修飾子を作成すると、htmlレイアウトに移動します。 既に説明したhigh_voltage gemをインストールした場合は、フォルダーを作成するだけで十分です。

 mkdir app/views/pages
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どのビューに必要なビューが配置されます。 このgemのドキュメントを読むと、おそらくビューの接続と表示のしやすさが気に入っているでしょう。 たとえば、ようこそページのレイアウトが必要です。 app / views / pages / welcome.html.slimビューを作成し、そこに必要なhtmlを設定します。 コマンドを使用してWebサーバーを起動した後

 rails s
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果はhttp：// localhost：3000 / pages / welcomeで確認できます



すべての写真をapp / asset / imagesフォルダに入れ、すべてのタグをimage_tagレールヘルパーに置き換えます。 lessファイル内の画像のアドレスはimage-url（less-rails gemが提供するヘルパー）に置き換えられます。



残念ながら、上記の例ではjsを使用していません。 それにもかかわらず、提供されているテンプレートにより、目的の関数を簡単に作成して実行できます。

 function your_function_name_initializer() { // some code } $(function() { your_function_name_initializer(); }); $(window).bind('page:load', function() { your_function_name_initializer(); })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

なぜそう 実際には、レールのバージョン4以降、ターボリンクgemが使用され、ページの表示が大幅に高速化されますが、js初期化にいくつかの機能が追加されるため、これらの初期化を関数として設計し、これらの2つのイベントで呼び出す必要があります。



転送されたレイアウトの最終バージョンと鉄道プロジェクト自体は、githubで表示できます。

代替案

最初に話した記事についてのbem-on-rails gemもあります。 私はすでにそれを使いたかったのですが、現時点では多くの不利な点があり、私の宝石を書くことを余儀なくされました。 マイナス面としては、レベルとマニフェスト（通常、レベルとマニフェストで2つのマニフェストを作成することはできませんでした）、読みにくいコード（タブとして4つのスペース、どこか2つ）、および一般に品質が低いことです。コード（単一のテストではなく、アーキテクチャがい、gemが急いで行われ、コードがそこに投げ込まれたように感じ、一般にバージョン4.1のレールでは実行できませんでした- パッチを送信する必要がありました）この宝石のヘルパー そのような例（単純フッタ）を受信ozhet：

 = b 'footer', content: [{ elem: 'el', elemMods: ['left'], content: [' «»'] }, { elem: 'el', elemMods: ['center'], content: [{ elem: 'nav-link', tag: 'a', content: [''] }, { elem: 'nav-link', tag: 'a', content: [' ']}, { elem: 'nav-link', tag: 'a', content: ['  '] }] }, { elem: 'el', elemMods: ['right'], content: ['<a href="http://ya.ru/"> </a>'.html_safe] }]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは明らかに読みやすさを向上させず、レイアウト設計者を混乱させる可能性があります。



それでも、一般的にこれはbem-toolsをレールに適合させる良い試みだと思います。



ハーフパイプなど、gruntを介してネイティブbem-toolsを使用するために、レールにノードを埋め込むためのいくつかのエキゾチックなオプションがあります。 しかし、このオプションは非常に面倒で難しいと考えたため、真剣に考えていませんでした。



もちろん、別のリポジトリでbem-tools自体を使用することもできますが、この場合はレイアウトと転送のプロセスが非常に複雑になります。たとえば、絶えずレイアウトを追跡するなど、URLを自動的に転送および置換するための（bash）スクリプトを記述する必要があります前後に。 まあ、それは大丈夫です。 しかし、最悪の部分は、これら2つのリポジトリでブランチからブランチに切り替えることです。転送スクリプトを開始する前に、railsを使用するリポジトリとレイアウトを使用するリポジトリで正しいブランチを使用し、どのブランチが呪われてマージされるかを確認してください彼女も別のリポジトリにいます。 したがって、ソリューションは最適ではありません。

おわりに

したがって、レイアウトデザイナーにとっては、css | jsでビューとブロックをリベットするだけで、内部で何が起こっているかを必ずしも知る必要はありません。 そして、バックエンド開発者が必要なロジックを挿入します。 つまり、レイアウトプロセスが大幅に簡素化されます。



私が書いたbemライブラリー（gem）は完全にオープンで、最も手頃なMITライセンスを使用しています。 ライブラリを最近作成しましたが、フィードバックと提案、およびgithubのプルクエストを喜んで受け取ります。



私はすべてについて非常に簡単に書きました。各項目について多くの説明と議論を書くことができますので、ご質問があればコメントでお答えします。

参照資料

https://github.com/gkopylov/bem

https://github.com/gkopylov/bem_with_rails_and_less_example_app



PS



執筆時点では、bem gemバージョン1.0.0が使用されていました。 現時点では、このgemのバージョンは1.1.0です-ブロック|要素|修飾子をマニフェストに直接接続する機能が追加されています。 これは、レイアウトデザイナーがレベルを接続するのではなく、マニフェストで直接スタイルを接続する順序を変更できるようにするためです。



このオプションを使用するには、生成コマンドに-iフラグを追加するだけです。 したがって、作成されたスタイルは、レベルのスタイルを作成せずに、すぐにマニフェストに接続されます。



importおよびrequireディレクティブの使用についてもう少し書きたいと思いました。 どちらのディレクティブにも長所と短所があります。 インポートの利点：

-ミックスインと変数を接続できます

-すべてが1つのファイルにマージされ、生成を必要とする多くのファイルの代わりに、ブラウザーにより速く与えられます（ただし、これはマイナスでもあります。以下を参照）

マイナスの中で：

-CSSのデバッグが困難-プリプロセッサエラーが発生した場合、このエラーの場所を見つけるのは困難です

-ネストされたcssファイルを変更してもスタイルは更新されません（スタイルを更新するには、コマンドrm -rf tmp / asset / *を実行し、レールを再起動します）

requireのプラス：

-デバッグが簡単です。それぞれの必要に応じて（開発環境で）個別のファイルをコンパイルするためです。

-livereloadインジェクションの可能性（理論的には、これはインポートよりも簡単です）

マイナスの中で：

-ミックスインまたは変数を使用できない

-コンパイルされたスタイルファイルは、多くの「require」ディレクティブがある場合、ブラウザに長時間与えられることがあります



そのため、1つまたは別のディレクティブを使用する決定は、プロジェクトに応じて慎重に行わなければなりません。



デフォルトでscssを使用することにした理由をもう少し書きたいと思いました。 事実、sass railコミュニティではプリプロセッサの方が人気があり、デフォルトでは、新しいアプリケーションを作成するときに、このプリプロセッサを使用したgemが有効になっています。 そして、（ 実際のところ、faostは 正しく認識されており、 http: //lesscss.org/features/#parent-selectors-featureにはあまりありませ ん ）BEMにちょうど適した優れた機能があります-これはアンパサンドの使用です。 すでに、BEMコミュニティの多くは、モディファイヤ用の別のファイル（小さい場合）を作成することから遠ざかり、ブロックを使用してファイルにモディファイヤを直接書き込みます。このサスアンパサンドを使用すると、ブロックのスタイルでそのようなことを直接実行できます。