CSS BEM モデル – スケーラブルで保守可能な CSS を作成するためのガイド-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-09-28 06:16:29

オリジナル

730 人が閲覧しました

CSS BEM Model – A Guide to Writing Scalable and Maintainable 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;
}

ログイン後にコピー

この例では: