技術

BEM方法論の紹介

BEM方法論とは何ですか？

小さなWebサイトを構築する場合、通常、スタイルをどのように整理するかは大きな問題ではありません。通常のファイルを作成し、必要なCSSをすべて作成すれば、それだけです。ただし、より大規模で複雑なプロジェクトの場合、コードをどのように編成するかは次のようになります。 重要 。複数のフロントエンド開発者とバックエンド開発者で構成されるチームで作業している場合は、コードの構造がさらに重要になります。

BEM方法論は、コードの保守性を大幅に改善し、開発プロセスをスピードアップします

BEM方法論は、コードの保守性を大幅に改善し、開発プロセスをスピードアップします

今日、CSSコードを削減し、CSSコードをより保守しやすくすることを目的とした方法論はたくさんあります。この記事では、そのうちの1つの例をいくつか説明して提供します。 良い 。 BEMは B ロック IS メント M odifier。その背後にある主なアイデアは、開発プロセスをスピードアップし、CSSクラスを独立したモジュールに配置することで開発者のチームワークを容易にすることです。 header__form--searchのようなクラス名を見たことがあれば、それがBEMの動作です。はい、クラスには非常に長い名前を付けることができますが、それらはすべて読みやすく、理解しやすいものです。



クラスでは必要に応じて名前を繰り返し、より一貫性のあるコーディング構造を作成できるため、ベストプラクティスはIDではなくクラスでのみBEMを使用することです。また、Webサイトを整理されたモジュールに分割する場合は、ブロック、要素、修飾子という同じ構造で構成する必要があります。各ブロックに複数の要素を含めることができ、ブロックと要素の両方に複数の修飾子を含めることができます。ただし、最初に基本的なBEM構造から始めて、例を挙げて説明しましょう。

ブロック

ブロックは、Webサイト内のオブジェクトを表します。これは、コードのより大きな構造チャンクと考えてください。今日のすべてのWebサイトで最も一般的なブロックは、ヘッダー、コンテンツ、サイドバー、フッター、および検索です。 BEMのブロックは、常にCSSクラスをチェーンするための開始点です。いくつかのブロックの例を見てください。

  • コンテンツ
  • メニュー
  • 検索フォーム
.content {/* Styles */} .menu {/* Styles */} .search {/* Styles */}

素子

要素は、特定の機能を実行するブロック内のコンポーネントです。それはそのブロックの文脈でのみ意味をなすはずです：

  • コンテンツ記事
  • メニュー項目
  • 検索入力フィールド
.content__article {/* Styles */} .menu__item {/* Styles */} .search__input {/* Styles */}

編集

モディファイアは、ブロックのバリエーションを表す方法です。 Bootstrapを使用したことがある場合、最も良い例はボタンのサイズです。ボタンのサイズは、ボタン自体のサイズのバリエーションであり、修飾子になります。

  • コンテンツ特集記事
  • メニューリンク
  • アイコンの有無にかかわらず検索フィールド
.content__article--featured {/* Styles */} .menu__item--link {/* Styles */} .search__input--icon {/* Styles */}

命名規則

BEM方法論の主な目的は、CSSセレクターの名前をできるだけ有益で透過的にすることです。元のBEMスタイルは次のように定義されます。

ブロック 名前は通常.headerのような単一の単語ですが、ブロック定義が長い場合は、単一のハイフン-で分割されます。

.lang-switcher {/* Styles */}

素子 名前は二重下線で始まります__：

.lang-switcher__flag {/* Styles */}

編集 名前は単一の下線で始まります_：

.lang-switcher__flag_basic {/* Styles */}

BEM方法論には、非常に重要なルールが1つだけあります。修飾子は、その所有者のコンテキスト外では使用できません。

例：

.btn_big {/* Styles */}

btn_bigを使用できますヘッダーも定義されている場合のみ。

悪い例：

...

良い例え：

...

これらの元のBEMスタイルのほかに、ハリーロバーツやキャメルケーススタイルのような代替の命名スキームがあります。

ハリーロバーツスタイルの例：

.block-name__element-name--modifier-name {/* Styles */}

キャメルケーススタイルの例：

.BlockName__ElementName_ModifierName {/* Styles */}

