Shopify テーマのデフォルトスタイルと独自スタイルの CSS の共存を模索した
こんにちは、 Gaji-Labo 横田です。
Eコマース用のプラットフォームである Shopify によるサイト構築で、Shopifyの提供するテーマ「Debut」のデフォルトスタイルと独自スタイルを共存させる時の CSS の設計方針を模索しました。
Shopify で実際に設定した CSS の環境構築についてはこちらの記事もお読みいただけると幸いです。
「Debut」のデフォルトスタイルをベースに
Shopifyの提供するテーマの中で、 すべてのストアに適したフレキシブルなテーマ 「Debut」をベースにカスタマイズしたり独自のスタイルを追加します。
Debut テーマ内のスタイルは全て theme.css というファイルに書かれています。
デフォルトスタイルのカスタマイズ
独自の CSS ファイルや Sections を用意し、都度 Debut の theme.css を上書きしていく方法は導入が簡単ではありますが、常にデフォルトスタイルに依存した書き方となるため、長く運用していく上ではスタイルの上書きが増え、かえって管理コストがかかるであろうことが想定されます。
そこで、Debut テーマにある機能や UI は基本カスタマイズせずにそのまま活かす前提で、以下のような方針でデフォルトスタイルと独自スタイルの共存方法を模索することにしました。
normalize のアップデート
Debut のデフォルトスタイルでは normalize.css v3.0.2 を使用していたため、バージョンを最新にアップデートしました。
条件が揃うと出てくる通常では見えない UI のスタイルにも影響することもあるので、検証は十分に行います。
デフォルトスタイルに依存しない CSS の設計方針
以下の順序で、デフォルトスタイルに依存しない CSS 設計を実践してみました。
- デフォルトスタイルをそのまま利用する想定のコンポーネント、例えば商品詳細やカートに出てくるコンポーネントなどはそのままいじらない。
- デフォルトスタイルにない独自のコンポーネントを作成する場合は、class 名に接頭辞をつけて区別する。
- セレクタ（例えば h1、ul など）に直接指定されたデフォルトスタイルに依存させないよう、独自コンポーネントはセレクタ直接指定の css をコピーしておき、デフォルトスタイルの依存を避ける。
- ハンバーガーメニューやヘッダー、フッターなど、 デフォルトスタイルに書かれたコンポーネントのカスタマイズは、css をまるっとコピーし、独自命名にリネームしてから必要なスタイリングを追記・修正する。
- デフォルトスタイルの中から現状使用しない UI の css をピックアップして別のcss ファイル（例えば theme_archive.css ）にまとめて移植しておき、必要になるまでは触らないファイルとする。class 名もそのままとする。
まとめ
今回は Shopifyの提供するテーマ「Debut」のデフォルトスタイルと独自スタイルを共存させる時の CSS の設計方針をまとめました。
normalize のアップデート、独自コンポーネントの作成、デフォルトスタイルのコンポーネントのカスタマイズ、現状使用しないUI の css 整理というように、段階的にCSS を整理していくことで、比較的安全に進めていくことができたのではと思います。
開発のお悩み、フロントエンドから解決しませんか？
あなたのチームのお悩みはなんですか？
「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」
役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。
オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。
リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください！
お悩み相談はこちらから！
