CSS BEM モデル – スケーラブルで保守可能な CSS を作成するためのガイド

CSS BEM モデル – スケーラブルで保守可能な CSS 作成ガイド

この記事では、BEM (ブロック、要素、モディファイア) 手法について詳しく説明します。これは、大規模なプロジェクト向けにクリーンで構造化された保守可能な CSS を作成するのに役立つ人気のある CSS 命名規則です。 BEM は、プロジェクトが成長してもコードのスケーラビリティを維持し、スタイルの競合の可能性を減らします。

1. BEMとは何ですか?

BEM の略:

• ブロック: ボタン、メニュー、フォームなど、それ自体で意味を持つスタンドアロンのエンティティ。
• 要素: ボタンのラベルやメニュー項目など、特定の機能を実行するブロックの一部。
• 修飾子: ブロックまたは要素のバリエーションまたは状態 (無効なボタンや強調表示されたメニュー項目など)。

BEM 手法では、再利用可能、予測可能、保守可能な CSS コードの作成に重点が置かれています。

BEM 命名規則:

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

• ブロック: メインコンテナを表します。
• 要素: ブロック名の後に、二重アンダースコア (__) で区切って続きます。
• 修飾子: ブロック名または要素名の後に、二重ハイフン (--) で区切って続きます。

2.構造の定義

例を使って BEM の構造を詳しく見てみましょう。

例:

<div class="menu">
    <ul class="menu__list">
        <li class="menu__item menu__item--active">Home</li>
        <li class="menu__item">About</li>
        <li class="menu__item">Contact</li>
    </ul>
</div>

この例では:

• ブロック: .menu は、ナビゲーション メニューを表すメイン ブロックです。
• 要素: .menu__list と .menu__item はブロック内の要素です。
• 修飾子: .menu__item--active は、メニュー項目のアクティブ状態を示す修飾子です。

3. BEM のブロック

ブロックは、独立した再利用可能なコンポーネントです。これは、スタイルが他の要素の影響を受けることを気にせずに、コード内のどこにでも配置できる自己完結型のエンティティと考えてください。

例:

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

ここで、.button はボタン コンポーネントのスタイルを定義するブロックです。このブロックは Web サイトの複数の部分で再利用できます。

4. BEM の要素

要素は、独立した意味を持たないブロックの一部です。ブロックに関連付けられており、ブロックに関連する機能を実行するために存在します。

例:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

こちら:

• .button__icon は .button ブロック内の要素で、ボタン内のアイコンを表します。
• .button__label は、ボタンのテキスト ラベルを表す別の要素です。

5. BEM の修飾子

修飾子は、ブロックまたは要素のバリエーションを表します。モディファイアは、ボタンの色の変更や要素の拡大など、コンポーネントの外観や動作を変更するために使用されます。

例:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

こちら:

• .button--primary は、ボタンの背景色を変更する修飾子です。
• .button--large は、ボタンのサイズを大きくするもう 1 つの修飾子です。

修飾子は要素にも適用できます:

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. BEM を使用する利点

• スケーラビリティ: BEM はスケーラブルになるように設計されており、多くのコンポーネントを含む大規模なプロジェクトに最適です。
• 再利用性: ブロックは自己完結型であり、プロジェクトのさまざまな部分で再利用できます。
• 保守性: BEM は明確で一貫した命名を奨励し、プロジェクトの成長に合わせて CSS を保守しやすくします。
• 予測可能性: どの要素がどのブロックに属しているかを簡単に判断でき、修飾子に基づいてそれらのバリエーションを理解できます。

7. BEM の動作

ブロック、要素、修飾子を含むより完全な例を見てみましょう:

HTML:

<div class="card">
    <div class="card__header">
        <h2 class="card__title">Card Title</h2>
    </div>
    <div class="card__body">
        <p class="card__text">This is a simple card component.</p>
    </div>
    <div class="card__footer">
        <button class="button card__button card__button--primary">Read More</button>
    </div>
</div>

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

この例では:

• .card は、カード コンポーネント全体を表すブロックです。
• .card__header、.card__title、.card__body、および .card__footer は、カード ブロック内の要素です。
• .card__button--primary は、カード内のボタンにプライマリ スタイルを適用する修飾子です。

8. BEM で避けるべきよくある間違い

• ネストされた要素が多すぎます: クラス名が不必要に長くなる可能性があるため、深くネストされた要素は避けてください。
• 不要な修飾子: ブロックまたは要素の外観や状態を変更する必要がある場合にのみ修飾子を使用します。
• BEM と他の命名規則の組み合わせ: 一貫性を保つために、プロジェクト全体を通して BEM を使用してください。

結論

BEM 手法は、CSS を整理し、予測可能でスケーラブルに保つための強力な方法です。コンポーネントを ブロック、要素、修飾子に分割することで、よりクリーンなコードを維持し、スタイルの競合を回避し、プロジェクトの開発をより迅速かつ効率的に行うことができます。成長します。

---

LinkedIn でフォローしてください

リドイ・ハサン

以上がCSS BEM モデル – スケーラブルで保守可能な CSS を作成するためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。