ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSアーキテクチャ：Block-Element-Modifier（BEM）およびAtomic CSS

CSSアーキテクチャ：Block-Element-Modifier（BEM）およびAtomic CSS

尊渡假赌尊渡假赌尊渡假赌オリジナル: 2025-02-10 10:55:15384ブラウズ

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

この記事は、ティファニーの新しい本「CSSマスター、第2版」から抜粋されています。 2つのCSSネーミング方法論を調べます。どちらの方法も、大規模なウェブサイトと大規模なチームの開発プロセスを改善するために作成されました。どちらかを選択するか、自分に応じて混ぜることができます。それらを紹介する目的は、あなた自身のCSSを書く方法について考えるのを助けることです。

キーポイント

BEM（Block-Element-Modifier）は、開発者がWebサイトを再利用可能なコンポーネントブロックのコレクションと考えることを奨励するCSS方法論です。特に大規模な開発チームにとって、ウェブサイトのさまざまな部分間の関係を簡単に理解できるようにする明確な命名システムを提供します。

block-element-modifier（bem）

BEM、またはBlock-Element-Modifierは、方法論、ネーミングシステム、および関連するツールのセットです。 BEMはYandexで生まれ、大規模な開発チームによって迅速に開発されることを目指しています。このセクションでは、概念と命名システムに焦点を当てます。 BEM Methodologyは、デザイナーと開発者がWebサイトを再利用可能なコンポーネントのコレクションと考えることを奨励しています

ブロック

。次の図に示すように、ブロックはタイトル、フッター、サイドバーなどのドキュメントの一部です。おそらく混乱して、ここの「ブロック」とは、ページまたはアプリケーションを構成するHTMLスニペットを指します。

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

ブロックには他のブロックを含めることができます。たとえば、タイトルブロックには、以下に示すように、ロゴ、ナビゲーション、および検索フォームブロックも含まれている場合があります。フッターブロックには、サイトマップタイルが含まれている場合があります。

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

要素はブロックよりも細かいです。 BEMのドキュメントが説明するように：

要素は、特定の関数を実行するブロックの一部です。要素はコンテキストに依存します。それらは、属するブロックのコンテキストでのみ意味があります。

たとえば、

検索フォームには、下の図に示すように、テキスト入力要素とボタン要素を送信します。（明確にするために、HTML要素の意味での「要素」ではなく、設計要素の意味で「要素」を使用しています。）

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

一方、メインコンテンツブロックには、記事リストブロックがある場合があります。この投稿リストブロックには、一連のポストプロモーションブロックが含まれる場合があります。各記事プロモーションブロックには、以下に示すように、画像、抜粋、および「詳細」要素が含まれる場合があります。

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

ブロックと要素が一緒になって、BEMネーミング条約の基礎を形成します。 BEMルールによると：

ブロックのバリエーション（たとえば、暗い背景のある検索ボックス）は、クラス名に修飾子を追加する必要があります

暗い背景を持つこのフォームのバリエーションは、次のタグを使用する場合があります。

私たちのCSSは次のようになるかもしれません：

<code class="language-html"><div class="search">
  <label for="s" class="search__label">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit">Search</button>
</div></code>

タグとcssでは、検索（逆およびsearch__label）が

に添付されているクラス名です。それらは、検索と検索__Labelの代替品ではありません。クラス名は、BEMシステムで使用される唯一のセレクタータイプです。サブセレクターと子孫を使用できますが、子孫もクラス名でなければなりません。要素とIDセレクターは禁止されています。ブロック名と要素名の独自性を実施することは、競合の命名を防ぎ、チームの問題になる可能性があります。この方法にはいくつかの利点があります：

<code class="language-html"><div class="search search--inverse">
  <label for="s" class="search__label search__label--inverse">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit search__submit--inverse">Search</button>
</div></code>

新しいチームメンバーは、マークとCSSを簡単に読み、その行動を理解できます

<code class="language-css">.search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}</code>

開発者を増やすと、チームの生産性が向上する可能性があります 一貫した命名は、クラス名の競合と副作用の可能性を減らします

cssはマークアップ

