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

キーポイント

• BEM（Block-Element-Modifier）は、開(kāi)発者がWebサイトを再利用可能なコンポーネントブロックのコレクションと考えることを奨勵(lì)するCSS方法論です。特に大規(guī)模な開(kāi)発チームにとって、ウェブサイトのさまざまな部分間の関係を簡(jiǎn)単に理解できるようにする明確な命名システムを提供します。
対照的に、Atomic CSSは、各コンポーネントのルールセットを作成するのではなく、非常に微細(xì)に再利用可能なスタイルの作成に焦點(diǎn)を當(dāng)てています。特定の競(jìng)合を減らし、迅速なHTMLコンポーネント開(kāi)発を可能にします。ただし、小さなチームや個(gè)々の開(kāi)発者に適しています。
BEMと原子CSSを一緒に使用して、BEMの構(gòu)造とアトミックCSSの再利用性を組み合わせることができます。これにより、高度に組織化された簡(jiǎn)単なCSSコードベースを生成できます。
利點(diǎn)はありますが、開(kāi)発者がタグを完全に制御できない狀況（CMSを使用するなど）では、BEMと原子CSSの両方が有用ではない場(chǎng)合があります。この場(chǎng)合、開(kāi)発者は目標(biāo)を達(dá)成するために長(zhǎng)くて特定のセレクターを使用する必要がある場(chǎng)合があります。

block-element-modifier（bem）

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

ブロック

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

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

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

要素は、特定の関數(shù)を?qū)g行するブロックの一部です。要素はコンテキストに依存します。それらは、屬するブロックのコンテキストでのみ意味があります。

たとえば、

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

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

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

ブロック名はプロジェクトで一意でなければなりません
要素名はブロックで一意でなければなりません
• ブロックのバリエーション（たとえば、暗い背景のある検索ボックス）は、クラス名に修飾子を追加する必要があります
ブロック名と要素名は、通常、二重アンダースコア（.block__element）によって區(qū)切られます。ブロック名と要素名は、通常、修飾子名を持つ二重ハイフンで區(qū)切られます（たとえば、.block - modifierまたは.block__element - modifier）。これが検索フォームの使用例を使用しているように見(jiàn)えます。

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

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

<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>

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

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

<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>

新しいチームメンバーは、マークとCSSを簡(jiǎn)単に読み、その行動(dòng)を理解できます

.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;
}

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

cssはマークアップ

に依存しません
• cssは非常に再利用可能です
• この章では、Bemのコンテンツは複數(shù)のセクションです。 BEMのWebサイトでは、このアプローチについて詳しく説明し、開(kāi)始するためのツールとチュートリアルも提供しています。 BEMネーミングコンベンションの詳細(xì)については、もう1つの優(yōu)れたリソースがGet Bemです。

原子CSS

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

<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>

エラーメッセージボックスを作成するには、msgとmsg-errorの両方のクラス名を要素のクラス屬性に追加する必要があります。
それを原子システムと比較しましょう。各宣言は獨(dú)自のクラスになります：

<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>

これはより多くのCSSです。次に、エラーメッセージコンポーネントを再作成しましょう。アトミック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;
}

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

.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;
}

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

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

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

.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;
}

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

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

初期ルールセットが定義されたら、迅速なHTMLコンポーネント開(kāi)発を?qū)g行できます
• しかし、原子CSSには論爭(zhēng)がないわけではありません。
原子CSSに対する

議論

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

bemおよび原子CSS

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

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

CSSアーキテクチャに関するFAQ：BEMおよびAtomic CSS
BEMと原子CSSの主な違いは何ですか？
BEM（ブロック、要素、修飾子）と原子CSSは、両方ともCSSコードを整理および構(gòu)築するための方法論です。 BEMは、CSSが読みやすくなり、理解しやすくなる命名規(guī)則に焦點(diǎn)を當(dāng)てています。設(shè)計(jì)をブロック、要素、および修飾子に分割し、CSSとHTMLの間に明確で厳格な関係を作成します。一方、アトミックCSSは、視覚機(jī)能を反映する小さな単一目的のCSSクラスを作成することです。再利用性を促進(jìn)し、コードの量を減らすことを目指しています。
BEMはCSSのスケーラビリティをどのように改善しますか？
BEMは、CSSとHTMLの間に明確で厳格な関係を提供することにより、CSSのスケーラビリティを向上させます。特定の命名規(guī)則を使用して、異なる要素間の関係を理解し??やすくします。これにより、コードは、何も壊すことなく既存の機(jī)能を変更したり、既存の機(jī)能を変更しやすいため、コードを維持および拡張しやすくします。
BEMとアトミックCSSを同時(shí)に使用できますか？
はい、BEMと原子CSSを同時(shí)に使用できます。一部の開(kāi)発者は、これらの2つのアプローチを組み合わせることで、両方の世界で最高のものを達(dá)成できることを発見(jiàn)しました。 BEMの厳密な命名規(guī)則を使用してCSSを構(gòu)築できますが、原子CSSの単一目的クラスを使用して単一の要素をスタイリングできます。この組み合わせは、高度に組織化された、維持しやすいCSSコードベースを生成できます。
原子CSSを使用することの利點(diǎn)は何ですか？
原子CSSは多くの利點(diǎn)を提供します。再利用性を促進(jìn)し、書(shū)く必要があるCSSの量を大幅に削減できます。また、同じクラスが異なるコンポーネントに使用されるため、設(shè)計(jì)の一貫性も向上します。さらに、各クラスには単一の明確な目的があるため、アトミックCSSはスタイルシートを管理し、理解しやすくすることができます。
BEMはCSS特異性の問(wèn)題をどのように処理しますか？
BEMは、開(kāi)発者がIDセレクターの代わりにクラスセレクターを使用するように促すことにより、CSS特異性の問(wèn)題に対処するのに役立ちます。これにより、プロジェクト全體で特異性が一貫しているため、必要に応じてスタイルを簡(jiǎn)単にカバーできます。さらに、BEMの命名規(guī)則は、どの要素が関連しているかを明確に示しているため、予期しないスタイルの対立の可能性が減少します。
原子CSSは大規(guī)模なプロジェクトに適していますか？
はい、アトミックCSSは大規(guī)模なプロジェクトに適しています。再利用性と単一目的のクラスに焦點(diǎn)を當(dāng)てることは、プロジェクトが成長(zhǎng)し続けても、CSSを管理しやすく保つのに役立ちます。ただし、クラスが一貫して意味のあることを保証するためには、厳密なアプローチが必要です。
BEMはチームワークにどのように役立ちますか？
BEMの明確で厳格な命名條約により、チームメンバーがプロジェクトに參加するたびにCSSコードを理解しやすくなります。これにより、開(kāi)発者は他の人が書(shū)いたコードを簡(jiǎn)単に理解して変更できるため、コラボレーションが向上します。
原子CSSを使用する潛在的な欠點(diǎn)は何ですか？
原子CSSの潛在的な欠點(diǎn)は、HTMLの多くのクラスにつながる可能性があることです。これにより、HTMLが読み取りと理解を難しくする可能性があります。さらに、アトミックCSSは、クラスが一貫して意味のあることを保証するために厳密なアプローチを必要とします。

私のプロジェクトでBEMの実裝を開(kāi)始する方法は？

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

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

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

以上がCSSアーキテクチャ：Block-Element-Modifier（BEM）およびAtomic CSSの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。