theme-shopify-css-guidelines

Shopify CSS ガイドライン

Shopify テーマ開発における CSS の命名規則、ネストのルール、カプセル化の実践方法です。

使用する場面

• Shopify テーマのセクション用 CSS を記述するとき
• CSS クラスに名前を付けるとき
• CSS のネストを使用するタイミングを決めるとき
• セクションのスタイルをカプセル化するとき

CSS の命名規則 - BEM 手法

セクション内の構造には BEM（Block Element Modifier） 手法を使用します。

.block {}
.block__element {}
.block__element--modifier {}

命名規則

• クラス名は短く、意味が明確で、意図的なものにします
• 汎用的な名前や見た目に基づく名前は避けます
• BEM の構造を使用します：.block__element--modifier

例

/* Good - BEM structure */
.product-card {}
.product-card__image {}
.product-card__title {}
.product-card__price {}
.product-card__button {}
.product-card__button--primary {}

/* Bad - generic or visual naming */
.red-button {}
.big-text {}
.container {}

CSS のスコープとカプセル化

カプセル化は、次の場合に許可されます。

• セクション間でスタイルが漏れるのを防ぐため
• セクションをテーマレベルのスタイルから保護するため
• セクションのスコープ内のみ

競合を防ぐため、各セクションには独自のスコープ付きスタイルを設定します。

CSS のネスト

ネイティブ CSS のネストは許可されていますが、厳格なルールがあります。

ネストを使用する場面

カプセル化が必要な場合にのみネストを使用します。

• セクションレベルの名前空間
• セクション内のブロックから要素への構造
• 疑似クラスと状態修飾子

ネストのルール

• ネストはセクションのスコープ内にとどめる必要があります
• ネストの深さは最小限にします（最大 1～2 階層）
• BEM の構造にネストを使用します：.block { .block__element {} }

許可される使用例

/* Section-level namespacing */
.featured-collection {
  padding: 2rem;
}

.featured-collection__grid {
  display: grid;
  gap: 1rem;
}

.featured-collection__item {
  /* Block element */
}

.featured-collection__item:hover {
  /* Pseudo-class */
}

.featured-collection__item--featured {
  /* Modifier */
}

許可されない例

• 深いネスト（2 階層を超えるもの）
• ブロック間の依存関係
• ネストしたスタイルがグローバルに再利用可能だと想定すること

/* Bad - too deep */
.section {
  .block {
    .element {
      .sub-element {
        /* 3+ levels - avoid */
      }
    }
  }
}

/* Bad - cross-block dependency */
.section-a {
  .section-b__element {
    /* Don't style other sections' elements */
  }
}

セクションの CSS 構造

各セクションには、スコープ付きスタイルを記述した独自の CSS ファイルを用意します。

/* featured-collection.css */
.featured-collection {
  /* Section wrapper */
}

.featured-collection__header {
  /* Section header */
}

.featured-collection__grid {
  /* Main content area */
}

.featured-collection__item {
  /* Grid item */
}

.featured-collection__item:hover {
  /* Hover state */
}

@media (max-width: 749px) {
  .featured-collection__grid {
    /* Mobile styles */
  }
}

Shopify テーマのドキュメント

以下の Shopify 公式リソースを参照してください。

• Shopify テンプレート
• Liquid フィルター（CSS アセットの処理用）

指示

1. セクション内のすべてのクラスに BEM の命名規則を使用します
2. 意味が明確な名前を付け、見た目ではなく目的を表します
3. セクションのスコープ内でスタイルをカプセル化します
4. ネストは最大 1～2 階層に制限します
5. セクションごとに CSS ファイルを 1 つ用意し、複数のセクションを混在させません
6. ネストは BEM の構造と疑似クラスにのみ使用します