cssは非常に再利用可能です
この章では、Bemのコンテンツは複数のセクションです。 BEMのWebサイトでは、このアプローチについて詳しく説明し、開始するためのツールとチュートリアルも提供しています。 BEMネーミングコンベンションの詳細については、もう1つの優れたリソースがGet Bemです。

原子CSS

BEMが業界の最愛の人である場合、Atomic CSSはその反逆者です。 YahooのThierry Kobleentzは、クラス名のコンパクトライブラリを使用する2013年の記事「挑戦的なCSSベストプラクティス」でAtomic CSSという名前を付けて説明しました。これらのクラス名は通常省略されており、影響が影響を受けていません。 Atomic CSSシステムでは、クラス名が何をするかを知ることができますが、クラス名（少なくとも、スタイルシートで使用されるクラス名）とコンテンツタイプの間に関係はありません。例を使用して説明しましょう。これは、従来のCSSアーキテクチャと呼ばれるもので呼び出す可能性のある一連のルールです。これらのルールセットは、アプリケーションのコンテンツ（グローバルメッセージボックス、および成功、警告、エラーメッセージボックスのスタイル）を説明するクラス名を使用します。

<code class="language-html"><div class="search">
  <label for="s" class="search__label">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit">Search</button>
</div></code>

エラーメッセージボックスを作成するには、msgとmsg-errorの両方のクラス名を要素のクラス属性に追加する必要があります。

それを原子システムと比較しましょう。各宣言は独自のクラスになります：

<code class="language-html"><div class="search search--inverse">
  <label for="s" class="search__label search__label--inverse">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit search__submit--inverse">Search</button>
</div></code>

これはより多くのCSSです。次に、エラーメッセージコンポーネントを再作成しましょう。アトミックCSSを使用して、タグは次のようになります

<code class="language-css">.search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}</code>

マークも長くなっています。しかし、警告メッセージコンポーネントを作成するとどうなりますか？

<code class="language-css">.msg {
    background-color: #a6d5fa;
    border: 2px solid #2196f3;
    border-radius: 10px;
    font-family: sans-serif;
    padding: 10px;
}
.msg-success {
    background-color: #aedbaf;
    border: 2px solid #4caf50;
}
.msg-warning {
    background-color: #ffe8a5;
    border-color:  #ffc107;
}
.msg-error {
    background-color: #faaaa4;
    border-color: #f44336;
}</code>

2つのクラス名が変更されました。BG-DとBC-DはBG-CとBC-Cに置き換えられます。 5つのルールセットを再利用しました。それでは、ボタンを作成しましょう：

<code class="language-html"><p class="msg msg-error">An error occurred.</p></code>

ねえ！ここでは、4つのルールセットを再利用し、スタイルシートにルールを追加することを避けます。強力なアトミックCSSアーキテクチャでは、新しいHTMLコンポーネント（ポストサイドバーなど）を追加するには、CSSを追加する必要はありません（実際には、追加する必要がある場合があります）。 Atomic CSSは、CSSでユーティリティクラスを使用することに少し似ていますが、限界に達します。具体的には、それ：

<code class="language-css">.bg-a {
    background-color: #a6d5fa;
}
.bg-b {
    background-color: #aedbaf;
}
.bg-c {
    background-color: #ffe8a5;
}
.bg-d {
    background-color: #faaaa4;
}
.bc-a{
    border-color: #2196f3;
}
.bc-b {
    border-color: #4caf50;
}
.bc-c {
    border-color:  #ffc107;
}
.bc-d {
    border-color:  #f44336;
}
.br-1x {
    border-radius: 10px;
}
.bw-2x {
    border-width: 2px;
}
.bss {
    border-style: solid;
}
.sans {
    font-style: sans-serif;
}
.p-1x {
    padding: 10px;
}</code>

各コンポーネントのルールセットを作成する代わりに、非常に微細に再利用可能なスタイルを作成することにより、CSSを簡潔に保ちます

低い特定のセレクターシステムを使用して、特定の競合を大幅に削減する

しかし、原子CSSには論争がないわけではありません。

議論

