benjaminsehl/liquid-theme-standards

liquid-theme-standards は何をしますか？

Shopify Liquidテーマ向けCSS、JavaScript、およびHTMLコーディング標準。スタイルシートタグ内のBEM命名規則、デザイントークン、CSSカスタムプロパティ、テーマ向けWeb Components、防御的CSS、プログレッシブエンハンスメントをカバーします。.liquidファイルまたはテーマアセットファイルでCSS/JS/HTMLを記述する際に使用します。

目次

• 概要
• CSS標準
• JavaScript標準
• HTML標準
• コントリビューション

概要

このリポジトリは、Shopify Liquidテーマの開発における一貫性、保守性、およびパフォーマンスを向上させるためのコーディング標準を定義します。これらの標準は、単一のテーマでも、複数の開発者が関わる大規模プロジェクトでも適用できるように設計されています。

対象者

• Shopifyテーマ開発者
• フロントエンドエンジニア
• デザインシステム構築者

CSS標準

BEM命名規則

スタイルシートタグ内ではBEM（Block Element Modifier）命名規則を使用してください。

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

デザイントークン

デザイントークンにはCSSカスタムプロパティを使用します。すべてのトークンは:rootまたはtheme.liquid内で定義してください。

:root {
  --color-primary: #007bff;
  --spacing-unit: 8px;
  --font-size-base: 16px;
}

防御的CSS

防御的CSSの原則に従い、予期しない状態でもレイアウトが崩れないようにします。

.card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-unit);
  /* コンテンツが少ない場合のフォールバック */
  min-height: 100%;
}

JavaScript標準

Web Components

テーマ内で再利用可能なUIコンポーネントにはWeb Componentsを使用します。

class ProductCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <div class="product-card">
        <slot name="image"></slot>
        <slot name="title"></slot>
        <slot name="price"></slot>
      </div>
    `;
  }
}

customElements.define('product-card', ProductCard);

プログレッシブエンハンスメント

JavaScriptが無効な環境でも基本機能が動作するように、プログレッシブエンハンスメントの原則に従います。

<!-- 基本のHTML構造 -->
<a href="/products/example" class="add-to-cart">
  カートに追加
</a>

<script>
  // JavaScriptで機能を拡張
  document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', async (e) => {
      e.preventDefault();
      // AJAXでカートに追加
    });
  });
</script>

HTML標準

Liquidテンプレート

Liquidテンプレート内では、適切なインデントとコメントを使用して可読性を高めます。

{% comment %}
  商品カードブロック
  @param {object} product - 商品オブジェクト
{% endcomment %}
<div class="product-card">
  <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
</div>

アクセシビリティ

すべてのHTML要素には適切なARIA属性とセマンティックHTMLを使用します。

<nav aria-label="メインナビゲーション">
  <ul role="list">
    <li><a href="/">ホーム</a></li>
    <li><a href="/collections">コレクション</a></li>
  </ul>
</nav>

コントリビューション

この標準へのコントリビューションを歓迎します。プルリクエストを送信する前に、既存の規約に準拠していることを確認してください。

ライセンス

MIT