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

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

1. BEMとは何ですか?

BEM の略:

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

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

BEM 命名規則:

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

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

2.構造の定義

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

例：

    
Home
        
About
        
Contact
    

この例では:

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

3. BEM のブロック

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

例：

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

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

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:

    

        
Card Title
    
    

        
This is a simple card component.
    
    

        Read More
    

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 でフォローしてください

リドイ・ハサン