原子CSSは、CSSの執筆について学んだほとんどすべてのことに反して実行されます。貼り付けスタイルの属性と同じくらい悪い感じがします。実際、原子CSS方法論の主な批判の1つは、コンテンツとプレゼンテーションの境界線を曖昧にすることです。要素を左に浮かんで10ピクセルのマージンを追加する場合、要素を左に浮かせたくないときはどうすればよいですか？もちろん、1つの答えは、私たちの要素からFLクラスを削除することです。しかし、今ではHTMLを変更しています。 CSSを使用する全体の理由は、デモンストレーションの影響を受けないようにすることであり、その逆です。（StyleSheetから.fl {float：left;}ルールを削除することでこれを解決することもできますが、これはクラス名FLのすべての要素に影響しますが、HTMLの更新は、少額の価格が支払った少額のために、 CSS。 Kobleentzの元の記事では、.M-10（マージン：10px）や.p-10（パディング：10px）などのクラス名を使用しました。この命名条約の問題は明らかなはずです。 5ピクセルまたは20ピクセルのマージンに変更すると、CSS およびHTMLを更新する必要があります。そうしないと、クラス名がその効果を正確に説明しないようにする可能性があります。このセクションで説明されているように、P-1Xなどのクラス名を使用すると、この問題を解決します。クラス名の1倍の部分は、ピクセルの定義された数ではなく、比率を表します。ベースパディングが5ピクセル（つまり、.p-1x {padding：5px;}）の場合、.p-2xは10ピクセルのパディングを設定します。はい、これはクラス名で行われた作業を完全には説明していませんが、HTMLを更新せずにCSSを変更し、誤解を招くクラス名を作成しないことも意味します。アトミックCSSアーキテクチャは、タグのコンテンツを記述するクラス名を使用することを妨げません。まだコードに.button-closeまたは.accordion-triggerを追加できます。 JavaScriptおよびDOM操作の場合、このようなクラス名が実際に望ましいです。

bemおよび原子CSS

BEMは、CSSとHTMLモジュールを並行して構築する多数の開発者がいる場合に最適に機能します。大規模なチームによって作成されたバグやバグを防ぐのに役立ちます。命名規則が説明的で予測可能であるため、それはよく拡大します。 BEMは大規模なチームに適しているだけでなく、大規模なチームに最適です。 Atomic CSSは、CSSルールのセットを開発するための小さなチームまたはエンジニアが存在し、より大きなチームが完全なHTMLコンポーネントを構築すると、より適切に動作します。 Atomic CSSを使用すると、開発者はスタイルガイド（CSSソースコード）を単純に調べて、特定のモジュールで必要なクラス名のセットを決定できます。いつ自分の道を行くかを学びます

実際には、CSSには複数の方法の混合物が含まれている場合があります。レイアウトに影響を与えるユーティリティクラス名に加えて、コンテンツまたはコンポーネントを説明するクラス名がある場合があります。タグを完全に制御できない場合（たとえば、CMSを使用する）、これらのメソッドはどちらも役立ちません。必要なものを実現するために、長くて特定のセレクターを使用する必要さえあるかもしれません。

私のプロジェクトでBEMの実装を開始する方法は？

BEMの実装を開始するには、デザインをブロック、要素、および修飾子に分割する必要があります。次に、BEMの命名規則を使用して、CSSクラスに名前を付けます。これにより、CSSとHTMLの間に明確な関係が生じ、コードが読みやすくなり、メンテナンスが容易になります。

SASS以下のようなCSSプリプロセッサを使用してBEMまたはAtomic CSSを使用できますか？

はい、BEMと原子CSSの両方を、SASS以下などのCSSプレセッサーで使用できます。これらの前処理者は、CSSの管理を容易にすることができ、BEMと原子CSSの組織原則によく適合します。

以上がCSSアーキテクチャ：Block-Element-Modifier（BEM）およびAtomic CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript 架构 css less html sass Float Error 预处理器 class dom 选择器样式表 margin padding bug cms

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：レスポンシブなWebデザインのクロスブラウザー互換性をテストする方法次の記事：レスポンシブなWebデザインのクロスブラウザー互換性をテストする方法

続きを見る