運用フェーズを見据えた Shopify の CSS コーディングルール

こんにちは、 Gaji-Labo 横田です。
Eコマース用のプラットフォームである Shopify によるサイト構築で、以前、Shopify テーマのデフォルトスタイルと独自スタイルの CSS の共存を模索した を紹介しましたが、今回はもう一歩踏み込んだCSS のコーディングルールについて書いてみます。

デフォルトテーマとの共存を模索する

Shopify のデフォルトテーマである Debut を元にカスタマイズを進める中で、独自にスタイルを変更したり、新規に追加したい時に、 theme.css とどう共存させていくかというのは前回 も書いたように、課題でした。
開発時のスピード等を優先して、 theme.css に書かれたスタイルをそのまま直接編集したり、 class を新規追加して theme.css のスタイルを上書きしていくやり方もひとつの方針です。
この方針の場合、既存テーマのスタイル / class と、新規追加する スタイル / class が同居することになるので、後から CSS を修正・追加したい時、どの class を編集すればいいのか見通しが悪くなる懸念が考えられました。また、theme.css を直接編集すれば、影響範囲の確認にコストがかかることになります。1つの要素に複数の class を指定していけば、スタイルの上書きが複雑化していく状態にもなります。

<div class="default-class default-class2 original-class1 original-class2">

.default-class {
 display:block;
 text-align: left;
}
.default-class2 {
 color: red;
 font-weight: normal;
}
.original-class1 {
 text-align: center; //override
 color: blue; //override
 font-size: 18px; //original
}
.original-class2 {
 margin-top: 10px; //original
}

長きにわたる運用を見据えた場合、class の付け方やスタイルが複雑化し、不要になったスタイルであっても削除の判断が困難になり、 CSS の肥大化にもつながると考えました。
そこで、

• 既存テーマの スタイル / class と、新規追加する スタイル / class が同居している状態を避ける
• 1つの要素に複数の class が指定されている状態を避ける

ことをコーディングルールの方針としました。

デフォルトCSSのコーディングルール

• デフォルトのスタイルをそのまま使用できる箇所は、そのまま使用する
• 複数の class が指定されている状態も許容する

新規追加するCSS のコーディングルール

• 新規追加したい class には独自の接頭辞（prefix）を付ける
• 新たに class を付けたいところに既に class が付いていた場合は、付いていた class を新しい prefix-hoge に置き換える。元の スタイル（テーマのデフォルトスタイル） を、全て新しい prefix-hoge に移植する

<h1 class="collection-hero page-width">
↓
<h1 class="prefix-collection-hero">

.collection-hero {
 color: red;
}
.page-width {
 text-align:center;
}

↓

.prefix-collection-hero {
  color: red;
  text-align: center;
  font-size: 18px; //original style
}

• 移植したい class が Block 要素で、子要素に Element 要素があった時は Element 要素ごと全てのスタイルを移植する
• この場合、Element も全て class 名の差し替えを行う
• 移植ができたら、 theme.css から該当の class の style を削除する

例外

• class="prefix-hoge -fuga" のような CSS の modifier はマルチクラスを許容する
• class="prefix-hoge lazyload js" のような、 JS 関連の class はマルチクラスを許容する

まとめ

運用フェーズでの CSS のカスタマイズしやすさ、不要なスタイルの削除しやすさ、CSS の肥大化を出来るだけ減らし、class や CSS の見通しをよくする。運用フェーズでUIをこまめにアップデートしていく先を見据えた CSS 設計の一つの例になるかと思います。
Shopify での CSS コーディングルールを考える時の参考になればと思います。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。