CSS モジュールソリューション

CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると考えられます。ここでは、いくつかの主要なモジュール ソリューションについて簡単に紹介します。

オーケー

オブジェクト指向のルールには、構造と外観の分離と、コンテナーとコンテンツの分離という 2 つの主な原則があります。

用語集

• 構造と外観を分離する: 繰り返し可能なデザイン ユニットを追加し、次の CSS を使用する場合のオブジェクト パターンの命名やモジュール化のルールなど、この点に関する製品と UI の考え方を促進します。
• コンテナとコンテンツを分離する: これは、スタイルの使用が要素の位置に一意に一致しないことを意味します。このスタイルはどの位置でも使用できます。このスタイルを適用しない場合は、デフォルトのスタイルが保持されます。

例

// DOM 構造 <div class="toogle simple">
  <div class="toogle-control open">
    <div class="toogle-tittle">タイトル</div>
  </div>
  <div class="toogle-details"></div>
</div>

// モジュールの一意の識別子。toggle{
}
// スキンスタイルの書き方。基本構造が同じであれば、complex.toggle.simple{ の補助スタイルを使用できます。
}
// ネストされた記述を行うかどうか。多くのプリプロセッサ部分がネストをサポートし、多くの人がこのように記述すると思いますが、これは推奨されません。toogle{
 .トグルコントロール{
 }
 .toogle-details{
 }
}
// 実際、このように整理しますか? 推奨されません。クエリの効率が低下します。一意性を確認できる場合は、サブディレクトリを記述するだけで済みます。toogle{}
.トグルコントロール{}
.toogle-details{}

スマッシュ

SMA と OOCSS には多くの類似点がありますが、主にスタイルの分類において多くの違いがあります。これらは、基本、レイアウト、モジュール、状態、テーマです。

ベース

どこにでも適用可能、私はこれをグローバルスタイルとも呼んでいます

レイアウト

主に、さまざまな特性レイアウトを実現し、レイアウトの再利用率を向上させるために使用されます。

モジュール

再利用可能なユニットである設計のモジュール性は、通常、DOM + CSS の結合バインディングです。

州

特定の状態でのレイアウトやモジュールの特殊なパフォーマンスを記述します。ここでお勧めしたいのは「CSS Zen Garden」です。DOM構造が変更されていない場合は、CSSスキニングを通じてスタイルを変更できます。

テーマ

ステータスと比較すると、よりカスタマイズされています。重厚なデザインとパラメトリックなデザインのための一連の色、サイズ、インタラクションなどを含むいくつかの特別なモジュールのテーマを設定します。

場合

// DOM 構造 <div class="toogle toogle-simple">
  <div class="toogle-control is-active">
    <div class="toogle-tittle">タイトル</div>
  </div>
  <div class="toogle-details"></div>
</div>

oocss と比較すると、ほとんどの設計思想は同じで、クラスを CSS のスコープとして使用します (スコープとは、1. シナリオに合わない場合は使用を禁止する、2. シナリオに合う場合は正しく使用する必要がある、という 2 つの制限を意味します)。もう 1 つの違いは、スキンと状態の記述規則が異なることです。

ベム

bem は、ブロック、要素、修飾子を考慮してスタイルを記述することです。特定の CSS 構造は関係ありませんが、CSS に名前を付ける方法を提案するだけです。

場合

// DOM 構造 <div class="toogle toogle--simple">
  <div class="toogle_control toogle_control--active">
    <div class="toogle_tittle">タイトル</div>
  </div>
  <div class="toogle_details"></div>
</div>

説明する

• ブロックレベル: コンポーネントの名前
• 要素: コンポーネント内の要素の名前
• 修飾子: 要素の変更に関連するクラス

この命名方法の欠点は、スタイル名が非常に長くなることですが、実際には smacss と oocss ではある程度使用されています。命名は非常に意味的です。モジュールが明確でない場合は、スタイル名に基づいて対応する構造が何であるかを推測できます。

適切なソリューションを選択する

どのソリューションを選択する場合でも、重要なのはどれがチームに最も適しているかということです。現在のアプローチは、BEM と smacss を組み合わせたものです。

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