他にもいくつかありますが、これら2つが最も一般的なものです。個人的に、私はハリス・ロバーツによって提案された命名規則のファンです。これには次の規則があります。

  • 名前は小文字で書かれています
  • BEMエンティティの名前内の単語は、ハイフンで区切られます-
  • 要素名は、二重下線__によってブロック名から区切られます。
  • ブール修飾子は二重ハイフンで区切られます--
  • Key-Value型修飾子は使用されません

この命名規則が他の規則よりもはるかによく形成されている理由は、修飾子要素を他の要素と簡単に区別できるためです。元の命名規則では、修飾子は次のように定義されます。

.block__element_modifier {/* Styles */}

ただし、ご覧のとおり、シングルアンダースコアとダブルアンダースコアの間に大きな違いはありません。一方、ダブルハイフンは明確な分離を提供し、修飾子をすぐに確認できます。

.block__element--modifier {/* Styles */}

さまざまな形式のBEMの例

CSSに加えて、BEMは、JSON、XML、ツリーファイル、またはネストをサポートする任意の形式の整理にも非常に役立つことに注意してください。 BEM方法論は、UIを構築するための優れた方法と考えてください。

console.logは関数ではありません

BEM形式で構造化されたHTML

BEM形式で構造化された次のHTMLについて考えてみましょう。

JSONおよびXML形式を使用して同じことを実現できます。

XML：

{ block: ‘header’, content: [ { block: ‘logo’ }, { block: ‘search-form’, content: [ { block: ‘input’ }, { block: ‘button’ } ] }, { block: ‘lang-switcher’ } ] }

JSON：

blocks/ input/ __box/ --big/ input__box--big.scss input__box.scss button/ --big/ button--big.scss

BEMプロジェクトのファイルシステム構成

BEMでは、ファイルを正しい方法で整理することが重要です。 BEMは、CSSクラスの優れた編成を提供し、それらを完全に理解できるようにするだけでなく、非常に保守しやすいファイル構造も提供します。 SASSファイルでBEMファイル編成手法を使用したプロジェクトの例を見てみましょう。

common.blocks/ button/ button.scss desktop.blocks/ button/ buttons.scss mobile.blocks/ button/ button.scss

上記のように、メインフォルダー内のサブフォルダー構造を確認するだけで、すべてが明確で整理されています。このように、同じパターンに従うのは非常に簡単なので、誰があなたの後に働いているのか、あなたが誰かの後に働いているのかは関係ありません。

BEMプロジェクトをプラットフォームに分割

BEM方法論の手法を使用してファイルを整理するだけでなく、より具体的なことにも取り組むことができます。たとえば、完全に応答するWebプロジェクトを構築していて、クライアントがモバイルの一部のブロックがデスクトップデバイスとはまったく異なることを指定した場合、BEMフォルダー構造をプラットフォームに分割するのが最適です。さまざまなプラットフォームでボタンを整理する例：

.99 Product

これは、BEM方法論を使用してプロジェクト全体を整理する場合の単なる例であることに注意してください。 BEMを正しく使用するには、BEM構造のファイルツリーは必須ではありません。プロジェクトの一部のセグメントでのみBEMを使用できます。これまで、すべての要素と修飾子にファイルが作成される、この厳密なBEMファイル構造構成を使用していません。代わりに、要素と修飾子の宣言があるブロックのファイル構造を作成しているだけです。

BEMプロジェクトのツリー編成

実際のBEM

これで命名規則に精通しているので、実際のBEM方法論を示します。このHTMLコードが実行されているとしましょう。

.btn__price {/* Styles */} .btn__text {/* Styles */} .btn--big {/* Styles */} .btn--primary-color {/* Styles */}

次のCSSマークアップが適用されている場合：

.person--male__hand--right {/* Styles */}

さて、誤解しないでください。これまでの例では、ほとんどの場合、ブロック、要素、修飾子がありましたが、必ずしもそうである必要はありません。

たとえば、次の名前のブロックがあるとします。 人 。人には足と手があり、女性でも男性でもかまいません。右手で男性を定義する場合は、次のようになります。

.person__hand {/* Styles */}

