CSS BEM 命名規則: CSS BEM 命名規則とは何か、なぜ重要なのか、そしてどのように使用するのか?

特に大規模なプロジェクトの場合、クリーンで整理された CSS を記述することが重要です。 CSS を構造化する最良の方法の 1 つは、BEM 命名規則を使用することです。この記事では、BEM とは何か、BEM が重要な理由、長所と短所を説明し、2 つの例を使用して BEM の使用方法を示します。

BEMとは何ですか?

BEM は、ブロック、要素、および モディファイアを表します。これは、コードの理解と保守を容易にする CSS クラス名を記述するための命名システムです。 BEM の主な目標は、開発者が再利用可能でモジュール式でスケーラブルな CSS を作成できるようにすることです。

1.ブロック: それ自体で意味をなすスタンドアロン コンポーネント (ボタンやフォームなど)。
2.要素: それ自体では意味を持たず、ブロックに依存するブロックの一部 (ボタン アイコンなど)。
3.修飾子: ブロックまたは要素の異なるバージョン (例: 異なる色のボタン)。

.block {}
.block__element {}
.block--modifier {}

BEM を使用する理由

BEM を使用すると、乱雑で混乱を招く CSS を避けることができます。それはいくつかの利点をもたらします:

• 一貫性: すべてのクラス名は同じパターンに従い、コードがより予測可能になり、理解しやすくなります。
• 再利用性: ブロックと要素はプロジェクトのさまざまな部分で再利用できます。
• 簡単なメンテナンス: 他の開発者がコードを簡単に読み取って変更できます。
• 競合の回避: BEM は、異なるコンポーネント間の CSS の競合を防ぐのに役立ちます。

BEM の使用方法: 例

例 1: 単純なボタン

基本的なボタン ブロックから始めて、BEM がどのように機能するかを見てみましょう。

HTML:

<button class="button button--primary">
  Submit
</button>

CSS:

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

.button--primary {
  background-color: blue;
}

説明:

• button はブロックであり、メインのボタン スタイルを表します。
• button--primary は修飾子であり、この特定のボタン バージョンに青色の背景を適用します。

例 2: カードコンポーネント

次に、タイトルと説明 (要素)、および小さいサイズのバージョン (修飾子) を含むカード ブロックを作成しましょう。

HTML:

<div class="card card--small">
  <h2 class="card__title">Title</h2>
  <p class="card__description">This is a description.</p>
</div>

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

説明:

• カードはカードコンポーネントを表すブロックです。
• Card__title と Card__description は要素であり、カードの特定の部分です。
• Card--small は修飾子であり、カードの小さいバージョンのパディングを減らします。

BEMの長所と短所

長所:

1. 整理と一貫性: CSS をクリーンで適切な構造に保つのに役立ちます。
2. CSS の競合を回避します: あるコンポーネントのスタイルが別のコンポーネントに影響を与えるリスクを軽減します。
3. 再利用性: ブロックと要素はプロジェクト内の複数の場所で使用できます。
4. メンテナンスが簡単: プロジェクトが成長しても、CSS の更新と管理が簡単になります。

短所:

1. 長いクラス名: BEM クラス名は非常に長い場合があるため、最初は圧倒されるように思えるかもしれません。
2. 学習曲線: 特に CSS を初めて使用する場合は、BEM 構造に慣れるまでに時間がかかります。

BEM が重要な理由

BEM は、クリーンでスケーラブルなコードを促進するため、人気のある CSS 手法です。大規模なプロジェクトでは、CSS の管理がすぐに困難になる可能性があります。 BEM では、各クラス名は一意でわかりやすいため、各クラスの目的が理解しやすくなります。また、スタイルの競合などの問題を防ぎ、開発者間のコラボレーションがよりスムーズになります。

一貫したモジュール形式の CSS 記述方法が必要な場合、BEM は優れた選択肢です。 習得には時間がかかるかもしれませんが、長期的には時間を節約し、CSS を作成することができます。メンテナンス性が向上します。

結論

BEM 命名規則は、CSS を整理してスケーラブルに保つための優れた方法です。これは競合を回避し、コードをより保守しやすくし、コンポーネントの再利用を促進します。長いクラス名と学習曲線のため、最初は難しそうに見えるかもしれませんが、利点は欠点をはるかに上回ります。よりクリーンな CSS を作成し、プロジェクトでのコラボレーションを改善したい場合は、BEM を試してみてください!

最新情報を入手するにはフォローしてください!

この記事が CSS BEM 命名規則を理解するのに役立つことを願っています。このような記事、ヒント、Web 開発に関する洞察などの最新情報を入手したい場合は、必ず私をフォローしてください。ご質問やご提案がございましたら、お気軽にお問い合わせください。ぜひご意見をお待ちしております!

以上がCSS BEM 命名規則: CSS BEM 命名規則とは何か、なぜ重要なのか、そしてどのように使用するのか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。