この記事は、ティファニーの新しい本「CSSマスター、第2版」から抜粋されています。 2つのCSSネーミング方法論を調べます。どちらの方法も、大規模なウェブサイトと大規模なチームの開発プロセスを改善するために作成されました。どちらかを選択するか、自分に応じて混ぜることができます。それらを紹介する目的は、あなた自身のCSSを書く方法について考えるのを助けることです。
キーポイント
ブロック
。次の図に示すように、ブロックはタイトル、フッター、サイドバーなどのドキュメントの一部です。おそらく混乱して、ここの「ブロック」とは、ページまたはアプリケーションを構成するHTMLスニペットを指します。
ブロックには他のブロックを含めることができます。たとえば、タイトルブロックには、以下に示すように、ロゴ、ナビゲーション、および検索フォームブロックも含まれている場合があります。フッターブロックには、サイトマップタイルが含まれている場合があります。
要素はブロックよりも細かいです。 BEMのドキュメントが説明するように：
たとえば、要素は、特定の関数を実行するブロックの一部です。要素はコンテキストに依存します。それらは、属するブロックのコンテキストでのみ意味があります。
検索フォームには、下の図に示すように、テキスト入力要素とボタン要素を送信します。 （明確にするために、HTML要素の意味での「要素」ではなく、設計要素の意味で「要素」を使用しています。）
私たちの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セレクターは禁止されています。ブロック名と要素名の独自性を実施することは、競合の命名を防ぎ、チームの問題になる可能性があります。この方法にはいくつかの利点があります：<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を簡単に読み、その行動を理解できます
.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;
}開発者を増やすと、チームの生産性が向上する可能性があります 一貫した命名は、クラス名の競合と副作用の可能性を減らします
cssはマークアップBEMが業界の最愛の人である場合、Atomic CSSはその反逆者です。 YahooのThierry Kobleentzは、クラス名のコンパクトライブラリを使用する2013年の記事「挑戦的なCSSベストプラクティス」でAtomic CSSという名前を付けて説明しました。これらのクラス名は通常省略されており、影響が影響を受けていません。 Atomic CSSシステムでは、クラス名が何をするかを知ることができますが、クラス名（少なくとも、スタイルシートで使用されるクラス名）とコンテンツタイプの間に関係はありません。例を使用して説明しましょう。これは、従来の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>
それを原子システムと比較しましょう。各宣言は独自のクラスになります：
<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;
}マークも長くなっています。しかし、警告メッセージコンポーネントを作成するとどうなりますか？
.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つのルールセットを再利用し、スタイルシートにルールを追加することを避けます。強力なアトミックCSSアーキテクチャでは、新しいHTMLコンポーネント（ポストサイドバーなど）を追加するには、CSSを追加する必要はありません（実際には、追加する必要がある場合があります）。 Atomic CSSは、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;
}低い特定のセレクターシステムを使用して、特定の競合を大幅に削減する
原子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とHTMLモジュールを並行して構築する多数の開発者がいる場合に最適に機能します。大規模なチームによって作成されたバグやバグを防ぐのに役立ちます。命名規則が説明的で予測可能であるため、それはよく拡大します。 BEMは大規模なチームに適しているだけでなく、大規模なチームに最適です。 Atomic CSSは、CSSルールのセットを開発するための小さなチームまたはエンジニアが存在し、より大きなチームが完全なHTMLコンポーネントを構築すると、より適切に動作します。 Atomic CSSを使用すると、開発者はスタイルガイド（CSSソースコード）を単純に調べて、特定のモジュールで必要なクラス名のセットを決定できます。 いつ自分の道を行くかを学びます
BEMはCSSのスケーラビリティをどのように改善しますか？
BEMとアトミックCSSを同時に使用できますか？
原子CSSを使用することの利点は何ですか？
BEMはCSS特異性の問題をどのように処理しますか？
原子CSSは大規模なプロジェクトに適していますか？
BEMはチームワークにどのように役立ちますか？
原子CSSを使用する潜在的な欠点は何ですか？
BEMの実装を開始するには、デザインをブロック、要素、および修飾子に分割する必要があります。次に、BEMの命名規則を使用して、CSSクラスに名前を付けます。これにより、CSSとHTMLの間に明確な関係が生じ、コードが読みやすくなり、メンテナンスが容易になります。
はい、BEMと原子CSSの両方を、SASS以下などのCSSプレセッサーで使用できます。これらの前処理者は、CSSの管理を容易にすることができ、BEMと原子CSSの組織原則によく適合します。
以上がCSSアーキテクチャ：Block-Element-Modifier（BEM）およびAtomic CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