これで、BEMの本当の意味を見ることができます。修飾子が性別である人を定義しました。人が男性か女性かは関係ないので、手があり、手は要素です。また、各人は右手または左手を持つことができます。これも修飾子です。

別のケースでは、片手で一般人を定義したい場合は、次のようにします。

.person { &__hand {/* Styles */} &__leg {/* Styles */} &--male { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } &--female { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } }

お気づきのとおり、BEMに慣れれば、CSSとHTMLの構造を簡単に構築できます。

CSSプリプロセッサでのBEMの使用

個人的には、CSSプリプロセッサの1つを使用せずに新しいプロジェクトを開始することは想像できません。ご存知のように、プリプロセッサは素晴らしいものであり、多くの利点を提供してくれます。そして最も重要なことは、プリプロセッサがBEM方法論と完全に一致していることです。

関連： Sassを採用する：VanillaCSSの使用をやめるべき理由

次の例では、SASSと組み合わせたBEMの最も一般的な例を見ることができます。

.person__hand {/* Styles */} .person__leg {/* Styles */} .person--male {/* Styles */} .person--male__hand {/* Styles */} .person--male__hand--left {/* Styles */} .person--male__hand--right {/* Styles */} .person--male__leg {/* Styles */} .person--male__leg--left {/* Styles */} .person--male__leg--right {/* Styles */} .person--female {/* Styles */} .person--female__hand {/* Styles */} .person--female__hand--left {/* Styles */} .person--female__hand--right {/* Styles */} .person--female__leg {/* Styles */} .person--female__leg--left {/* Styles */} .person--female__leg--right {/* Styles */}

SASSコードは次のCSSにコンパイルされます。

/// Block Element /// @param {String} $element - Element's name @mixin element($element) { &__#{$element} { @content; } } /// Block Modifier /// @param {String} $modifier - Modifier's name @mixin modifier($modifier) { &--#{$modifier} { @content; } }

さらに詳しく知りたい場合は、BEM用の便利なSASSミックスインを使用できます。

.person { @include element('hand') {/* Person hand */} @include element('leg') {/* Person leg */} @include modifier('male') { /* Person male */ @include element('hand') { /* Person male hand */ @include modifier('left') { /* Person male left hand */ } @include modifier('right') { /* Person male right hand */ } } } }

そして、あなたはそれをこのように使うことができます：

.person__hand { /* Person hand */ } .person__leg { /* Person leg */ } .person--male { /* Person male */ } .person--male__hand { /* Person male hand */ } .person--male__hand--left { /* Person male left hand */ } .person--male__hand--right { /* Person male right hand */ }

これにより、次のCSS出力が生成されます。

$ git clone https://github.com/bem/project-stub.git

おそらくこれほど長いユースケースはないでしょうが、これはBEMがどのように使用されているか、そして小規模プロジェクトと大規模プロジェクトの両方でBEMが非常に強力である理由の良い例です。

BEMプロジェクトの開始

で説明されているように 公式BEMドキュメント 、新しいBEMプロジェクトを開始する最も簡単な方法は、既存のプロジェクトを使用することです。 GITリポジトリ 。 Gitcloneコマンドを使用するだけです。

$ npm install

次に、新しく作成されたディレクトリに移動し、すべての依存関係をインストールします。

$ node_modules/.bin/enb make

必要なすべての依存関係がインストールされます。

よく依存関係

を使用してプロジェクトをビルドする ENB ：

$ node_modules/.bin/enb server

開発用のサーバーモードを実行します。

Server started at 0.0.0.0:8080

その結果、次のメッセージが表示されます。

http://localhost:8080/desktop.bundles/index/index.html

これは、サーバーが稼働していることを意味します。これで、このアドレスで結果を確認できます。

bemjson

ご覧のとおり、project-stub/desktop.bundles/index/index.bemjson.js 内で定義されている要素がすでに作成されています。ここにあるファイル：

オリンピックシンボルは、のゲシュタルト原理の例です。
index.html

