CSS BEM 模型 – 编写可扩展和可维护的 CSS 指南-css教程-PHP中文网

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;
}

登录后复制

この例では: