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

BEMとは何ですか?

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

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

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

BEM を使用する理由

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

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

BEM の使用方法: 例

例 1: 単純なボタン

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

HTML:

  Submit

CSS:

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

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

説明：

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

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

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

HTML:

  
Title
  
This is a description.

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 開発に関する洞察などの最新情報を入手したい場合は、必ず私をフォローしてください。ご質問やご提案がございましたら、お気軽にお問い合わせください。ぜひご意見をお待ちしております!