localhostで表示されるすべてのHTMLを生成しているファイルの現在の構造を確認および調査できますindex.bemjson.jsファイル。このファイルを変更して、前の章で説明した「Person」BEMプロジェクトを取得します。 module.exports = { block: 'page', title: 'Person BEM', favicon : '/favicon.ico', head : [ { elem : 'meta', attrs : { name : 'description', content : '' } }, { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } }, { elem : 'css', url : 'index.min.css' } ], scripts: [{ elem : 'js', url : 'index.min.js' }], content: [ { block: 'person', content: [ { elem: 'male', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Male person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Male person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Male person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Male person hand -- right' } ] }, { elem: 'female', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Female person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Female person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Female person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Female person hand -- right' } ] }, ] } ] }; からコード全体を削除（またはコメント）できますファイルを作成し、次のファイルに置き換えます。

Male person leg -- left Male person leg -- right Male person hand -- left Male person hand -- right Female person leg -- left Female person leg -- right Female person hand -- left Female person hand -- right

これで、次のHTMLが生成されます。

|_+_|

上記のコードからわかるように、このシナリオでは、BEMから提供されたデフォルト設定を使用しているため、デフォルトのBEMコーディングスキームが使用されました。新しいページやブロックの作成、BEM HTMLの変更など、探索して使用できるコマンドやオプションは他にもたくさんあります。私はこれに深く入り込むつもりはありません、そしてそれはすべてで見つけることができます 公式BEMドキュメント 。

BEMの利点と懸念

利点と懸念

利点

  • BEMはメンテナンスに優れています。大規模なプロジェクトで誰かを追いかけなければならなかったことが何回ありますか？そして、何か未知のものが崩壊することなく何かを変えることを恐れすぎていますか？ BEMを使用すると、要素の正確な目的と、要素がどのブロックに表示されるかがわかります。
  • クラス名は論理的で直感的であり、チームのすべてのメンバーはその要素がWebサイトで何をするかを知っています。 BEMは、プロジェクトのすべての人に、同じページにいるように共有できる宣言型構文を提供します。
  • BEMは、ネストされたCSSセレクターを排除します。すべてのHTML要素には独自のCSSクラスがあり、その名前から、その目的がわかります。 それらすべてを支配する1つのセレクター 。

懸念事項とよくある間違い

  • 入れ子に深く入りすぎないでください。主なルールは、親と子の2つ以上のレベルを使用しないことです。
  • ブロックスコープを開始する場所に注意してください。ここでよくある間違いは、開発者がブロックを使用している場合ですが、開発の後半の時点で、同じブロックにメインの親ブロックがあり、ネストによってルールが破られる可能性があることに気づいていません。
  • 避ける SASS @ extend。これについてハリー・ロバーツを引用するには：

Sassでクラスを「結び付け」ないことで、ビューでより多くの組み合わせを作成できます。 HTMLには、すべてのクラスがDOMの一部に作用しているのを見ることができるという点ではるかに優れた紙の証跡があります。新しいUIを作成するたびに、新しいプレースホルダークラス（またはそれらを組み合わせたマニフェストクラス）を作成する必要がないという点で、CSSははるかにスリムなままです。

結論

BEMコーディングスキームを初めて見たとき、最初に考えたのは次のとおりです。

これらのクラスは長すぎて読み書きできません。

でも試してみたら、使わずに新しいプロジェクトを始めるなんて想像もできません。私にとって、BEMはコードの保守性を大幅に改善しました。そして、BEMベースのプロジェクトに「投入」されるすべての開発者は、コード構造全体に非常に迅速に追いつくと確信できます。

これらすべてにもかかわらず、BEMについてソーシャルネットワークで多くの議論があります。 BEMは良くないという人もいます。デフォルトのHTMLネスト要素を使用するのではなく、なぜこのような長い名前のクラスを作成する必要があるのか​​疑問に思っています。そうですね、BEMが好きだと言う人は誰もいませんが、実際には、フロントエンド開発者の大多数がBEMを採用しており、非常に便利だと感じています。

関連： フリーランスのフロントエンド開発者の上位3％を雇います。

実際にバランスの取れたキャッシュフロー計算書モデルを作成する方法

財務プロセス

実際にバランスの取れたキャッシュフロー計算書モデルを作成する方法
Google BigQueryを使用する意味があるのはいつですか？

Google BigQueryを使用する意味があるのはいつですか？

データサイエンスとデータベース