BEMおよびユーティリティクラスを使用してスケーラブルなCSSアーキテクチャを構築する

大規模なCSSプロジェクトの管理には、大きな課題があります。時間が経つにつれて、大規模なCSS開発を合理化するために、さまざまなアプローチが登場しました。共通の目標は、効率（設計時間の最小化、コーディング時間の最大化）、一貫性（チーム全体で均一なコーディングプラクティスの確保）のままです。

1年半以上、私は220のコンポーネントを誇るコンポーネントライブラリとフロントエンドフレームワークであるCodyframeに貢献しました。これらは孤立したモジュールではありません。それらは再利用可能なパターンであり、多くの場合、複雑なレイアウトを構築するために統合されています。このプロジェクトの複雑さは、グローバルなCSS、BEM、およびユーティリティクラスを組み合わせたスケーラブルなCSSアーキテクチャを必要としました。

このアプローチを探りましょう。

CSSグローバル：簡単な概要

グローバルCSSファイルすべてのコンポーネント（たとえば、間隔、タイポグラフィ、色）に適用されるハウスルール。トークンは設計の一貫性を維持し、コンポーネントCSSサイズを削減します。

これがタイポグラフィのグローバル例です。

 /*タイポグラフィ|グローバル */
：根 {
  / *ボディフォントサイズ */
   - テキストベースサイズ：1EM;

  / *タイプスケール */
   - テキストスケールレイティオ：1.2;
  -TEXT-XS：calc（（ -  text-base-size / var（ -  text-scale-ratio）） / var（ -  text-scale-ratio））;
  -TEXT-SM：calc（var（ -  text-xs） * var（ -  text-scale-ratio））;
  -text-md：calc（var（ -  text-sm） * var（ -  text-scale-ratio） * var（ -  text-scale-ratio））;
   - テキストlg：calc（var（ -  text-md） * var（ -  text-scale-ratio））;
  -TEXT-XL：calc（var（ -  text-lg） * var（ -  text-scale-ratio））;
  -text-xxl：calc（var（ -  text-xl） * var（ -  text-scale-ratio））;
}

@media（min-width：64rem）{ / *すべてのテキスト要素に適用されるレスポンシブ決定 * /
  ：根 {
     - テキストベースサイズ：1.25em;
     - テキストスケールレイティオ：1.25;
  }
}

h1、.text-xxl {font-size：var（ -  text-xxl、2.074em）; }
h2、.text-xl {font-size：var（ -  text-xl、1.728em）; }
h3、.text-lg {font-size：var（ -  text-lg、1.44em）; }
h4、.text-md {font-size：var（ -  text-md、1.2em）; }
.text-base {font-size：var（ -  text-base-size）; }
small、.text-sm {font-size：var（ -  text-sm、0.833em）; }
.text-xs {font-size：var（ -  text-xs、0.694em）; }

BEM：簡潔な説明

BEM（ブロック、要素、修飾子）は、再利用可能なコンポーネントの命名規則です。

例：

<a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe"></a>
<nav>
  <ul>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">ホームページ</a></li>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">について</a></li>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">接触</a></li>
  </ul>
</nav>

• ブロック：再利用可能なコンポーネント。
• 要素：ブロックの子（例： .block__element ）。
• 修飾子：ブロック/要素のバリエーション（例： .block--modifier 、 .block__element--modifier ）。

ユーティリティクラス：必需品

ユーティリティクラスは単一関数を実行します。例えば：

 .padding-sm {padding：0.75em; }
.padding-md {padding：1.25em; }
.padding-lg {padding：2em; }

コンポーネント全体は、ユーティリティクラスを使用して構築できます。

<h1 id="タイトル">タイトル</h1>
<p>ロレム・イプスム...</p>

ユーティリティクラスは、グローバルCSS変数を活用できます。

 /*間隔|グローバル */
：根 {
   - スペースユニット：1EM;
  -Space-XS：calc（0.5 * var（ -  space-unit））;
   - スペース-SM：calc（0.75 * var（ -  space-unit））;
   - スペース-MD：calc（1.25 * var（ -  space-unit））;
   - スペースlg：calc（2 * var（ -  space-unit））;
  -Space-XL：calc（3.25 * var（ -  space-unit））;
}

/ *すべての間隔変数に影響を与えるレスポンシブルール */
@media（min-width：64rem）{
  ：根 {
     - スペースユニット：1.25em; / *この応答性のある決定は、すべてのマージンとパディングに影響します */
  }
}

/ *マージンとパディングユーティルクラス - 間隔変数を適用します */
.margin-xs {margin：var（ -  space-xs）; }
.margin-sm {margin：var（ -  space-sm）; }
.margin-md {mign：var（ -  space-md）; }
.margin-lg {margin：var（ -  space-lg）; }
.margin-xl {margin：var（ -  space-xl）; }

.padding-xs {padding：var（ -  space-xs）; }
.padding-sm {padding：var（ -  space-sm）; }
.padding-md {padding：var（ -  space-md）; }
.padding-lg {padding：var（ -  space-lg）; }
.padding-xl {padding：var（ -  space-xl）; }

実用的な例：カードギャラリー

最初にBEMのみを使用してカードギャラリーを作成し、次にGlobalsとユーティリティクラスを組み込んで利点を強調します。最終結果は、この結合されたアプローチの力を示します。

（記事の残りの部分は、BEMのみ、BEM Globals、およびBEM Globalsユーティリティクラスのアプローチを比較し、ファイル構造の推奨事項で締めくくり、詳細な例を継続しています。）

以上がBEMおよびユーティリティクラスを使用してスケーラブルなCSSアーキテクチャを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。