CSS 手法を使用してモジュール性を実現する例

1. CSS 方法論とは何ですか?

CSS methodologiesデザイン パターンまたは CSS 仕様として理解できます。市場での使用状況は次のとおりです。

上記画像の出典: https://2019.stateofcss.com/technologies/

日常の開発では、CSS 方法論に注意を払って理解する時間がないかもしれませんが、経験を積むにつれて、自分で考えたり、他の人のコードを読んだり、インターネット上の成熟したフレームワークを参照したりするようになります。これらのフレームワークには、CSS 方法論の優れた点が多少は含まれています。次の主流の CSS 方法論は、コンテンツを要約して整理するのに役立ちます。

2. 一般的な CSS 手法

1. オーケー

面向對象的CSS略してOOCSS ) は、Yahoo での作業に基づいて Nicole Sullivan によって 2008 年に提案されました。

（１）ルール

1. IDではなくクラスを使用する

クラスを直接使用してスタイルを設定します。これにより、セマンティクスが向上するだけでなく、CSS の HTML への依存も軽減されます。

2. 構造とスタイルの分離

初期の HTML と CSS では構造とスタイルの分離が実現されていましたが、CSS にはまだ 2 種類のスタイルが存在します。

• 構造スタイル（長さ、幅、距離など）
• 肌のスタイル（色、陰影など）

そのため、OOCSS ではこれら 2 つのスタイルを分離することを推奨しています。

たとえば、白/緑/赤の 3 つのボタンは次のように定義できます。

クラス="btn btn-default"

クラス="btn btn-green"

クラス="btn btn-red"

紫色のボタンがたくさんある場合は、別の紫色のボタン クラスを作成できます。これにより、CSS コードの量を大幅に削減できます。

3. 容器と内容物の分離

コンテンツは特定のコンテナに限定されるべきではなく、再利用のために解放されるべきです。

# 間違った書き方.header.action {
}
.header .action .login {
}
.header .action .register {
}

# .header{ の正しい書き方
}
。アクション{
}
。ログイン {
}
。登録する {
}

継承されたセレクターは、同じ名前によって発生するスタイルの競合 (複数の人がプロジェクトで共同作業している場合によく発生します) を軽減できるため便利です。ただし、使いすぎはよくありません。

（２）メリットとデメリット

利点：

• モジュール式で再利用可能
• コードの重複を減らす
• スケーラビリティ、保守性、可読性の向上

欠点:

• 深くネストされたセレクタの数は減りますが、クラスが追加されます
• 小規模なプロジェクトなど、コード内に繰り返される視覚パターンがあまりない場合は、OOCSS を適用することは実用的ではない可能性があります。

（３）例

Bootstrap は OOCSS を使用します。

例えば：

html

 <div クラス = 'ヘッダー'>
        <ul class='メニュー'> 
            <li class='メニュー項目アクティブ'>1</li>
            <li class='menu-item'>2</li>
            <li class='menu-item'>3</li>
        </ul>
        <div class="アクション">
            <button class="btn btn-login">ログイン</button>
            <button class="btn btn-register">登録</button>
        </div>
    </div>

CS: ...

.ヘッダー{
}
.メニュー{
}
.メニュー項目{
}
.item.active {
}
。アクション {
}
.btn{
}
.btnログイン{
}
.btn-レジスタ{
}

2. 境界要素法

BEM - ブロック要素モディファイア。 2009年生まれ。

（１）内容

BEM は次の 3 つの部分で構成されます。

• Block - ヘッダーなどのブロック
• Element - ブロックメニューの下の項目などの子要素
• Modfier - .current、.active などの状態

（２）ルール

1. 命名規則

• - : ブロックまたはサブ要素内の複数の単語間の接続を示すハイフンとしてのみ使用されます。
• __アンダースコア: ブロックとそのサブ要素を接続するために使用されます。
• --ハイフン: ブロックの状態またはブロックのサブ要素を説明するために使用されます。

一部の企業 (Tencent など) の標準では、二重ハイフンは単一のアンダースコア ( _ ) に置き換えられます。

例: .block-name__element--modifier

