BEM 命名方法、より適切な HTML_html/css_WEB-ITnose の記述

BEM はブロック、要素、修飾子です。

クラスの命名規則。この CSS 手法では、ブロックはボタン .btn { } などのコンポーネントの最上位の抽象化です。ここでのブロックは、親、子の項目、または要素と見なされ、ブロック内に配置でき、ブロック名の後に 2 つのアンダースコアを追加することで示されます。例: .btn__price { }

最後に、修飾子を使用できます。ブロックを操作することで、まったく関係のないモジュールに影響を与えることなく、特定のコンポーネントのスタイルを設定できるようになります。修飾子は、ブロック名の末尾に追加された 2 つのハイフン (ハイフン) で表されます (例: btn--orange)。 別の開発者がこのマークアップを作成し、CSS にあまり詳しくない場合でも、どのクラスが何を担当し、どのように相互依存しているかを区別する良い方法があります。その後、開発者は独自のコンポーネントを構築したり、既存のブロックを変更して必要なものを構築したりできます。開発者は、CSS をあまり書かなくても、これらのクラスをマークアップで使用することで、さまざまな組み合わせを簡単に作成できます。

なぜ BEM を考慮する必要があるのでしょうか?

コンポーネントの新しいスタイルを作成したい場合、どのモディファイアと子が既に存在するかをより簡単に見つけることができます。必要な修飾子がすでに存在している可能性があるため、CSS を追加する必要さえない場合があります。

CSS ではなくマークアップのみを読み取る場合、どの要素が他のものに依存しているかをすぐに取得することもできます (前の例では、たとえそれが分からなくても .btn__price が .btn に依存していることがわかります)

チームメンバー間のコミュニケーションが容易になるため、デザイナーと開発者はコンポーネントに一貫した名前を付けることができます。言い換えれば、BEM は各プロジェクト メンバーに構文の説明を提供し、誰もがそれをより簡単に理解し、互いに共有できるようにします。

したがって、開発者がより自信を持ってプロジェクトに取り組むことができれば、これらのビジュアル コンポーネントの使用方法について、より自信を持って賢明な決定を下せるようになります。これらの小さな問題 (病気) に対して、この方法論は完璧な解決策ではないかもしれませんが、将来的には開発者に、より優れた、より操作可能なコードを作成する方法の標準を提供する必要があります。

BEM のもう 1 つの優れた点は、

すべてがクラスであり、何もネストされていないことです。

これにより、CSS 機能が非常にフラットで単一になり、これは良いアイデアです。これは、この違いをめぐって最終的に自分自身と戦う必要がないことを意味します。

BEM に関連するいくつかの問題を見てみましょう。

BEM CSS の問題

もちろん、BEM のルールを破ったとしても、誰もあなたの腕をひねることはありません。次のような CSS セレクターを記述することもできます:

このコードは BEM の一部だけが実行されているように見えますが、BEM ではありません。セレクターがネストされており、修飾子は何が起こっているのかを正確に説明していません。これを行うと、BEM で非常に便利な平坦性機能が破壊されてしまいます。

ブロック (例: .nav) は、他のブロックや修飾子 (例: .btn?orange) のスタイルをオーバーライドしてはなりません。そうしないと、HTML のほぼ全体を読み取ることができ、コンポーネントが何をするのかが不明確になってしまいます。その過程で、コードベースに対する他の開発者の信頼を揺るがすことは避けられません。

以下のマークアップを見た場合、どう思いますか?

ここでの問題は、完全なブロック内の要素には開発者が必要とするコードが含まれているが、子要素には親のような .nav クラスが必要ないため、余分な問題が発生するということです 混乱し、一貫性のないコードベース。これは何としても避けるべきです。これは次の 2 つの問題に要約できます:

無関係なブロック内の修飾子を決して書き換えないでください。

不要な親要素が適切に存在できる場合は、それらを避けてください。

動作中の BEM のその他の例




アコーディオン デモ







この例には、ブロック、2 つの要素、および修飾子があります。 ここで、.accordion__copy?open 修飾子をすでに作成して、他のブロックや要素では使用できないことを知らせることができます。




ナビゲーション デモ




このナビゲーション デモには 1 つのブロック、6 つの要素、0 つの修飾子があり、修飾子なしで完全にブロックを作成できます。ブロックは変更されないため、将来のある時点で、開発者はいつでも新しいモディファイアに接続できます。







BEM の嫌いなところ

おそらく、二重アンダースコアや二重ダッシュが好きではないでしょう。問題ありません。他の特殊文字を使用しても構いません。




Sass と BEM

引き続きネストされた Sass の記述を楽しむことができますが、@at-root を使用してネストされていない CSS を取得することもできます。







まとめ

最後に、BEM がすべての問題を解決するわけではありませんが、チームの全員がすべきスケーラブルな構造を作成するのに依然として非常に役立つと言っても過言ではないと思います。コードの品質を向上させる方法について明確なアイデアがある場合、インターフェイスは維持されます。これは、大規模なフロントエンド開発では、短期的に優れたトリックを使用して小さな問題を解決するだけではなく、コードベースが時間の経過による変化に適応できるように、プロトコル、約束、開発者間のバインディング社会契約が必要であるためです。




原文: https://css-tricks.com/bem-101/

https://css-tricks.com/strategies-keeper-css-specity-low/










例:







著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。