Shopify テーマのデフォルトスタイルと独自スタイルの CSS の共存を模索した

こんにちは、 Gaji-Labo 横田です。
Eコマース用のプラットフォームである Shopify によるサイト構築で、Shopifyの提供するテーマ「Debut」のデフォルトスタイルと独自スタイルを共存させる時の CSS の設計方針を模索しました。

Shopify で実際に設定した CSS の環境構築についてはこちらの記事もお読みいただけると幸いです。

「Debut」のデフォルトスタイルをベースに

Shopifyの提供するテーマの中で、 すべてのストアに適したフレキシブルなテーマ 「Debut」をベースにカスタマイズしたり独自のスタイルを追加します。
Debut テーマ内のスタイルは全て theme.css というファイルに書かれています。

theme.css
約7000行あります

デフォルトスタイルのカスタマイズ

独自の CSS ファイルや Sections を用意し、都度 Debut の theme.css を上書きしていく方法は導入が簡単ではありますが、常にデフォルトスタイルに依存した書き方となるため、長く運用していく上ではスタイルの上書きが増え、かえって管理コストがかかるであろうことが想定されます。

そこで、Debut テーマにある機能や UI は基本カスタマイズせずにそのまま活かす前提で、以下のような方針でデフォルトスタイルと独自スタイルの共存方法を模索することにしました。

normalize のアップデート

Debut のデフォルトスタイルでは normalize.css v3.0.2 を使用していたため、バージョンを最新にアップデートしました。
条件が揃うと出てくる通常では見えない UI のスタイルにも影響することもあるので、検証は十分に行います。

デフォルトスタイルに依存しない CSS の設計方針

以下の順序で、デフォルトスタイルに依存しない CSS 設計を実践してみました。

  1. デフォルトスタイルをそのまま利用する想定のコンポーネント、例えば商品詳細やカートに出てくるコンポーネントなどはそのままいじらない。
  2. デフォルトスタイルにない独自のコンポーネントを作成する場合は、class 名に接頭辞をつけて区別する。
  3. セレクタ(例えば h1、ul など)に直接指定されたデフォルトスタイルに依存させないよう、独自コンポーネントはセレクタ直接指定の css をコピーしておき、デフォルトスタイルの依存を避ける。
  4. ハンバーガーメニューやヘッダー、フッターなど、 デフォルトスタイルに書かれたコンポーネントのカスタマイズは、css をまるっとコピーし、独自命名にリネームしてから必要なスタイリングを追記・修正する。
  5. デフォルトスタイルの中から現状使用しない UI の css をピックアップして別のcss ファイル(例えば theme_archive.css )にまとめて移植しておき、必要になるまでは触らないファイルとする。class 名もそのままとする。

まとめ

今回は Shopifyの提供するテーマ「Debut」のデフォルトスタイルと独自スタイルを共存させる時の CSS の設計方針をまとめました。
normalize のアップデート、独自コンポーネントの作成、デフォルトスタイルのコンポーネントのカスタマイズ、現状使用しないUI の css 整理というように、段階的にCSS を整理していくことで、比較的安全に進めていくことができたのではと思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームが前に進むためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。