デモHTML:

    <div クラス = 'ヘッダー'>
        <ul class='header__menu'> 
            <li class='header__menu-item--active'>1</li>
            <li class='header__menu-item'>2</li>
            <li class='header__menu-item'>3</li>
        </ul>
        <div class="header__action">
            <button class="header__btn--login">ログイン</button>
            <button class="header__btn--register">登録</button>
        </div>
    </div>

デモなし:

.ヘッダー{
    &__メニュー{}
    &__メニュー項目 {}
    ＆__アクション {}
    &__ボタン{  
        ＆ - ログイン {}
        ＆ - 登録する {}
    }    
}

2. ネストを避ける

BEM には最大で B+E+M の 3 つのレベルがあります。

したがって、 .block__el1__el2の形式を避け、直接.block_el2に変更してください。

ここのブロックは名前空間に非常に似ています。

（３）メリットとデメリット

利点：

• 階層関係が一目でわかり、読みやすい
• 制約の範囲を制限するために階層セレクターに依存する必要がないため、コンポーネント間のスタイルの汚染を回避できます。

欠点:

• 命名方法は長くて見苦しく、書きにくいです (less/sass を使用すると書き方が簡単になります)
• より小さなコンポーネントでは、BEM 形式は役に立たないように見えるかもしれません。ただし、パブリックのグローバル モジュール スタイル定義の場合は、BEM 形式を使用することをお勧めします。 （特に公開されているパブリックコンポーネント）

他の：

BEM 命名ではクラス名が長くなりますが、gzip 圧縮後は帯域幅のオーバーヘッドは無視できます。

BEM ではタグ セレクターの使用は許可されません。最も単純な li でも .menu-item として記述する必要があります。

（４）実践

Ele.me のフレームワーク elementUI は BEM の一種です。また、company.yandex.ru/ の Web サイトでも調べることができます。

3. スマック

SMACSS (Scalable & Modular Architecture CSS、CSS のスケーラビリティとモジュール アーキテクチャを意味します)。 Jonathan Snook は 2011 年に Yahoo で勤務し、Yahoo Mail の CSS を書いていたときにこれを思いつきました。

（１）ルール

1. CSSルールの分類

CSS は 5 つのカテゴリに分類されます。

Base基本仕様

たとえば、CSS Reset や CSS Normalize などです。

Layoutレイアウト仕様

たとえば、左列と右列、グリッド システムなどです。

Module

たとえば、製品リスト、ナビゲーション バーなどです。再利用可能。

State仕様

たとえば、選択された状態。

Themeスタイルの仕様

2. 命名規則

クラス名に前綴を追加します。

Base にはプレフィックスは必要ありません。クラスや ID の代わりにタグを使用します。

• l-レイアウトの接頭辞として使用されます: l-inline
• m- 、Module: m-calloutのプレフィックスとして使用されます。ただし、接頭辞を使用する必要はありません。
• is-状態の接頭辞として使用されます: is-collapsed
• テーマは通常、以前存在していたクラス名を使用して新しい theme.css を作成します。別のクラス名を使用する場合は、 theme-プレフィックスを使用できます。

例：

<div class="l-box m-profile m-profile--is-pro-user">
  <img class="m-avatar m-profile__image" />
  <p class="m-profile__bio">...</p>
</div>

（２）例

オンラインデモ: https://codepen.io/savemuse/pen/gWVpvd

4. アトミックCSS

Atomic CSSも Yahoo によって提案されており、文字通り原子CSSとして理解できます。

（１）例

<div className="P(10px) M(20%) 位置(f) 開始(50%) Bgc(#fff)" />

上記の HTML 内のクラス名を通常の CSS に解析するのに役立つ特別な Atomic CSS ツールがあります。 （わずかに）

（２）メリットとデメリット

利点: CSS スタイルをコンポーネントに最小限に抑え、再利用性を最大限に高めます。

デメリット: 基本的にはインライン形式で記述しますが、クラス名を使用して表現します。

（３）まとめ

このアプローチは本当に過激です。今のところは受け入れられません。

結論

過激な Atomic はさておき、残りの OOCSS/BEM/SMACSS については次の提案があります。

それぞれの考え方は補完的かつ対立しており、実際の開発ではトレードオフ的に使用されることもあります。

これらはすべて、CSSプリプロセッサ（less/sassなど）と組み合わせて効率を高めることができます。

上記で紹介した利点を比較してまとめると、それらが解決する中心的な問題はモジュール性であることがわかります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。